fix: duplicate search in home

SOS-RS · May 6, 2024 · 7f261c9 · 7f261c9
1 parent 2096543
commit 7f261c9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/src/hooks/useShelters/useShelters.tsx b/src/hooks/useShelters/useShelters.tsx
@@ -49,8 +49,6 @@ const useShelters = () => {
     []
   );
 
-  console.log(data.results.length);
-
   useEffect(() => {
     refresh();
   }, [refresh]);

diff --git a/src/hooks/useThrottle/useThrottle.tsx b/src/hooks/useThrottle/useThrottle.tsx
@@ -3,20 +3,21 @@ import React, { useState, useEffect } from 'react';
 import { ThrottleOptions } from './types';
 
 function useThrottle<T>(
-  initialValue: T,
   options: ThrottleOptions<T>,
   deps: any[]
-): [T, React.Dispatch<React.SetStateAction<T>>] {
+): [T | null, React.Dispatch<React.SetStateAction<T | null>>] {
   const { throttle = 400, callback } = options;
-  const [value, setValue] = useState<T>(initialValue);
+  const [value, setValue] = useState<T | null>(null);
   const [, setIntervalId] = useState<NodeJS.Timeout>();
 
   useEffect(() => {
-    const id = setTimeout(() => callback(value), throttle);
-    setIntervalId((prev) => {
-      if (prev) clearTimeout(prev);
-      return id;
-    });
+    if (value !== null) {
+      const id = setTimeout(() => callback(value), throttle);
+      setIntervalId((prev) => {
+        if (prev) clearTimeout(prev);
+        return id;
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, throttle, ...deps]);
 

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useMemo, useState } from 'react';
 import { RotateCw, CircleAlert, Search, Loader } from 'lucide-react';
 
 import { Alert, Header, NoFoundSearch, ShelterListItem } from '@/components';
@@ -13,15 +13,15 @@ const Home = () => {
   const { data: shelters, loading, refresh } = useShelters();
   const [searchValue, setSearchValue] = useState<string>('');
   const [, setSearch] = useThrottle<string>(
-    '',
     {
       throttle: 400,
       callback: (v) => {
+        const params = {
+          search: `address:contains:${v},name:contains:${v}`,
+          or: 'true',
+        };
         refresh({
-          params: {
-            search: `address:contains:${v},name:contains:${v}`,
-            or: 'true',
-          },
+          params: v ? params : {},
         });
       },
     },
@@ -52,13 +52,6 @@ const Home = () => {
     );
   }, [refresh, searchValue, shelters.page, shelters.perPage]);
 
-  useEffect(() => {
-    setSearch(searchValue);
-  }, [searchValue, setSearch]);
-
-  // const { page, perPage, count } = shelters;
-  // const hasNextPage = page * perPage < count;
-
   return (
     <div className="flex flex-col h-screen items-center">
       <Header
@@ -89,7 +82,10 @@ const Home = () => {
           <Input
             placeholder="Buscar por abrigo ou endereço"
             className="h-12 text-md font-medium text-zinc-600 pl-10 pr-4"
-            onChange={(ev) => setSearchValue(ev.target.value)}
+            onChange={(ev) => {
+              setSearchValue(ev.target.value);
+              setSearch(ev.target.value);
+            }}
             value={searchValue}
           />
           <div className="absolute inset-y-0 left-0 flex items-center pl-3">