Fix Bazza UI filter integration issues

Author: codegen-sh[bot]

packages/components/src/remix-hook-form/data-table-router-form.tsx

@@ -74,26 +74,15 @@ export function DataTableRouterForm<TData, TValue>({
     columnsConfig: filterColumnConfigs,
     options: dtfOptions,
     faceted: dtfFacetedData,
-    // initialFilters: urlState.filters, // Assuming an initialFilters prop if available for first load
+    filters: urlState.filters, // Use URL filters as the source of truth
+    onFiltersChange: (newFilters) => {
+      // Update URL state when filters change
+      setUrlState({ filters: newFilters as BazzaFiltersState, page: 0 });
+    },
   });
 
-  // Sync Bazza internal filters TO URL
-  useEffect(() => {
-    // Avoid loop if urlState.filters already matches dtfInternalFilters
-    // Deep comparison might be needed if objects are complex
-    if (JSON.stringify(dtfInternalFilters) !== JSON.stringify(urlState.filters)) {
-      setUrlState({ filters: dtfInternalFilters as BazzaFiltersState, page: 0 });
-    }
-  }, [dtfInternalFilters, urlState.filters, setUrlState]);
-
   // Sync URL filters TO Bazza internal filters (e.g., on back/forward nav)
-  useEffect(() => {
-    // Check if an action to set filters exists, e.g., dtfActions.setFiltersState
-    if (dtfActions.setFiltersState && JSON.stringify(urlState.filters) !== JSON.stringify(dtfInternalFilters)) {
-      dtfActions.setFiltersState(urlState.filters);
-    }
-    // This effect should also handle initial hydration if `initialFilters` prop wasn't used/available
-  }, [urlState.filters, dtfActions, dtfInternalFilters]);
+  // This is now handled by the controlled state pattern with filters and onFiltersChange
 
   // Sync RHF state if urlState changes (e.g., back/forward, external link)
   useEffect(() => {
@@ -167,11 +156,8 @@ export function DataTableRouterForm<TData, TValue>({
   };
 
   const handleResetFiltersAndSearch = () => {
-    if (dtfActions.setFiltersState) {
-      dtfActions.setFiltersState([]); // Reset Bazza UI filters
-    } else if (dtfActions.clearAllFilters) {
-      // Alternative action name
-      dtfActions.clearAllFilters();
+    if (dtfActions.removeAllFilters) {
+      dtfActions.removeAllFilters(); // Use the action from useDataTableFilters
     }
     // Then update URL, which will also clear Bazza filters via the effect if setFiltersState was not called
     setUrlState({

packages/components/src/ui/utils/filters.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+
+// Define the shape of a single filter item
+export const filterItemSchema = z.object({
+  columnId: z.string(),
+  type: z.string(),
+  operator: z.string(),
+  values: z.array(z.unknown()),
+});
+
+// Define the shape of the filters array
+export const filtersArraySchema = z.array(filterItemSchema);
+
+// Export the type for the filters state
+export type FiltersState = z.infer<typeof filtersArraySchema>;
+

packages/components/src/ui/utils/index.ts

@@ -4,3 +4,7 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export * from './debounce';
+export * from './filters';
+export * from './use-filter-sync';

packages/components/src/ui/utils/use-filter-sync.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { BazzaFiltersState } from '../../remix-hook-form/data-table-router-parsers';
+import { dataTableRouterParsers } from '../../remix-hook-form/data-table-router-parsers';
+
+/**
+ * Custom hook for synchronizing filter state with URL parameters
+ * 
+ * This hook provides a clean interface for working with filter state in data table components,
+ * automatically syncing the state with URL search parameters.
+ * 
+ * @returns A tuple containing the current filter state and a function to update it
+ */
+export function useFilterSync(): [BazzaFiltersState, (newFilters: BazzaFiltersState) => void] {
+  const [searchParams, setSearchParams] = useSearchParams();
+  
+  // Parse filters from URL
+  const filtersFromUrl = dataTableRouterParsers.filters.parse(searchParams.get('filters'));
+  
+  // Function to update filters in URL
+  const setFilters = useCallback((newFilters: BazzaFiltersState) => {
+    const newParams = new URLSearchParams(searchParams);
+    
+    // Update or remove the filters parameter
+    if (newFilters.length > 0) {
+      const serialized = dataTableRouterParsers.filters.serialize(newFilters);
+      if (serialized !== null) {
+        newParams.set('filters', serialized);
+      }
+    } else {
+      newParams.delete('filters');
+    }
+    
+    // Update the URL with the new search parameters
+    setSearchParams(newParams, { replace: true });
+  }, [searchParams, setSearchParams]);
+  
+  return [filtersFromUrl, setFilters];
+}
+