@applica-software-guru/react-admin 1.5.357 → 1.5.358

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.357"
+  "version": "1.5.358"
 }

package/src/components/ra-lists/ListTabsToolbar.tsx

@@ -5,6 +5,7 @@ import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useListViewContext } from './ListViewProvider';
 import { useSessionStorage } from '@/hooks';
 import { useSearchParams } from 'react-router-dom';
+import _ from 'lodash';
 
 type ListTabToolbarConfig = {
   label: string;
@@ -18,40 +19,38 @@ interface ListTabsToolbarProps {
   tabs?: ListTabToolbarConfig[];
 }
 
-function ListTabsToolbar(props: ListTabsToolbarProps) {
-  const { tabs = [] } = props;
+function ListTabsToolbar({ tabs = [] }: ListTabsToolbarProps) {
   const { setFilters, filterValues, displayedFilters } = useListContext();
-  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
   const { setCurrentTabKey } = useListViewContext();
   const resource = useResourceContext();
   const theme = useTheme();
-
   const [searchParams, setSearchParams] = useSearchParams();
 
   if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
     throw new Error('ListTabsToolbar: Each tab must have a unique key.');
   }
 
-  const tabGroupKey = useMemo(() => `${resource.replace(/^entities\//, '')}-tab-group`, [resource]);
-  const tabFiltersKey = useMemo(() => `${resource.replace(/^entities\//, '')}-tab-filters`, [resource]);
+  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
+  const resourceKey = useMemo(() => resource.replace(/^entities\//, ''), [resource]);
+  const tabGroupKey = useMemo(() => `${resourceKey}-tab-group`, [resourceKey]);
+  const tabFiltersKey = useMemo(() => `${resourceKey}-tab-filters`, [resourceKey]);
 
   const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex);
   const [tabFilterStates, setTabFilterStates] = useSessionStorage(tabFiltersKey, {});
   const initialized = useRef(false);
 
-  const saveCurrentTabFilters = useCallback(
-    (tabKey: string) => {
-      const currentState = {
-        filterValues: { ...filterValues },
-        displayedFilters: { ...displayedFilters }
-      };
-
-      setTabFilterStates((prev: any) => ({
-        ...prev,
-        [tabKey]: currentState
-      }));
-    },
-    [filterValues, displayedFilters, setTabFilterStates]
+  const saveCurrentTabFilters = useMemo(
+    () =>
+      _.debounce((tabKey: string, filters: any, displayed: any) => {
+        setTabFilterStates((prev: any) => ({
+          ...prev,
+          [tabKey]: {
+            filterValues: { ...filters },
+            displayedFilters: { ...displayed }
+          }
+        }));
+      }, 500),
+    [setTabFilterStates]
   );
 
   const restoreTabFilters = useCallback(
@@ -61,31 +60,20 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
       if (savedState) {
         setFilters(savedState.filterValues, savedState.displayedFilters || {}, debounce);
       } else {
-        const defaultFilters = {
-          ...tabFilter
-        };
-        setFilters(defaultFilters, {}, debounce);
+        setFilters(tabFilter, {}, debounce);
       }
     },
     [tabFilterStates, setFilters]
   );
 
   const buildFilters = useCallback(
-    (index: number, debounce: boolean, saveCurrentFilters: boolean = true) => {
-      const currentTabKey = tabs[Number(currentTab)]?.key;
+    (index: number, debounce: boolean) => {
       const newTabKey = tabs[index].key;
 
-      if (saveCurrentFilters && currentTabKey && currentTabKey !== newTabKey) {
-        saveCurrentTabFilters(currentTabKey);
-      }
-
-      if (setCurrentTabKey) {
-        setCurrentTabKey(newTabKey);
-      }
-
+      setCurrentTabKey?.(newTabKey);
       restoreTabFilters(newTabKey, tabs[index].filter, debounce);
     },
-    [tabs, currentTab, saveCurrentTabFilters, setCurrentTabKey, restoreTabFilters]
+    [tabs, setCurrentTabKey, restoreTabFilters]
   );
 
   const updateUrlParam = useCallback(
@@ -97,9 +85,26 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
     [searchParams, setSearchParams, tabGroupKey]
   );
 
+  const handleChange = useCallback(
+    (_: any, newIndex: number) => {
+      setCurrentTab(newIndex);
+      buildFilters(newIndex, true);
+    },
+    [buildFilters, setCurrentTab]
+  );
+
+  useEffect(() => {
+    if (initialized.current && tabs.length > 0) {
+      const currentTabKey = tabs[Number(currentTab)]?.key;
+      if (currentTabKey) {
+        saveCurrentTabFilters(currentTabKey, filterValues, displayedFilters);
+      }
+    }
+  }, [filterValues, displayedFilters, currentTab, tabs, saveCurrentTabFilters]);
+
   useEffect(() => {
     const param = searchParams.get(tabGroupKey);
-    if (String(param) !== String(currentTab)) {
+    if (param !== String(currentTab)) {
       updateUrlParam(Number(currentTab));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -110,23 +115,15 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
       const param = searchParams.get(tabGroupKey);
       const initialIndex = param != null ? Number(param) : Number(currentTab);
 
-      if (param != null && String(initialIndex) !== String(currentTab)) {
+      if (param != null && initialIndex !== Number(currentTab)) {
         setCurrentTab(initialIndex);
       }
 
-      buildFilters(initialIndex, false, false);
+      buildFilters(initialIndex, false);
       initialized.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams, setSearchParams, tabGroupKey, currentTab, setCurrentTab, buildFilters]);
-
-  const handleChange = useCallback(
-    (_: any, newIndex: number) => {
-      setCurrentTab(newIndex);
-      buildFilters(newIndex, true, true);
-    },
-    [buildFilters, setCurrentTab]
-  );
+  }, []);
 
   return (
     <Box sx={{ width: '100%' }}>