Fix searchbar bug

ethyca · Dec 1, 2023 · 981d86a · 981d86a
1 parent e0eff6d
commit 981d86a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/clients/admin-ui/src/features/common/table/v2/PaginationBar.tsx b/clients/admin-ui/src/features/common/table/v2/PaginationBar.tsx
@@ -42,8 +42,9 @@ export const useClientSidePagination = <T,>(
 };
 
 export const useServerSidePagination = () => {
+  const defaultPageIndex = 1;
   const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
-  const [pageIndex, setPageIndex] = useState<number>(1);
+  const [pageIndex, setPageIndex] = useState<number>(defaultPageIndex);
   const [totalPages, setTotalPages] = useState<number>();
   const onPreviousPageClick = useCallback(() => {
     setPageIndex((prev) => prev - 1);
@@ -61,6 +62,10 @@ export const useServerSidePagination = () => {
     (pageIndex - 1) * pageSize === 0 ? 1 : (pageIndex - 1) * pageSize;
   const endRange = (pageIndex - 1) * pageSize + pageSize;
 
+  const resetPageIndexToDefault = () => {
+    setPageIndex(defaultPageIndex);
+  };
+
   return {
     onPreviousPageClick,
     isPreviousPageDisabled,
@@ -72,6 +77,7 @@ export const useServerSidePagination = () => {
     startRange,
     endRange,
     pageIndex,
+    resetPageIndexToDefault,
     setTotalPages,
   };
 };

diff --git a/clients/admin-ui/src/features/configure-consent/ConsentMangagementTable.tsx b/clients/admin-ui/src/features/configure-consent/ConsentMangagementTable.tsx
@@ -42,7 +42,6 @@ const emptyVendorReportResponse: Page_SystemSummary_ = {
 export const ConsentManagementTable = () => {
   const { tcf: isTcfEnabled } = useFeatures();
   const { isLoading: isLoadingHealthCheck } = useGetHealthQuery();
-  const [globalFilter, setGlobalFilter] = useState();
 
   const {
     isOpen: isFilterOpen,
@@ -110,9 +109,17 @@ export const ConsentManagementTable = () => {
     startRange,
     endRange,
     pageIndex,
+    resetPageIndexToDefault,
     setTotalPages,
   } = useServerSidePagination();
 
+  const [globalFilter, setGlobalFilter] = useState<string>();
+
+  const updateGlobalFilter = (searchTerm: string) => {
+    resetPageIndexToDefault();
+    setGlobalFilter(searchTerm);
+  };
+
   const {
     isFetching: isReportFetching,
     isLoading: isReportLoading,
@@ -223,7 +230,7 @@ export const ConsentManagementTable = () => {
       <TableActionBar>
         <GlobalFilterV2
           globalFilter={globalFilter}
-          setGlobalFilter={setGlobalFilter}
+          setGlobalFilter={updateGlobalFilter}
           placeholder="Search"
         />
         <ConsentManagementFilterModal