feat(integration): added debouncing in search

COMPASS-DPG · Nov 16, 2023 · a5c89c0 · a5c89c0
1 parent 95b4b16
commit a5c89c0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/src/components/wpcasOverView/SearchUser.tsx b/src/components/wpcasOverView/SearchUser.tsx
@@ -6,27 +6,27 @@ import SearchInput from '@/components/uiComponents/SearchInput';
 type PropType = {
   value: string;
   onChange: (arg: string) => void;
-  handleSearch: () => void;
+  // handleSearch: () => void;
 };
 
-import ButtonFill from '@/components/uiComponents/ButtonFill';
+// import ButtonFill from '@/components/uiComponents/ButtonFill';
 
-import SearchIcon from '~/svg/searchIcon.svg';
+// import SearchIcon from '~/svg/searchIcon.svg';
 
-const SearchUser = ({ value, onChange, handleSearch }: PropType) => {
+const SearchUser = ({ value, onChange }: PropType) => {
   return (
     <div className='my-7 flex flex-wrap gap-2.5'>
       <SearchInput
         value={value}
         onChange={(updatedValue) => onChange(updatedValue)}
         placeholder='Search User'
       />
-      <ButtonFill onClick={handleSearch} classes='bg-[#385B8B] w-[120px]'>
+      {/* <ButtonFill onClick={handleSearch} classes='bg-[#385B8B] w-[120px]'>
         <div className='flex justify-between'>
           <SearchIcon className='w-[18px]' />
           <span>Search</span>
         </div>
-      </ButtonFill>
+      </ButtonFill> */}
     </div>
   );
 };

diff --git a/src/components/wpcasOverView/UserTable.tsx b/src/components/wpcasOverView/UserTable.tsx
@@ -32,32 +32,31 @@ const UserTable = ({
 }: PropType) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(5);
+  const [searchInput, setSearchInput] = useState<string>('');
 
   const totalPages = Math.ceil(filterUserData?.length / pageSize);
   const startIndex = (currentPage - 1) * pageSize;
   const endIndex = startIndex + pageSize;
   const currentData = filterUserData?.slice(startIndex, endIndex);
 
-  const [searchInput, setSearchInput] = useState<string>('');
-
-  const handleSearch = () => {
+  const handleSearch = (value: string) => {
     const newData = userData?.filter((item) => {
       const nameMatch = item?.userName
         ?.toLowerCase()
-        .includes(searchInput.toLowerCase());
+        .includes(value.toLowerCase());
       return nameMatch;
     });
+    setSearchInput(value);
     setFilterUserData(newData);
-    setCurrentPage(1);
-    setSearchInput('');
+    if (currentPage != 1) setCurrentPage(1);
   };
 
   return (
     <>
       <SearchUser
         value={searchInput}
-        onChange={(value) => setSearchInput(value)}
-        handleSearch={handleSearch}
+        onChange={(value) => handleSearch(value)}
+        // handleSearch={() => null}
       />
       <div className='relative overflow-x-auto shadow-md sm:rounded-md'>
         <table className='w-full text-left text-sm text-gray-500 dark:text-gray-400'>