From 5c4d5cd2cd78333b3c2fcfa1605ef0c5ce4ef799 Mon Sep 17 00:00:00 2001
From: Timi2424 <tymonbieganski@wp.pl>
Date: Thu, 22 Feb 2024 14:59:38 +0100
Subject: [PATCH 1/2] Debounce for search request

---
 .../components/searchDrawer/SearchDrawer.tsx  | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/my-app/src/components/searchDrawer/SearchDrawer.tsx b/my-app/src/components/searchDrawer/SearchDrawer.tsx
index e9bb3bf1..28ec4e5b 100644
--- a/my-app/src/components/searchDrawer/SearchDrawer.tsx
+++ b/my-app/src/components/searchDrawer/SearchDrawer.tsx
@@ -11,32 +11,33 @@ const SearchDrawer = () => {
     const [isDraweOpen, setIsDrawerOpen] = useState<boolean>(false);
     const [searchKeys, setSearchKeys] = useState('');
     const [searchedData, setSearchedData] = useState<Product[]>([]);
-    const [loader, setLoader] = useState<boolean>(false)
+    const [loader, setLoader] = useState<boolean>(false);
 
-    
     useEffect(() => {
-      const getproducts = async () => {
-        try {
-          setLoader(true)
-          const response: any = await getQueryProducts(searchKeys)
-
-          if (typeof response === null) {
-            setSearchedData(response)
-          } else {  
-            setSearchedData([])
+      const handler = setTimeout(async () => {
+        if (searchKeys.length > 0) {
+          try {
+            setLoader(true);
+            const response = await getQueryProducts(searchKeys);
+            setSearchedData(response);
+            if (typeof response === null) {
+              setSearchedData(response)
+            } else {  
+              setSearchedData([])
+            }
+          } catch (error) {
+            console.error('Error fetching data:', error);
+          } finally {
+            setLoader(false);
           }
-  
-        } catch (error) {
-          console.error('Error fetching data:', error);
-        } finally {
-          setLoader(false)
         }
-      }
-  
-      getproducts();
-      console.log(searchedData)
+      }, 500);
+
+      return () => {
+        clearTimeout(handler);
+      };
     }, [searchKeys]);
-  
+    
     const handleSearchInput: React.ChangeEventHandler<HTMLInputElement>= (event) => {
       setSearchKeys(event.target.value)
     }

From afcf2134aefb355153ea15cb20c58136f335e251 Mon Sep 17 00:00:00 2001
From: Timi2424 <tymonbieganski@wp.pl>
Date: Thu, 22 Feb 2024 15:04:19 +0100
Subject: [PATCH 2/2] commenting out not used loader state

---
 my-app/src/components/searchDrawer/SearchDrawer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/my-app/src/components/searchDrawer/SearchDrawer.tsx b/my-app/src/components/searchDrawer/SearchDrawer.tsx
index 28ec4e5b..c42201bb 100644
--- a/my-app/src/components/searchDrawer/SearchDrawer.tsx
+++ b/my-app/src/components/searchDrawer/SearchDrawer.tsx
@@ -11,13 +11,13 @@ const SearchDrawer = () => {
     const [isDraweOpen, setIsDrawerOpen] = useState<boolean>(false);
     const [searchKeys, setSearchKeys] = useState('');
     const [searchedData, setSearchedData] = useState<Product[]>([]);
-    const [loader, setLoader] = useState<boolean>(false);
+    //const [loader, setLoader] = useState<boolean>(false);
 
     useEffect(() => {
       const handler = setTimeout(async () => {
         if (searchKeys.length > 0) {
           try {
-            setLoader(true);
+            //setLoader(true);
             const response = await getQueryProducts(searchKeys);
             setSearchedData(response);
             if (typeof response === null) {
@@ -28,7 +28,7 @@ const SearchDrawer = () => {
           } catch (error) {
             console.error('Error fetching data:', error);
           } finally {
-            setLoader(false);
+            //setLoader(false);
           }
         }
       }, 500);