Merge pull request #5411 from marmelab/sppedup-show-hide-filter

Speed up show & hide filter

Author: djhi

packages/ra-core/src/controller/useListController.ts

@@ -73,7 +73,11 @@ export interface ListControllerProps<RecordType extends Record = Record> {
     perPage: number;
     resource: string;
     selectedIds: Identifier[];
-    setFilters: (filters: any, displayedFilters: any) => void;
+    setFilters: (
+        filters: any,
+        displayedFilters: any,
+        debounce?: boolean
+    ) => void;
     setPage: (page: number) => void;
     setPerPage: (page: number) => void;
     setSort: (sort: string, order?: string) => void;

packages/ra-core/src/controller/useListParams.ts

@@ -197,52 +197,63 @@ const useListParams = ({
     );
     const displayedFilterValues = query.displayedFilters || emptyObject;
 
-    const debouncedSetFilters = lodashDebounce(
-        (newFilters, newDisplayedFilters) => {
-            let payload = {
-                filter: removeEmpty(newFilters),
-                displayedFilters: undefined,
-            };
-            if (newDisplayedFilters) {
-                payload.displayedFilters = Object.keys(
-                    newDisplayedFilters
-                ).reduce((filters, filter) => {
-                    return newDisplayedFilters[filter]
-                        ? { ...filters, [filter]: true }
-                        : filters;
-                }, {});
-            }
-            changeParams({
-                type: SET_FILTER,
-                payload,
-            });
-        },
-        debounce
-    );
+    const debouncedSetFilters = lodashDebounce((filter, displayedFilters) => {
+        changeParams({
+            type: SET_FILTER,
+            payload: {
+                filter: removeEmpty(filter),
+                displayedFilters,
+            },
+        });
+    }, debounce);
 
     const setFilters = useCallback(
-        (filters, displayedFilters) =>
-            debouncedSetFilters(filters, displayedFilters),
+        (filter, displayedFilters, debounce = true) =>
+            debounce
+                ? debouncedSetFilters(filter, displayedFilters)
+                : changeParams({
+                      type: SET_FILTER,
+                      payload: {
+                          filter: removeEmpty(filter),
+                          displayedFilters,
+                      },
+                  }),
         requestSignature // eslint-disable-line react-hooks/exhaustive-deps
     );
 
     const hideFilter = useCallback((filterName: string) => {
-        const newFilters = removeKey(filterValues, filterName);
-        const newDisplayedFilters = {
-            ...displayedFilterValues,
-            [filterName]: undefined,
-        };
-
-        setFilters(newFilters, newDisplayedFilters);
+        // we don't use lodash.set() for displayed filters
+        // to avoid problems with compound filter names (e.g. 'author.name')
+        const displayedFilters = Object.keys(displayedFilterValues).reduce(
+            (filters, filter) => {
+                return filter !== filterName
+                    ? { ...filters, [filter]: true }
+                    : filters;
+            },
+            {}
+        );
+        const filter = removeEmpty(removeKey(filterValues, filterName));
+        changeParams({
+            type: SET_FILTER,
+            payload: { filter, displayedFilters },
+        });
     }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
 
     const showFilter = useCallback((filterName: string, defaultValue: any) => {
-        const newFilters = set(filterValues, filterName, defaultValue);
-        const newDisplayedFilters = {
+        // we don't use lodash.set() for displayed filters
+        // to avoid problems with compound filter names (e.g. 'author.name')
+        const displayedFilters = {
             ...displayedFilterValues,
             [filterName]: true,
         };
-        setFilters(newFilters, newDisplayedFilters);
+        const filter = set(filterValues, filterName, defaultValue);
+        changeParams({
+            type: SET_FILTER,
+            payload: {
+                filter,
+                displayedFilters,
+            },
+        });
     }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
 
     return [

packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx

@@ -153,14 +153,20 @@ const FilterListItem: FC<{ label: string; value: any }> = props => {
     );
 
     const addFilter = () => {
-        setFilters({ ...filterValues, ...value }, null);
+        setFilters({ ...filterValues, ...value }, null, false);
     };
+
     const removeFilter = () => {
-        const inverseValue = Object.keys(value).reduce((acc, key) => {
-            acc[key] = undefined;
-            return acc;
-        }, {} as any);
-        setFilters({ ...filterValues, ...inverseValue }, null);
+        const keysToRemove = Object.keys(value);
+        const filters = Object.keys(filterValues).reduce(
+            (acc, key) =>
+                keysToRemove.includes(key)
+                    ? acc
+                    : { ...acc, [key]: filterValues[key] },
+            {}
+        );
+
+        setFilters(filters, null, false);
     };
 
     const toggleFilter = () => (isSelected ? removeFilter() : addFilter());