feat: update activity logic

src/components/designer/ActivityGenerator.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { PlusSquareOutlined } from '@ant-design/icons';
 import styled from '@emotion/styled';
 import { Alert, Button, Col, Form, InputNumber, Row, Select, Slider } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
@@ -16,22 +15,6 @@ const Styled = {
     width: 100%;
     border-radius: 4px;
   `,
-  AddActivity: styled(Button)<{ canAdd: boolean }>`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    border: none;
-    font-size: 100px;
-    color: #fff;
-    cursor: ${props => (props.canAdd ? 'pointer' : 'not-allowed')};
-    opacity: ${props => (props.canAdd ? '1' : '0.6')};
-
-    svg {
-      font-size: 33px;
-      color: ${props => (props.canAdd ? '#d46b08' : '#545353e6')};
-    }
-  `,
   Divider: styled.div`
     height: 1px;
     width: 100%;
@@ -125,6 +108,7 @@ const ActivityGenerator: React.FC<Props> = ({
 }) => {
   if (!visible) return null;
 
+  const editActivityId = activityInfo.id;
   const [addActivityInvalidState, setAddActivityInvalidState] =
     useState<AddActivityInvalidState | null>(null);
   const { sourceNode, targetNode, frequency, amount } = activityInfo;
@@ -134,10 +118,11 @@ const ActivityGenerator: React.FC<Props> = ({
   const { lightning } = network.nodes;
 
   // get store actions for adding activities
-  const { addSimulationActivity } = useStoreActions(s => s.network);
+  const { addSimulationActivity, updateSimulationActivity } = useStoreActions(
+    s => s.network,
+  );
 
   const getAuthDetails = (node: LightningNode) => {
-    console.log(nodeState);
     const id = nodeState && nodeState.nodes[node.name]?.info?.pubkey;
 
     if (!id) return;
@@ -217,7 +202,10 @@ const ActivityGenerator: React.FC<Props> = ({
       intervalSecs: frequency,
       networkId: network.id,
     };
-    await addSimulationActivity(activity);
+
+    editActivityId
+      ? await updateSimulationActivity({ ...activity, id: editActivityId })
+      : await addSimulationActivity(activity);
     reset();
     toggle();
   };
@@ -292,11 +280,6 @@ const ActivityGenerator: React.FC<Props> = ({
         />
 
         <Styled.NodeWrapper>
-          <Styled.AddActivity
-            size="large"
-            canAdd={!!sourceNode && !!targetNode}
-            icon={<PlusSquareOutlined />}
-          />
           <Styled.Cancel onClick={handleCancel}>{l('cancel')}</Styled.Cancel>
           <Styled.Save
             type="primary"

src/components/designer/default/cards/ActivityDesignerCard.tsx

@@ -136,6 +136,7 @@ interface Props {
 }
 
 const defaultActivityInfo: ActivityInfo = {
+  id: undefined,
   sourceNode: undefined,
   targetNode: undefined,
   amount: 1,
@@ -147,6 +148,7 @@ const ActivityDesignerCard: React.FC<Props> = ({ visible, network }) => {
   const [isAddActivityActive, setIsAddActivityActive] = React.useState(false);
 
   const { addSimulationActivity } = useStoreActions(s => s.network);
+  const { lightning } = network.nodes;
 
   const [activityInfo, setActivityInfo] = useState<ActivityInfo>(defaultActivityInfo);
 
@@ -161,14 +163,39 @@ const ActivityDesignerCard: React.FC<Props> = ({ visible, network }) => {
     setIsAddActivityActive(prev => !prev);
   };
 
-  const handleRemoveActivity = async (activity: SimulationActivity) => {
+  const handleRemoveActivity = async (
+    e: React.MouseEvent<HTMLElement, MouseEvent>,
+    activity: SimulationActivity,
+  ) => {
+    e.stopPropagation();
     await removeSimulationActivity(activity);
   };
 
-  const handleDuplicateActivity = async (activity: SimulationActivity) => {
+  const handleDuplicateActivity = async (
+    e: React.MouseEvent<HTMLElement, MouseEvent>,
+    activity: SimulationActivity,
+  ) => {
+    e.stopPropagation();
     await addSimulationActivity(activity);
   };
 
+  const resolveLabelToNode = (name: string) => {
+    const selectedNode = lightning.find(n => n.name === name);
+    return selectedNode;
+  };
+  const handleSelectActivity = (activity: SimulationActivity) => {
+    const sourceNode = resolveLabelToNode(activity.source.label);
+    const targetNode = resolveLabelToNode(activity.destination.label);
+    setActivityInfo({
+      id: activity.id,
+      sourceNode,
+      targetNode,
+      amount: activity.amountMsat,
+      frequency: activity.intervalSecs,
+    });
+    setIsAddActivityActive(true);
+  };
+
   const resolveUpdater = <T extends keyof ActivityInfo>({
     name,
     value,
@@ -219,7 +246,7 @@ const ActivityDesignerCard: React.FC<Props> = ({ visible, network }) => {
           <Styled.Activity
             key={`id-${activity.id}-${activity.source.address}-${activity.destination.address}`}
             colors={theme.dragNode}
-            onClick={() => console.log('clicked')}
+            onClick={() => handleSelectActivity(activity)}
           >
             <Styled.NodeWrapper>
               <span>{activity.source.label}</span>
@@ -228,12 +255,12 @@ const ActivityDesignerCard: React.FC<Props> = ({ visible, network }) => {
             </Styled.NodeWrapper>
             <Tooltip title={l('duplicateBtnTip')}>
               <Styled.CopyButton
-                onClick={() => handleDuplicateActivity(activity)}
+                onClick={e => handleDuplicateActivity(e, activity)}
                 icon={<CopyOutlined />}
               />
             </Tooltip>
             <Styled.DeleteButton
-              onClick={() => handleRemoveActivity(activity)}
+              onClick={e => handleRemoveActivity(e, activity)}
               icon={<DeleteOutlined />}
             />
           </Styled.Activity>

src/store/models/network.ts

@@ -61,6 +61,10 @@ interface AddSimulationActivityArgs {
   networkId: SimulationActivity['networkId'];
 }
 
+interface UpdateSimulationActivityArgs extends AddSimulationActivityArgs {
+  id: number;
+}
+
 export interface AutoMinerModel {
   startTime: number;
   timer?: NodeJS.Timer;
@@ -199,6 +203,13 @@ export interface NetworkModel {
     RootModel,
     Promise<void>
   >;
+  updateSimulationActivity: Thunk<
+    NetworkModel,
+    UpdateSimulationActivityArgs,
+    StoreInjections,
+    RootModel,
+    Promise<void>
+  >;
   removeSimulationActivity: Thunk<
     NetworkModel,
     SimulationActivity,
@@ -913,6 +924,31 @@ const networkModel: NetworkModel = {
     actions.setNetworks(updatedNetworks);
     await actions.save();
   }),
+  updateSimulationActivity: thunk(
+    async (actions, { networkId, id, ...rest }, { getState }) => {
+      const networks = getState().networks;
+      const networkIndex = networks.findIndex(n => n.id === networkId);
+
+      if (networkIndex === -1) throw new Error(l('networkByIdErr', { networkId }));
+
+      // Create a shallow copy of the network to update the object reference to cause a rerender on setNetworks
+      const updatedNetworks = [...networks];
+      const network = { ...networks[networkIndex] };
+
+      const activity = { ...rest, networkId, id };
+
+      const activityIndex = network.simulationActivities.findIndex(n => n.id === id);
+      if (activityIndex === -1) throw new Error(l('networkByIdErr', { id }));
+
+      network.simulationActivities[activityIndex] = activity;
+      updatedNetworks[networkIndex] = {
+        ...network,
+      };
+
+      actions.setNetworks(updatedNetworks);
+      await actions.save();
+    },
+  ),
   removeSimulationActivity: thunk(async (actions, { networkId, id }, { getState }) => {
     const networks = getState().networks;
     const networkIndex = networks.findIndex(n => n.id === networkId);

src/types/index.ts

@@ -231,6 +231,7 @@ export interface SimulationActivity {
   networkId: number;
 }
 export interface ActivityInfo {
+  id: number | undefined;
   sourceNode: LightningNode | undefined;
   targetNode: LightningNode | undefined;
   amount: number;