refactor: custom fetcher helper

RishadAlam · RishadAlam · commit 424366f1da31 · 2025-02-16T12:41:32.000+06:00
diff --git a/frontend-dev/src/Utils/CustomFetcherHelper.jsx b/frontend-dev/src/Utils/CustomFetcherHelper.jsx
@@ -1,12 +1,32 @@
 import { create } from 'mutative'
 import bitsFetch from './bitsFetch'
 
-const removeTestData = (entityId, removeAction, removeMethod = 'POST', key = 'triggered_entity_id') => {
-  if (!entityId) {
-    return
+export default function CustomFetcherHelper(
+  isLoadingRef,
+  entityId,
+  controller,
+  setIsLoading,
+  removeAction,
+  removeMethod = 'POST',
+  key = 'triggered_entity_id'
+) {
+  const removeTestData = () => {
+    if (!entityId) {
+      return
+    }
+
+    bitsFetch({ [key]: entityId }, removeAction, null, removeMethod)
+  }
+
+  const stopFetching = () => {
+    controller.abort()
+    setIsLoading(false)
+    isLoadingRef.current = false
+
+    removeTestData()
   }
 
-  bitsFetch({ [key]: entityId }, removeAction, null, removeMethod)
+  return { stopFetching }
 }
 
 const resetActionHookFlowData = setFlow => {
@@ -33,22 +53,6 @@ const startFetching = (
   resetFlowData(setFlow, isEdit)
 }
 
-const stopFetching = (
-  controller,
-  entityId,
-  isLoadingRef,
-  removeAction,
-  removeMethod,
-  setIsLoading,
-  key = 'triggered_entity_id'
-) => {
-  controller.abort()
-  setIsLoading(false)
-  isLoadingRef.current = false
-
-  removeTestData(entityId, removeAction, removeMethod, key)
-}
-
 const resetFlowData = (setFlow, isEdit = false) => {
   setFlow(prevFlow =>
     create(prevFlow, draftFlow => {
@@ -59,4 +63,4 @@ const resetFlowData = (setFlow, isEdit = false) => {
   )
 }
 
-export { removeTestData, startFetching, stopFetching, resetFlowData, resetActionHookFlowData }
+export { startFetching, resetFlowData, resetActionHookFlowData }
diff --git a/frontend-dev/src/components/AllIntegrations/EditActionHook.jsx b/frontend-dev/src/components/AllIntegrations/EditActionHook.jsx
@@ -6,16 +6,15 @@ import MultiSelect from 'react-multiple-select-dropdown-lite'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
 import { useRecoilState, useSetRecoilState } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../GlobalStates'
-import CloseIcn from '../../Icons/CloseIcn'
 import bitsFetch from '../../Utils/bitsFetch'
-import { stopFetching } from '../../Utils/customFormHelper'
+import CustomFetcherHelper from '../../Utils/CustomFetcherHelper'
 import { extractValueFromPath } from '../../Utils/Helpers'
 import { __ } from '../../Utils/i18nwrap'
 import LoaderSm from '../Loaders/LoaderSm'
 import EyeIcn from '../Utilities/EyeIcn'
 import EyeOffIcn from '../Utilities/EyeOffIcn'
-import TreeViewer from '../Utilities/treeViewer/TreeViewer'
 import FieldContainer from '../Utilities/FieldContainer'
+import TreeViewer from '../Utilities/treeViewer/TreeViewer'
 
 function EditActionHook() {
   const [actionConf, setActionConf] = useRecoilState($actionConf)
@@ -25,24 +24,22 @@ function EditActionHook() {
   const [showSelectedFields, setShowSelectedFields] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const isFetchingRef = useRef(false)
+
   let controller = new AbortController()
   const signal = controller.signal
-
-  const callStopFetching = () => {
-    stopFetching(
-      controller,
-      flow?.triggered_entity_id,
-      isFetchingRef,
-      'action_hook/test/remove',
-      'post',
-      setIsLoading,
-      'hook_id'
-    )
-  }
+  const { stopFetching } = CustomFetcherHelper(
+    isFetchingRef,
+    flow?.triggered_entity_id,
+    controller,
+    setIsLoading,
+    'action_hook/test/remove',
+    'POST',
+    'hook_id'
+  )
 
   const handleFetch = () => {
     if (isFetchingRef.current) {
-      callStopFetching()
+      stopFetching()
       return
     }
 
@@ -56,7 +53,7 @@ function EditActionHook() {
 
     try {
       if (!isFetchingRef.current || !hookID) {
-        callStopFetching()
+        stopFetching()
         return
       }
 
@@ -100,7 +97,7 @@ function EditActionHook() {
           setShowSelectedFields(true)
         }
 
-        callStopFetching()
+        stopFetching()
       })
     } catch (err) {
       console.log(
@@ -202,7 +199,7 @@ function EditActionHook() {
 
   const setHook = val => {
     if (flow?.triggered_entity_id) {
-      callStopFetching()
+      stopFetching()
     }
 
     setFlow(prevFlow =>
diff --git a/frontend-dev/src/components/AllIntegrations/EditCustomFormSubmissionInteg.jsx b/frontend-dev/src/components/AllIntegrations/EditCustomFormSubmissionInteg.jsx
@@ -8,7 +8,7 @@ import 'react-multiple-select-dropdown-lite/dist/index.css'
 import { useRecoilState, useSetRecoilState } from 'recoil'
 import { $formFields, $newFlow } from '../../GlobalStates'
 import bitsFetch from '../../Utils/bitsFetch'
-import { stopFetching } from '../../Utils/customFormHelper'
+import CustomFetcherHelper from '../../Utils/CustomFetcherHelper'
 import { __ } from '../../Utils/i18nwrap'
 import LoaderSm from '../Loaders/LoaderSm'
 
@@ -32,21 +32,18 @@ function EditCustomFormSubmissionInteg({ setSnackbar }) {
   const fetchMethod = flow?.flow_details?.fetch?.method || ''
   const removeAction = flow?.flow_details?.fetch_remove?.action || ''
   const removeMethod = flow?.flow_details?.fetch_remove?.method || ''
-
-  const callStopFetching = () => {
-    stopFetching(
-      controller,
-      flow.triggered_entity_id,
-      isFetchingRef,
-      removeAction,
-      removeMethod,
-      setIsLoading
-    )
-  }
+  const { stopFetching } = CustomFetcherHelper(
+    isFetchingRef,
+    flow.triggered_entity_id,
+    controller,
+    setIsLoading,
+    removeAction,
+    removeMethod
+  )
 
   const handleFetch = async () => {
     if (isFetchingRef.current) {
-      callStopFetching()
+      stopFetching()
       return
     }
 
@@ -60,7 +57,7 @@ function EditCustomFormSubmissionInteg({ setSnackbar }) {
 
     try {
       if (!isFetchingRef.current || !entityId) {
-        callStopFetching()
+        stopFetching()
         return
       }
 
@@ -87,7 +84,7 @@ function EditCustomFormSubmissionInteg({ setSnackbar }) {
           setFormFields(formData)
         }
 
-        callStopFetching()
+        stopFetching()
       })
     } catch (err) {
       console.log(
@@ -120,13 +117,13 @@ function EditCustomFormSubmissionInteg({ setSnackbar }) {
 
   useEffect(() => {
     return () => {
-      callStopFetching()
+      stopFetching()
     }
   }, [])
 
   const setTriggerEntityId = entityId => {
     if (flow?.triggered_entity_id) {
-      callStopFetching()
+      stopFetching()
     }
 
     setFlow(prevFlow =>
diff --git a/frontend-dev/src/components/AllIntegrations/EditCustomTrigger.jsx b/frontend-dev/src/components/AllIntegrations/EditCustomTrigger.jsx
@@ -6,7 +6,7 @@ import 'react-multiple-select-dropdown-lite/dist/index.css'
 import { useRecoilState, useSetRecoilState } from 'recoil'
 import { $actionConf, $formFields, $newFlow } from '../../GlobalStates'
 import bitsFetch from '../../Utils/bitsFetch'
-import { stopFetching } from '../../Utils/customFormHelper'
+import CustomFetcherHelper from '../../Utils/CustomFetcherHelper'
 import { __ } from '../../Utils/i18nwrap'
 import LoaderSm from '../Loaders/LoaderSm'
 import CopyTextTrigger from '../Utilities/CopyTextTrigger'
@@ -25,27 +25,24 @@ function EditCustomTrigger() {
   const [showResponse, setShowResponse] = useState(false)
   const [showSelectedFields, setShowSelectedFields] = useState(false)
   const isFetchingRef = useRef(false)
+
   let controller = new AbortController()
   const signal = controller.signal
+  const { stopFetching } = CustomFetcherHelper(
+    isFetchingRef,
+    flow?.triggered_entity_id,
+    controller,
+    setIsLoading,
+    'custom_trigger/test/remove',
+    'hook_id'
+  )
 
   const triggerAbeleHook = `do_action(
     'bit_integrations_custom_trigger',
     '${flow?.triggered_entity_id}',
      array()
      );`
 
-  const callStopFetching = () => {
-    stopFetching(
-      controller,
-      flow?.triggered_entity_id,
-      isFetchingRef,
-      'custom_trigger/test/remove',
-      'post',
-      setIsLoading,
-      'hook_id'
-    )
-  }
-
   const setSelectedFieldsData = (value = null, remove = false, index = null) => {
     if (remove) {
       index = index ? index : flow.flow_details.fields.findIndex(field => field.name === value)
@@ -103,7 +100,7 @@ function EditCustomTrigger() {
 
   const handleFetch = () => {
     if (isFetchingRef.current) {
-      callStopFetching()
+      stopFetching()
       return
     }
 
@@ -117,7 +114,7 @@ function EditCustomTrigger() {
 
     try {
       if (!isFetchingRef.current || !hookID) {
-        callStopFetching()
+        stopFetching()
         return
       }
 
@@ -160,7 +157,7 @@ function EditCustomTrigger() {
           setShowSelectedFields(true)
         }
 
-        callStopFetching()
+        stopFetching()
       })
     } catch (err) {
       console.log(
diff --git a/frontend-dev/src/components/Triggers/ActionHook.jsx b/frontend-dev/src/components/Triggers/ActionHook.jsx
@@ -7,12 +7,12 @@ import MultiSelect from 'react-multiple-select-dropdown-lite'
 import 'react-multiple-select-dropdown-lite/dist/index.css'
 import { useRecoilState, useSetRecoilState } from 'recoil'
 import { $flowStep, $formFields, $newFlow } from '../../GlobalStates'
+import bitsFetch from '../../Utils/bitsFetch'
+import CustomFetcherHelper, { resetActionHookFlowData } from '../../Utils/CustomFetcherHelper'
 import GetLogo from '../../Utils/GetLogo'
 import { extractValueFromPath } from '../../Utils/Helpers'
-import hooklist from '../../Utils/StaticData/hooklist'
-import bitsFetch from '../../Utils/bitsFetch'
-import { resetActionHookFlowData, stopFetching } from '../../Utils/customFormHelper'
 import { __ } from '../../Utils/i18nwrap'
+import hooklist from '../../Utils/StaticData/hooklist'
 import LoaderSm from '../Loaders/LoaderSm'
 import ConfirmModal from '../Utilities/ConfirmModal'
 import EyeIcn from '../Utilities/EyeIcn'
@@ -36,8 +36,18 @@ const ActionHook = () => {
   const [snack, setSnackbar] = useState({ show: false })
   const [showResponse, setShowResponse] = useState(false)
   const isFetchingRef = useRef(false)
+
   let controller = new AbortController()
   const signal = controller.signal
+  const { stopFetching } = CustomFetcherHelper(
+    isFetchingRef,
+    hookID,
+    controller,
+    setIsLoading,
+    'action_hook/test/remove',
+    'POST',
+    'hook_id'
+  )
 
   const setTriggerData = () => {
     if (!selectedFields.length) {
@@ -63,18 +73,6 @@ const ActionHook = () => {
     setFlowStep(2)
   }
 
-  const callStopFetching = () => {
-    stopFetching(
-      controller,
-      hookID,
-      isFetchingRef,
-      'action_hook/test/remove',
-      'post',
-      setIsLoading,
-      'hook_id'
-    )
-  }
-
   const setSelectedFieldsData = (value = null, remove = false, index = null) => {
     if (remove) {
       index = index ? index : selectedFields.findIndex(field => field.name === value)
@@ -117,7 +115,7 @@ const ActionHook = () => {
     }
 
     return () => {
-      callStopFetching()
+      stopFetching()
     }
   }, [])
 
@@ -132,7 +130,7 @@ const ActionHook = () => {
 
   const handleFetch = () => {
     if (isFetchingRef.current) {
-      callStopFetching()
+      stopFetching()
       return
     }
 
@@ -143,7 +141,7 @@ const ActionHook = () => {
   const fetchSequentially = () => {
     try {
       if (!isFetchingRef.current || !hookID) {
-        callStopFetching()
+        stopFetching()
         return
       }
 
@@ -166,7 +164,7 @@ const ActionHook = () => {
           setShowResponse(true)
         }
 
-        callStopFetching()
+        stopFetching()
       })
     } catch (err) {
       console.log(
@@ -191,7 +189,7 @@ const ActionHook = () => {
     const isHook = name === 'hook'
 
     if (hookID) {
-      callStopFetching()
+      stopFetching()
     }
 
     if (isCustom || (isHook && val === 'custom')) {
diff --git a/frontend-dev/src/components/Triggers/CustomFormSubmission.jsx b/frontend-dev/src/components/Triggers/CustomFormSubmission.jsx
diff --git a/frontend-dev/src/components/Triggers/CustomTrigger.jsx b/frontend-dev/src/components/Triggers/CustomTrigger.jsx
