diff --git a/packages/web/src/components/Editor/index.jsx b/packages/web/src/components/Editor/index.jsx index 0995d300..51de3de9 100644 --- a/packages/web/src/components/Editor/index.jsx +++ b/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) { addStep(step.id)} color="primary" - disabled={creationInProgress || flow.active} + disabled={isCreateStepPending || flow.active} > diff --git a/packages/web/src/components/EditorNew/EditorNew.jsx b/packages/web/src/components/EditorNew/EditorNew.jsx index 73d29c51..2ad2db92 100644 --- a/packages/web/src/components/EditorNew/EditorNew.jsx +++ b/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 }) => { > { + const { data } = await api.post(`/v1/flows/${flowId}/steps`, { + previousStepId, + }); + + return data; + }, + + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ['flows', flowId], + }); + }, + }); + + return query; +}