From 22299868fa109e06a9a50672893ed58b6629526a Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 11 Sep 2024 09:26:57 +0000
Subject: [PATCH] feat: use REST API endpoint to duplicate flow

---
 .../src/components/FlowContextMenu/index.jsx  | 17 ++++++++++----
 packages/web/src/hooks/useDuplicateFlow.js    | 23 +++++++++++++++++++
 2 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/src/hooks/useDuplicateFlow.js

diff --git a/packages/web/src/components/FlowContextMenu/index.jsx b/packages/web/src/components/FlowContextMenu/index.jsx
index bba8f10b..a484162a 100644
--- a/packages/web/src/components/FlowContextMenu/index.jsx
+++ b/packages/web/src/components/FlowContextMenu/index.jsx
@@ -13,6 +13,7 @@ import * as URLS from 'config/urls';
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useDuplicateFlow from 'hooks/useDuplicateFlow';
 
 function ContextMenu(props) {
   const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
@@ -20,13 +21,11 @@ function ContextMenu(props) {
   const enqueueSnackbar = useEnqueueSnackbar();
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
-  const [duplicateFlow] = useMutation(DUPLICATE_FLOW);
+  const { mutateAsync: duplicateFlow } = useDuplicateFlow(flowId);
   const [deleteFlow] = useMutation(DELETE_FLOW);
 
   const onFlowDuplicate = React.useCallback(async () => {
-    await duplicateFlow({
-      variables: { input: { id: flowId } },
-    });
+    await duplicateFlow();
 
     if (appKey) {
       await queryClient.invalidateQueries({
@@ -43,7 +42,15 @@ function ContextMenu(props) {
 
     onDuplicateFlow?.();
     onClose();
-  }, [flowId, onClose, duplicateFlow, queryClient, onDuplicateFlow]);
+  }, [
+    appKey,
+    enqueueSnackbar,
+    onClose,
+    duplicateFlow,
+    queryClient,
+    onDuplicateFlow,
+    formatMessage,
+  ]);
 
   const onFlowDelete = React.useCallback(async () => {
     await deleteFlow({
diff --git a/packages/web/src/hooks/useDuplicateFlow.js b/packages/web/src/hooks/useDuplicateFlow.js
new file mode 100644
index 00000000..c8df605f
--- /dev/null
+++ b/packages/web/src/hooks/useDuplicateFlow.js
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useDuplicateFlow(flowId) {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.post(`/v1/flows/${flowId}/duplicate`);
+
+      return data;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['flows'],
+      });
+    },
+  });
+
+  return query;
+}