search with handleDebounce

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -1,11 +1,22 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
   
+  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]);
+
   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">
@@ -16,8 +27,8 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Transaction Type"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
           </div>

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -6,6 +6,22 @@ import { ColumnDef } from '@tanstack/react-table';
 import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolBar';
 
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
 interface AccountProps {
   id: string;
   name: string;
@@ -33,6 +49,8 @@ interface ContextProps {
   selectedTransferType: string | null;
   transferType: string | null;
   accounts: AccountProps[];
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
 }
 
 const initialProps: ContextProps = {
@@ -44,7 +62,9 @@ const initialProps: ContextProps = {
   handleDeleteDialog: () => {},
   selectedTransferType: null,
   accounts: [],
-  transferType: null
+  transferType: null,
+  searchTerm: '',
+  setSearchTerm: () => {}
 };
 
 const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
@@ -59,6 +79,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
   const { GetData } = useCallApi();
   const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
   const [transferType, setTransferType] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  
+  const debouncedSearchTerm = useDebounce(searchTerm, 200);
 
   const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
     setSelectedTransferType(show ? selected_transfertype : null);
@@ -231,7 +254,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 
     const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
 
-    filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+    const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {};
+    
+    filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() };
 
     const response = await GetData(`${API_URL}/transactiontype/list`, {
       limit: limit,
@@ -241,7 +266,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
       order_direction: orderDirection,
       filter: JSON.stringify(filter)
     });
-    // console.log(response?.data.list);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
@@ -257,7 +281,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
           handleDeleteDialog,
           selectedTransferType,
           accounts,
-          transferType
+          transferType,
+          searchTerm,
+          setSearchTerm
         }}
       >
         <Toaster expand visibleToasts={9} duration={3000} />