feat: improve nodes and edges state update

packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx

@@ -1,25 +1,24 @@
 import { Handle, Position } from 'reactflow';
-import { Box } from '@mui/material';
 import PropTypes from 'prop-types';
 
 import FlowStep from 'components/FlowStep';
-import { StepPropType } from 'propTypes/propTypes';
 
 import { NodeWrapper, NodeInnerWrapper } from './style.js';
+import { useContext } from 'react';
+import { NodesContext } from '../EditorNew.jsx';
 
-function FlowStepNode({
-  data: {
-    step,
-    index,
-    flowId,
-    collapsed,
+function FlowStepNode({ data: { collapsed, layouted }, id }) {
+  const {
     openNextStep,
-    onOpen,
-    onClose,
-    onChange,
-    layouted,
-  },
-}) {
+    onStepOpen,
+    onStepClose,
+    onStepChange,
+    flowId,
+    steps,
+  } = useContext(NodesContext);
+
+  const step = steps.find(({ id: stepId }) => stepId === id);
+
   return (
     <NodeWrapper
       className="nodrag"
@@ -34,16 +33,17 @@ function FlowStepNode({
           isConnectable={false}
           style={{ visibility: 'hidden' }}
         />
-        <FlowStep
-          step={step}
-          index={index + 1}
-          collapsed={collapsed}
-          onOpen={onOpen}
-          onClose={onClose}
-          onChange={onChange}
-          flowId={flowId}
-          onContinue={openNextStep}
-        />
+        {step && (
+          <FlowStep
+            step={step}
+            collapsed={collapsed}
+            onOpen={() => onStepOpen(step.id)}
+            onClose={onStepClose}
+            onChange={onStepChange}
+            flowId={flowId}
+            onContinue={() => openNextStep(step.id)}
+          />
+        )}
         <Handle
           type="source"
           position={Position.Bottom}
@@ -56,15 +56,9 @@ function FlowStepNode({
 }
 
 FlowStepNode.propTypes = {
+  id: PropTypes.string,
   data: PropTypes.shape({
-    step: StepPropType.isRequired,
-    index: PropTypes.number.isRequired,
-    flowId: PropTypes.string.isRequired,
     collapsed: PropTypes.bool.isRequired,
-    openNextStep: PropTypes.func.isRequired,
-    onOpen: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
     layouted: PropTypes.bool.isRequired,
   }).isRequired,
 };