From 28c8be97b6250e30c33758d421644ea1a78c5e8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Wed, 6 Mar 2024 18:37:46 +0300
Subject: [PATCH] feat: add useLazyApps hook

---
 .../components/AddNewAppConnection/index.jsx  | 28 +++++++++++-------
 packages/web/src/hooks/useLazyApps.js         | 29 +++++++++++++++++++
 2 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 packages/web/src/hooks/useLazyApps.js

diff --git a/packages/web/src/components/AddNewAppConnection/index.jsx b/packages/web/src/components/AddNewAppConnection/index.jsx
index f798eba1..ea26e1ab 100644
--- a/packages/web/src/components/AddNewAppConnection/index.jsx
+++ b/packages/web/src/components/AddNewAppConnection/index.jsx
@@ -20,11 +20,10 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import FormControl from '@mui/material/FormControl';
 import Box from '@mui/material/Box';
 
-import api from 'helpers/api';
 import * as URLS from 'config/urls';
 import AppIcon from 'components/AppIcon';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { useMutation } from '@tanstack/react-query';
+import useLazyApps from 'hooks/useLazyApps';
 
 function createConnectionOrFlow(appKey, supportsConnections = false) {
   if (!supportsConnections) {
@@ -40,27 +39,34 @@ function AddNewAppConnection(props) {
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
+  const abortControllerRef = React.useRef(null);
 
-  const { data: apps, mutate } = useMutation({
-    mutationFn: async ({ payload, signal }) => {
-      const { data } = await api.get('/v1/apps', {
-        params: { name: appName },
-      });
-
-      return data;
-    },
+  const { data: apps, mutate } = useLazyApps({
+    appName,
     onSuccess: () => {
       setIsLoading(false);
     },
+    abortControllerRef,
   });
 
   const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
 
   React.useEffect(() => {
     setIsLoading(true);
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+
     fetchData(appName);
 
-    return () => fetchData.cancel();
+    return () => {
+      fetchData.cancel();
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
   }, [fetchData, appName]);
 
   return (
diff --git a/packages/web/src/hooks/useLazyApps.js b/packages/web/src/hooks/useLazyApps.js
new file mode 100644
index 00000000..327692c6
--- /dev/null
+++ b/packages/web/src/hooks/useLazyApps.js
@@ -0,0 +1,29 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useLazyApps({
+  appName,
+  onSuccess,
+  abortControllerRef,
+}) {
+  const query = useMutation({
+    mutationFn: async ({ payload, signal }) => {
+      abortControllerRef.current = new AbortController();
+
+      const { data } = await api.get('/v1/apps', {
+        params: { name: appName },
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (abortControllerRef.current.signal.aborted) {
+        return;
+      }
+
+      return data;
+    },
+    onSuccess,
+  });
+
+  return query;
+}