fix: booking filtering queryParams (#20447)

* fix: bookng-filtering-queryParams

* adding comments

* feedback changes

* fix: typo

* minor-change

* revert Pagination.tsx

* minor-change

* minor-changes

* Update packages/features/data-table/DataTableProvider.tsx

* fix: type-check

* fix: test

---------

Co-authored-by: Eunjae Lee <hey@eunjae.dev>

packages/features/data-table/DataTableProvider.tsx

@@ -37,8 +37,8 @@ export type DataTableContextType = {
 
   pageIndex: number;
   pageSize: number;
-  setPageIndex: (pageIndex: number) => void;
-  setPageSize: (pageSize: number) => void;
+  setPageIndex: (pageIndex: number | null) => void;
+  setPageSize: (pageSize: number | null) => void;
 
   offset: number;
   limit: number;
@@ -110,15 +110,23 @@ export function DataTableProvider({
 
   const clearAll = useCallback(
     (exclude?: string[]) => {
-      setPageIndex(0);
-      setActiveFilters((prev) => prev.filter((filter) => exclude?.includes(filter.f)));
+      setPageIndex(null);
+      setActiveFilters((prev) => {
+        const remainingFilters = prev.filter((filter) => exclude?.includes(filter.f));
+        return remainingFilters.length === 0 ? null : remainingFilters;
+      });
     },
     [setActiveFilters, setPageIndex]
   );
 
+  const setPageIndexWrapper = useCallback(
+    (newPageIndex: number | null) => setPageIndex(newPageIndex || null),
+    [setPageIndex]
+  );
+
   const updateFilter = useCallback(
     (columnId: string, value: FilterValue) => {
-      setPageIndex(0);
+      setPageIndex(null);
       setActiveFilters((prev) => {
         let added = false;
         const newFilters = prev.map((item) => {
@@ -139,16 +147,19 @@ export function DataTableProvider({
 
   const removeFilter = useCallback(
     (columnId: string) => {
-      setPageIndex(0);
-      setActiveFilters((prev) => prev.filter((filter) => filter.f !== columnId));
+      setPageIndex(null);
+      setActiveFilters((prev) => {
+        const remainingFilters = prev.filter((filter) => filter.f !== columnId);
+        return remainingFilters.length === 0 ? null : remainingFilters;
+      });
     },
     [setActiveFilters, setPageIndex]
   );
 
   const setPageSizeAndGoToFirstPage = useCallback(
-    (newPageSize: number) => {
-      setPageSize(newPageSize);
-      setPageIndex(0);
+    (newPageSize: number | null) => {
+      setPageSize(newPageSize === DEFAULT_PAGE_SIZE ? null : newPageSize);
+      setPageIndex(null);
     },
     [setPageSize, setPageIndex]
   );
@@ -197,7 +208,7 @@ export function DataTableProvider({
         setColumnSizing,
         pageIndex,
         pageSize,
-        setPageIndex,
+        setPageIndex: setPageIndexWrapper,
         setPageSize: setPageSizeAndGoToFirstPage,
         limit: pageSize,
         offset: pageIndex * pageSize,

packages/features/data-table/components/DataTablePagination.tsx

@@ -36,10 +36,8 @@ export function DataTablePagination<TData>({
         currentPage={pageIndex + 1}
         pageSize={pageSize}
         totalItems={totalRowCount}
-        onPageChange={(page) => setPageIndex(page - 1)}
         onPageSizeChange={(newSize) => setPageSize(newSize)}
-        onNext={() => setPageIndex(pageIndex + 1)}
-        onPrevious={() => setPageIndex(pageIndex - 1)}
+        onPageChange={(page) => setPageIndex(page - 1)}
       />
     );
   } else {