feat: use REST API endpoint to update flow status

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { useMutation } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -16,12 +15,11 @@ import Container from 'components/Container';
 import Editor from 'components/Editor';
 import Can from 'components/Can';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
 import * as URLS from 'config/urls';
 import { TopBar } from './style';
 import useFlow from 'hooks/useFlow';
 import useUpdateFlow from 'hooks/useUpdateFlow';
-import { useQueryClient } from '@tanstack/react-query';
+import useUpdateFlowStatus from 'hooks/useUpdateFlowStatus';
 import EditorNew from 'components/EditorNew/EditorNew';
 
 const useNewFlowEditor = process.env.REACT_APP_USE_NEW_FLOW_EDITOR === 'true';
@@ -30,10 +28,9 @@ export default function EditorLayout() {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
   const { mutateAsync: updateFlow } = useUpdateFlow(flowId);
-  const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS);
+  const { mutateAsync: updateFlowStatus } = useUpdateFlowStatus(flowId);
   const { data, isLoading: isFlowLoading } = useFlow(flowId);
   const flow = data?.data;
-  const queryClient = useQueryClient();
 
   const onFlowNameUpdate = async (name) => {
     await updateFlow({
@@ -41,24 +38,6 @@ export default function EditorLayout() {
     });
   };
 
-  const onFlowStatusUpdate = React.useCallback(
-    async (active) => {
-      try {
-        await updateFlowStatus({
-          variables: {
-            input: {
-              id: flowId,
-              active,
-            },
-          },
-        });
-
-        await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
-      } catch (err) {}
-    },
-    [flowId, queryClient],
-  );
-
   return (
     <>
       <TopBar
@@ -107,7 +86,7 @@ export default function EditorLayout() {
                 disabled={!allowed || !flow}
                 variant="contained"
                 size="small"
-                onClick={() => onFlowStatusUpdate(!flow.active)}
+                onClick={() => updateFlowStatus(!flow.active)}
                 data-test={
                   flow?.active ? 'unpublish-flow-button' : 'publish-flow-button'
                 }
@@ -153,7 +132,7 @@ export default function EditorLayout() {
           <Button
             variant="contained"
             size="small"
-            onClick={() => onFlowStatusUpdate(!flow.active)}
+            onClick={() => updateFlowStatus(!flow.active)}
             data-test="unpublish-flow-from-snackbar"
           >
             {formatMessage('flowEditor.unpublish')}

packages/web/src/hooks/useUpdateFlowStatus.js

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