From 9ab5fcf5a1dd3cb89b9e871d83efd79ce212bc72 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Wed, 16 Apr 2025 19:18:28 +0700
Subject: [PATCH] handle debounce on search municipio

---
 .../master/municipios/blocks/ListToolbar.tsx  | 32 +++++++------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/pages/master/municipios/blocks/ListToolbar.tsx b/src/pages/master/municipios/blocks/ListToolbar.tsx
index 140850c..f5f046d 100644
--- a/src/pages/master/municipios/blocks/ListToolbar.tsx
+++ b/src/pages/master/municipios/blocks/ListToolbar.tsx
@@ -1,7 +1,7 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
 import { Button } from '@/components/ui/button';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 const ListToolbar = () => {
@@ -9,8 +9,15 @@ const ListToolbar = () => {
   const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
   const [searchName, setSearchName] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
 
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        table.getColumn('name')?.setFilterValue(searchValue);
+      }, 200);
+  
+      return () => clearTimeout(timer);
+    }, [searchValue, table]);
   const handleFilterData = useCallback(() => {
     try {
       table.getColumn('name')?.setFilterValue(searchName);
@@ -20,37 +27,20 @@ const ListToolbar = () => {
     }
   }, [searchName, table]);
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  const handleSearch = () => {
-    table.getColumn('name')?.setFilterValue(searchValue);
-    table.setPageIndex(0);
-  };
-
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3 overflow-hidden">
+            <label className="input input-sm w-1/3">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Municipio"
+                placeholder="Search Transaction Type"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
-                <KeenIcon icon="magnifier" />
-              </Button>
-            </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"