feat: improve nodes and edges state update

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

@@ -1,10 +1,10 @@
 import { EdgeLabelRenderer, getStraightPath } from 'reactflow';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
-import { useMutation } from '@apollo/client';
-import { CREATE_STEP } from 'graphql/mutations/create-step';
-import { useQueryClient } from '@tanstack/react-query';
+
 import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { EdgesContext } from '../EditorNew';
 
 export default function Edge({
   sourceX,
@@ -12,11 +12,11 @@ export default function Edge({
   targetX,
   targetY,
   source,
-  data: { flowId, setCurrentStepId, flowActive, layouted },
+  data: { layouted },
 }) {
-  const [createStep, { loading: creationInProgress }] =
-    useMutation(CREATE_STEP);
-  const queryClient = useQueryClient();
+  const { stepCreationInProgress, flowActive, onAddStep } =
+    useContext(EdgesContext);
+
   const [edgePath, labelX, labelY] = getStraightPath({
     sourceX,
     sourceY,
@@ -24,30 +24,11 @@ export default function Edge({
     targetY,
   });
 
-  const addStep = async (previousStepId) => {
-    const mutationInput = {
-      previousStep: {
-        id: previousStepId,
-      },
-      flow: {
-        id: flowId,
-      },
-    };
-
-    const createdStep = await createStep({
-      variables: { input: mutationInput },
-    });
-
-    const createdStepId = createdStep.data.createStep.id;
-    setCurrentStepId(createdStepId);
-    await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
-  };
-
   return (
     <>
       <EdgeLabelRenderer>
         <IconButton
-          onClick={() => addStep(source)}
+          onClick={() => onAddStep(source)}
           color="primary"
           sx={{
             position: 'absolute',
@@ -55,7 +36,7 @@ export default function Edge({
             pointerEvents: 'all',
             visibility: layouted ? 'visible' : 'hidden',
           }}
-          disabled={creationInProgress || flowActive}
+          disabled={stepCreationInProgress || flowActive}
         >
           <AddIcon />
         </IconButton>
@@ -71,9 +52,6 @@ Edge.propTypes = {
   targetY: PropTypes.number.isRequired,
   source: PropTypes.string.isRequired,
   data: PropTypes.shape({
-    flowId: PropTypes.string.isRequired,
-    setCurrentStepId: PropTypes.func.isRequired,
-    flowActive: PropTypes.bool.isRequired,
     layouted: PropTypes.bool,
   }).isRequired,
 };