From e7eb57375e856ab92444db74a5a3e402f16d41e6 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Wed, 11 Sep 2024 16:49:43 +0200
Subject: [PATCH] feat: the search debounce is working now as expected

---
 components/filters/CustomSearchInput.tsx | 24 +++++-------------------
 hooks/index.ts                           |  1 -
 hooks/useDebounce.ts                     | 15 ---------------
 3 files changed, 5 insertions(+), 35 deletions(-)
 delete mode 100644 hooks/useDebounce.ts

diff --git a/components/filters/CustomSearchInput.tsx b/components/filters/CustomSearchInput.tsx
index d1f7edb400..98310f10b5 100644
--- a/components/filters/CustomSearchInput.tsx
+++ b/components/filters/CustomSearchInput.tsx
@@ -1,27 +1,20 @@
 import { Input } from "@nextui-org/react";
+import debounce from "lodash.debounce";
 import { XCircle } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
 
-import { useDebounce } from "../../hooks/useDebounce";
-
 export const CustomSearchInput: React.FC = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  // const [searchQuery, setSearchQuery] = useState(() => {
-  //   return searchParams.get("filter[search]") || "";
-  // });
-  const [searchQuery, setSearchQuery] = useState("");
 
-  const debouncedSearchQuery = useDebounce(searchQuery, 500);
-  // console.log("debouncedSearchQuery", debouncedSearchQuery);
+  const [searchQuery, setSearchQuery] = useState("");
 
   const applySearch = useCallback(
     (query: string) => {
       const params = new URLSearchParams(searchParams.toString());
       if (query) {
         params.set("filter[search]", query);
-        setSearchQuery(query);
       } else {
         params.delete("filter[search]");
       }
@@ -30,6 +23,8 @@ export const CustomSearchInput: React.FC = () => {
     [router, searchParams],
   );
 
+  const debouncedChangeHandler = useCallback(debounce(applySearch, 300), []);
+
   const clearIconSearch = () => {
     setSearchQuery("");
     applySearch("");
@@ -40,15 +35,6 @@ export const CustomSearchInput: React.FC = () => {
     setSearchQuery(searchFromUrl);
   }, [searchParams]);
 
-  // useEffect(() => {
-  //   const timer = setTimeout(() => {
-  //     applySearch(debouncedSearchQuery);
-  //     console.log("hi from useEffect");
-  //   }, 2000);
-
-  //   return () => clearTimeout(timer);
-  // }, [debouncedSearchQuery, applySearch, searchParams]);
-
   return (
     <Input
       variant="bordered"
@@ -59,7 +45,7 @@ export const CustomSearchInput: React.FC = () => {
       onChange={(e) => {
         const value = e.target.value;
         setSearchQuery(value);
-        applySearch(value);
+        debouncedChangeHandler(value);
       }}
       endContent={
         searchQuery && (
diff --git a/hooks/index.ts b/hooks/index.ts
index b32251b922..709aadd864 100644
--- a/hooks/index.ts
+++ b/hooks/index.ts
@@ -1,2 +1 @@
-export * from "./useDebounce";
 export * from "./useLocalStorage";
diff --git a/hooks/useDebounce.ts b/hooks/useDebounce.ts
deleted file mode 100644
index 100322b91c..0000000000
--- a/hooks/useDebounce.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useEffect, useState } from "react";
-
-export function useDebounce<T>(value: T, delay?: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}