From 5de06d4482fc0662244bb8c16fdc989be1d8394f Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 18 Sep 2024 15:44:43 +0000
Subject: [PATCH] feat: use REST API endpoint to delete flow

---
 .../src/components/FlowContextMenu/index.jsx  | 18 +++------------
 packages/web/src/hooks/useDeleteFlow.js       | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 packages/web/src/hooks/useDeleteFlow.js

diff --git a/packages/web/src/components/FlowContextMenu/index.jsx b/packages/web/src/components/FlowContextMenu/index.jsx
index c8413508..56d3e6af 100644
--- a/packages/web/src/components/FlowContextMenu/index.jsx
+++ b/packages/web/src/components/FlowContextMenu/index.jsx
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useMutation } from '@apollo/client';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useQueryClient } from '@tanstack/react-query';
@@ -10,9 +9,9 @@ import { Link } from 'react-router-dom';
 
 import Can from 'components/Can';
 import * as URLS from 'config/urls';
-import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useDuplicateFlow from 'hooks/useDuplicateFlow';
+import useDeleteFlow from 'hooks/useDeleteFlow';
 
 function ContextMenu(props) {
   const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
@@ -21,7 +20,7 @@ function ContextMenu(props) {
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
   const { mutateAsync: duplicateFlow } = useDuplicateFlow(flowId);
-  const [deleteFlow] = useMutation(DELETE_FLOW);
+  const { mutateAsync: deleteFlow } = useDeleteFlow();
 
   const onFlowDuplicate = React.useCallback(async () => {
     await duplicateFlow();
@@ -52,18 +51,7 @@ function ContextMenu(props) {
   ]);
 
   const onFlowDelete = React.useCallback(async () => {
-    await deleteFlow({
-      variables: { input: { id: flowId } },
-      update: (cache) => {
-        const flowCacheId = cache.identify({
-          __typename: 'Flow',
-          id: flowId,
-        });
-        cache.evict({
-          id: flowCacheId,
-        });
-      },
-    });
+    await deleteFlow(flowId);
 
     if (appKey) {
       await queryClient.invalidateQueries({
diff --git a/packages/web/src/hooks/useDeleteFlow.js b/packages/web/src/hooks/useDeleteFlow.js
new file mode 100644
index 00000000..0dabec11
--- /dev/null
+++ b/packages/web/src/hooks/useDeleteFlow.js
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useDeleteFlow() {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async (flowId) => {
+      const { data } = await api.delete(`/v1/flows/${flowId}`);
+
+      return data;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['flows'],
+      });
+    },
+  });
+
+  return query;
+}