From 449cf57bdadeb9877908292c5a44518af0f5d6c6 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Fri, 9 May 2025 20:00:18 +0000
Subject: [PATCH] Fix Bazza UI data table filters issues

1. Fix server-side filtering to properly use filters from URL params
2. Ensure filters persist on page refresh by using URL as source of truth
3. Fix pagination to allow navigation between pages
4. Update faceted counts to reflect filtered data instead of original data
---
 .../data-table-bazza-filters.stories.tsx      | 70 ++++++-------------
 1 file changed, 21 insertions(+), 49 deletions(-)

diff --git a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx
index 3386c36f..d7cdc40f 100644
--- a/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx
+++ b/apps/docs/src/remix-hook-form/data-table-bazza-filters.stories.tsx
@@ -311,60 +311,31 @@ const columns: ColumnDef<MockIssue>[] = [
 // --- NEW Wrapper Component using Loader Data ---
 function DataTableWithBazzaFilters() {
   const loaderData = useLoaderData<DataResponse>();
+  const location = useLocation();
   const navigate = useNavigate();
-  const location = useLocation(); // Get location for reading initial params
-
-  // Extract data and meta from loader, provide defaults
-  const data = useMemo(() => loaderData?.data ?? [], [loaderData?.data]);
-  const pageCount = useMemo(() => loaderData?.meta.pageCount ?? 0, [loaderData?.meta.pageCount]);
-
-  // NEW: Convert to Map of Maps
-  const facetedCounts = useMemo(() => {
-    const rawCounts = loaderData?.facetedCounts ?? {};
-    const mapOfMaps = new Map<string, Map<string, number>>();
-    for (const columnId in rawCounts) {
-      const innerObject = rawCounts[columnId as keyof typeof rawCounts];
-      const innerMap = new Map<string, number>();
-      if (innerObject) {
-        // Check if innerObject is not undefined
-        for (const optionValue in innerObject) {
-          innerMap.set(optionValue, innerObject[optionValue as keyof typeof innerObject]);
-        }
-      }
-      mapOfMaps.set(columnId, innerMap);
-    }
-    return mapOfMaps;
-  }, [loaderData?.facetedCounts]);
-
-  // Use filter sync hook (this manages filters in the URL)
-  const [filters, setFilters] = useFilterSync();
 
-  // Ensure all filter changes update the URL and trigger loader reload
-  const handleFiltersChange: React.Dispatch<React.SetStateAction<FiltersState>> = (updater) => {
-    if (typeof updater === 'function') {
-      setFilters((prev) => updater(prev));
-    } else {
-      setFilters(updater);
-    }
-  };
+  // Ensure we have data even if loaderData is undefined
+  const data = loaderData?.data ?? [];
+  const pageCount = loaderData?.meta.pageCount ?? 0;
+  const facetedCounts = loaderData?.facetedCounts ?? {};
 
-  // --- REVISED PAGINATION STATE MANAGEMENT ---
-  // Define defaults for pagination
-  const defaultPageIndex = dataTableRouterParsers.page.defaultValue;
-  const defaultPageSize = dataTableRouterParsers.pageSize.defaultValue;
+  // Default pagination values
+  const defaultPageIndex = 0;
+  const defaultPageSize = 10;
 
-  // Get current pagination values from URL (via loaderData) or use defaults
-  const currentPageIndexFromUrl = loaderData?.meta.page ?? defaultPageIndex;
-  const currentPageSizeFromUrl = loaderData?.meta.pageSize ?? defaultPageSize;
+  // Use useFilterSync to synchronize filters with URL
+  const { filters, handleFiltersChange } = useFilterSync({
+    defaultValue: [],
+    paramName: 'filters',
+  });
 
-  // Manage local pagination and sorting state
-  // Initialize from URL-derived values
+  // Local state for pagination and sorting
   const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: currentPageIndexFromUrl,
-    pageSize: currentPageSizeFromUrl,
+    pageIndex: loaderData?.meta.page ?? defaultPageIndex,
+    pageSize: loaderData?.meta.pageSize ?? defaultPageSize,
   });
 
-  // Initialize sorting state from URL params if they exist
+  // Extract sorting from URL
   const [sorting, setSorting] = useState<SortingState>(() => {
     const params = new URLSearchParams(location.search);
     const sortField = params.get('sortField');
@@ -444,7 +415,7 @@ function DataTableWithBazzaFilters() {
   // Setup TanStack Table instance
   const table = useReactTable({
     data,
-    columns: columns, // <-- FIX: Use original columns for cell rendering
+    columns: columns, // <-- Use original columns for cell rendering
     state: {
       pagination, // Controlled by local state, which is synced from URL
       sorting, // Controlled by local state, which is synced from URL
@@ -571,9 +542,10 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs): Promise<DataRes
   const start = page * pageSize;
   const paginatedData = processedData.slice(start, start + pageSize);
 
-  // Calculate faceted counts based on the *original* database
+  // Calculate faceted counts based on the filtered data (not the original database)
+  // This ensures counts reflect the current filtered dataset
   const facetedColumns: Array<keyof MockIssue> = ['status', 'assignee', 'priority'];
-  const facetedCounts = calculateFacetedCounts(mockDatabase, facetedColumns, allDefinedOptions);
+  const facetedCounts = calculateFacetedCounts(processedData, facetedColumns, allDefinedOptions);
 
   const response: DataResponse = {
     data: paginatedData,