feat(Editor): use REST API endpoint to create step

packages/web/src/components/Editor/index.jsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
 
-import { CREATE_STEP } from 'graphql/mutations/create-step';
+import useCreateStep from 'hooks/useCreateStep';
 import { UPDATE_STEP } from 'graphql/mutations/update-step';
 import FlowStep from 'components/FlowStep';
 import { FlowPropType } from 'propTypes/propTypes';
@@ -12,9 +12,9 @@ import { useQueryClient } from '@tanstack/react-query';
 
 function Editor(props) {
   const [updateStep] = useMutation(UPDATE_STEP);
-  const [createStep, { loading: creationInProgress }] =
-    useMutation(CREATE_STEP);
   const { flow } = props;
+  const { mutateAsync: createStep, isPending: isCreateStepPending } =
+    useCreateStep(flow?.id);
   const [triggerStep] = flow.steps;
   const [currentStepId, setCurrentStepId] = React.useState(triggerStep.id);
   const queryClient = useQueryClient();
@@ -48,24 +48,13 @@ function Editor(props) {
 
   const addStep = React.useCallback(
     async (previousStepId) => {
-      const mutationInput = {
-        previousStep: {
-          id: previousStepId,
-        },
-        flow: {
-          id: flow.id,
-        },
-      };
-
-      const createdStep = await createStep({
-        variables: { input: mutationInput },
+      const { data: createdStep } = await createStep({
+        previousStepId,
       });
 
-      const createdStepId = createdStep.data.createStep.id;
-      setCurrentStepId(createdStepId);
-      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
+      setCurrentStepId(createdStep.id);
     },
-    [createStep, flow.id, queryClient],
+    [createStep],
   );
 
   const openNextStep = React.useCallback((nextStep) => {
@@ -101,7 +90,7 @@ function Editor(props) {
           <IconButton
             onClick={() => addStep(step.id)}
             color="primary"
-            disabled={creationInProgress || flow.active}
+            disabled={isCreateStepPending || flow.active}
           >
             <AddIcon />
           </IconButton>

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

@@ -4,8 +4,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import { FlowPropType } from 'propTypes/propTypes';
 import ReactFlow, { useNodesState, useEdgesState } from 'reactflow';
 import 'reactflow/dist/style.css';
+
 import { UPDATE_STEP } from 'graphql/mutations/update-step';
-import { CREATE_STEP } from 'graphql/mutations/create-step';
+import useCreateStep from 'hooks/useCreateStep';
 
 import { useAutoLayout } from './useAutoLayout';
 import { useScrollBoundaries } from './useScrollBoundaries';
@@ -36,8 +37,9 @@ const edgeTypes = {
 const EditorNew = ({ flow }) => {
   const [updateStep] = useMutation(UPDATE_STEP);
   const queryClient = useQueryClient();
-  const [createStep, { loading: stepCreationInProgress }] =
-    useMutation(CREATE_STEP);
+
+  const { mutateAsync: createStep, isPending: isCreateStepPending } =
+    useCreateStep(flow?.id);
 
   const [nodes, setNodes, onNodesChange] = useNodesState(
     generateInitialNodes(flow),
@@ -111,26 +113,13 @@ const EditorNew = ({ flow }) => {
 
   const onAddStep = useCallback(
     async (previousStepId) => {
-      const mutationInput = {
-        previousStep: {
-          id: previousStepId,
-        },
-        flow: {
-          id: flow.id,
-        },
-      };
+      const { data: createdStep } = await createStep({ previousStepId });
 
-      const {
-        data: { createStep: createdStep },
-      } = await createStep({
-        variables: { input: mutationInput },
-      });
+      console.log('CHECK THIS OUT!', createdStep);
 
-      const createdStepId = createdStep.id;
-      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
-      createdStepIdRef.current = createdStepId;
+      createdStepIdRef.current = createdStep.id;
     },
-    [flow.id, createStep, queryClient],
+    [createStep],
   );
 
   useEffect(() => {
@@ -260,7 +249,7 @@ const EditorNew = ({ flow }) => {
     >
       <EdgesContext.Provider
         value={{
-          stepCreationInProgress,
+          stepCreationInProgress: isCreateStepPending,
           onAddStep,
           flowActive: flow.active,
         }}

packages/web/src/hooks/useCreateStep.js

@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useCreateStep(flowId) {
+  const queryClient = useQueryClient();
+  const query = useMutation({
+    mutationFn: async ({ previousStepId }) => {
+      const { data } = await api.post(`/v1/flows/${flowId}/steps`, {
+        previousStepId,
+      });
+
+      return data;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['flows', flowId],
+      });
+    },
+  });
+
+  return query;
+}