fix: use watched URL filters to update table filters

refinedev · Nov 24, 2024 · 2810644 · 2810644
1 parent 5e9197b
commit 2810644
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 15 deletions.
diff --git a/packages/core/src/definitions/table/index.ts b/packages/core/src/definitions/table/index.ts
@@ -186,3 +186,39 @@ export const getDefaultFilter = (
 
   return undefined;
 };
+
+export const mergeFilters = (
+  currentUrlFilters: CrudFilter[],
+  currentFilters: CrudFilter[],
+): CrudFilter[] => {
+  const mergedFilters = currentFilters.map((tableFilter) => {
+    const matchingURLFilter = currentUrlFilters.find(
+      (urlFilter) =>
+        "field" in tableFilter &&
+        "field" in urlFilter &&
+        tableFilter.field === urlFilter.field &&
+        tableFilter.operator === urlFilter.operator,
+    );
+
+    // override current filter wih url filter
+    if (matchingURLFilter) {
+      return { ...tableFilter, ...matchingURLFilter };
+    }
+
+    return tableFilter;
+  });
+
+  // add any other URL filters not in the current filters
+  const additionalURLFilters = currentUrlFilters.filter(
+    (urlFilter) =>
+      !currentFilters.some(
+        (tableFilter) =>
+          "field" in tableFilter &&
+          "field" in urlFilter &&
+          tableFilter.field === urlFilter.field &&
+          tableFilter.operator === urlFilter.operator,
+      ),
+  );
+
+  return [...mergedFilters, ...additionalURLFilters];
+};
diff --git a/packages/core/src/hooks/useTable/index.ts b/packages/core/src/hooks/useTable/index.ts
@@ -11,6 +11,7 @@ import warnOnce from "warn-once";
 
 import { pickNotDeprecated } from "@definitions/helpers";
 import {
+  mergeFilters,
   parseTableParams,
   setInitialFilters,
   setInitialSorters,
@@ -439,27 +440,32 @@ export function useTable<
     return `${pathname ?? ""}?${stringifyParams ?? ""}`;
   };
 
+  // watch URL filters to update internal filters
   useEffect(() => {
-    if (!parsedParams?.params?.filters && !parsedParams?.params?.sorters) {
-      const resetFilters = setInitialFilters(
+    if (syncWithLocation) {
+      const currentFilters = filters;
+      const currentUrlFilters = parsedParams?.params?.filters;
+      const initialFilters = setInitialFilters(
         preferredPermanentFilters,
         defaultFilter ?? [],
       );
-      const resetSorters = setInitialSorters(
-        preferredPermanentSorters,
-        defaultSorter ?? [],
-      );
 
-      setFilters(resetFilters);
-      setSorters(resetSorters);
+      let newFilters: CrudFilter[] = [];
+      const urlsAreEqual = isEqual(currentUrlFilters, currentFilters);
+
+      if (!urlsAreEqual) {
+        // fallback to initial filters
+        if (!currentUrlFilters || currentUrlFilters.length === 0) {
+          newFilters = initialFilters;
+        } else {
+          // since they aren't equal, merge the two
+          newFilters = mergeFilters(currentUrlFilters, currentFilters);
+        }
+
+        setFilters(newFilters);
+      }
     }
-  }, [
-    parsedParams,
-    preferredPermanentFilters,
-    defaultFilter,
-    preferredPermanentSorters,
-    defaultSorter,
-  ]);
+  }, [parsedParams, filters, preferredPermanentFilters]);
 
   useEffect(() => {
     if (search === "") {