From ad284990fd9363eec4014d4ad53fbfb60c9ac5aa Mon Sep 17 00:00:00 2001 From: Emmanuel-Develops Date: Wed, 14 Feb 2024 16:37:50 +0100 Subject: [PATCH] feat: update activity logic --- src/components/designer/ActivityGenerator.tsx | 33 ++++------------- .../default/cards/ActivityDesignerCard.tsx | 37 ++++++++++++++++--- src/store/models/network.ts | 36 ++++++++++++++++++ src/types/index.ts | 1 + 4 files changed, 77 insertions(+), 30 deletions(-) diff --git a/src/components/designer/ActivityGenerator.tsx b/src/components/designer/ActivityGenerator.tsx index 9f037d6892..184170f0aa 100644 --- a/src/components/designer/ActivityGenerator.tsx +++ b/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 = ({ }) => { if (!visible) return null; + const editActivityId = activityInfo.id; const [addActivityInvalidState, setAddActivityInvalidState] = useState(null); const { sourceNode, targetNode, frequency, amount } = activityInfo; @@ -134,10 +118,11 @@ const ActivityGenerator: React.FC = ({ 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 = ({ 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 = ({ /> - } - /> {l('cancel')} = ({ visible, network }) => { const [isAddActivityActive, setIsAddActivityActive] = React.useState(false); const { addSimulationActivity } = useStoreActions(s => s.network); + const { lightning } = network.nodes; const [activityInfo, setActivityInfo] = useState(defaultActivityInfo); @@ -161,14 +163,39 @@ const ActivityDesignerCard: React.FC = ({ visible, network }) => { setIsAddActivityActive(prev => !prev); }; - const handleRemoveActivity = async (activity: SimulationActivity) => { + const handleRemoveActivity = async ( + e: React.MouseEvent, + activity: SimulationActivity, + ) => { + e.stopPropagation(); await removeSimulationActivity(activity); }; - const handleDuplicateActivity = async (activity: SimulationActivity) => { + const handleDuplicateActivity = async ( + e: React.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 = ({ name, value, @@ -219,7 +246,7 @@ const ActivityDesignerCard: React.FC = ({ visible, network }) => { console.log('clicked')} + onClick={() => handleSelectActivity(activity)} > {activity.source.label} @@ -228,12 +255,12 @@ const ActivityDesignerCard: React.FC = ({ visible, network }) => { handleDuplicateActivity(activity)} + onClick={e => handleDuplicateActivity(e, activity)} icon={} /> handleRemoveActivity(activity)} + onClick={e => handleRemoveActivity(e, activity)} icon={} /> diff --git a/src/store/models/network.ts b/src/store/models/network.ts index 83716064c8..095716278a 100644 --- a/src/store/models/network.ts +++ b/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 >; + updateSimulationActivity: Thunk< + NetworkModel, + UpdateSimulationActivityArgs, + StoreInjections, + RootModel, + Promise + >; 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); diff --git a/src/types/index.ts b/src/types/index.ts index bb6d4c831c..678793911f 100644 --- a/src/types/index.ts +++ b/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;