@applica-software-guru/react-admin 1.5.362 → 1.5.363

package/package.json

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

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

@@ -19,147 +19,141 @@ interface ListTabsToolbarProps {
   tabs?: ListTabToolbarConfig[];
 }
 
-function ListTabsToolbar({ tabs = [] }: ListTabsToolbarProps) {
-  const { setFilters, filterValues, displayedFilters } = useListContext();
-  const { setCurrentTabKey } = useListViewContext();
-  const resource = useResourceContext();
-  const theme = useTheme();
-  const [searchParams, setSearchParams] = useSearchParams();
+interface TabFilterState {
+  filterValues: Record<string, any>;
+  displayedFilters: Record<string, any>;
+}
 
-  if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
-    throw new Error('ListTabsToolbar: Each tab must have a unique key.');
-  }
+function useListTabs(tabs: ListTabToolbarConfig[]) {
+  const [searchParams] = useSearchParams();
+  const resource = useResourceContext();
+  const { setCurrentTabKey } = useListViewContext();
+  const { filterValues, displayedFilters, setFilters } = useListContext();
 
-  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 tabGroupKey = `${resourceKey}-tab-group`;
+  const tabFiltersKey = `${resourceKey}-tab-filters`;
 
-  const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex);
-  const [tabFilterStates, setTabFilterStates] = useSessionStorage(tabFiltersKey, {});
-  const initialized = useRef(false);
-
-  const saveCurrentTabFilters = useMemo(
-    () =>
-      _.debounce((tabKey: string, filters: any, displayed: any) => {
-        setTabFilterStates((prev: any) => ({
-          ...prev,
-          [tabKey]: {
-            filterValues: { ...filters },
-            displayedFilters: { ...displayed }
-          }
-        }));
-      }, 500),
-    [setTabFilterStates]
-  );
+  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
 
-  const restoreTabFilters = useCallback(
-    (tabKey: string, tabFilter: Record<string, any>, debounce: boolean) => {
-      const savedState = (tabFilterStates as any)?.[tabKey];
+  const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex) as [number, (v: number) => void];
+  const [tabFilterStates, setTabFilterStates] = useSessionStorage(tabFiltersKey, {}) as [
+    Record<string, TabFilterState>,
+    (v: any) => void
+  ];
 
-      if (savedState) {
-        setFilters(savedState.filterValues, savedState.displayedFilters || {}, debounce);
-      } else {
-        setFilters(tabFilter, {}, debounce);
-      }
-    },
-    [tabFilterStates, setFilters]
-  );
+  const initialized = useRef(false);
+  const switchingTab = useRef(false);
 
-  const buildFilters = useCallback(
-    (index: number, debounce: boolean) => {
-      const newTabKey = tabs[index].key;
+  const handleTabChange = useCallback(
+    (index: number) => {
+      const tab = tabs[index];
+      if (!tab) return;
 
-      setCurrentTabKey?.(newTabKey);
-      restoreTabFilters(newTabKey, tabs[index].filter, debounce);
-    },
-    [tabs, setCurrentTabKey, restoreTabFilters]
-  );
+      setCurrentTab(index);
+      setCurrentTabKey?.(tab.key);
 
-  const updateUrlParam = useCallback(
-    (index: number) => {
-      const newParams = new URLSearchParams(searchParams.toString());
-      newParams.set(tabGroupKey, String(index));
-      setSearchParams(newParams, { replace: true });
-    },
-    [searchParams, setSearchParams, tabGroupKey]
-  );
+      const savedState = tabFilterStates?.[tab.key];
+      const nextFilters = savedState?.filterValues ?? tab.filter;
+      const nextDisplayed = savedState?.displayedFilters ?? {};
 
-  const handleChange = useCallback(
-    (_: any, newIndex: number) => {
-      setCurrentTab(newIndex);
-      buildFilters(newIndex, true);
+      if (!_.isEqual(nextFilters, filterValues) || !_.isEqual(nextDisplayed, displayedFilters)) {
+        switchingTab.current = true;
+        setFilters(nextFilters, nextDisplayed);
+      }
     },
-    [buildFilters, setCurrentTab]
+    [tabs, tabFilterStates, filterValues, displayedFilters, setCurrentTab, setCurrentTabKey, setFilters]
   );
 
   useEffect(() => {
-    if (initialized.current && tabs.length > 0) {
-      const currentTabKey = tabs[Number(currentTab)]?.key;
-      if (currentTabKey) {
-        saveCurrentTabFilters(currentTabKey, filterValues, displayedFilters);
-      }
-    }
-  }, [filterValues, displayedFilters, currentTab, tabs, saveCurrentTabFilters]);
+    if (initialized.current) return;
+    initialized.current = true;
 
-  useEffect(() => {
     const param = searchParams.get(tabGroupKey);
-    if (param !== String(currentTab)) {
-      updateUrlParam(Number(currentTab));
+    const initialIndex = param != null ? Number(param) : Number(currentTab);
+    const hasUrlFilter = searchParams.get('filter') !== null;
+
+    if (hasUrlFilter) {
+      setCurrentTab(initialIndex);
+      setCurrentTabKey?.(tabs[initialIndex]?.key);
+    } else {
+      handleTabChange(initialIndex);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterValues]);
+  }, [searchParams, tabGroupKey, currentTab, setCurrentTab, setCurrentTabKey, handleTabChange, tabs]);
 
   useEffect(() => {
-    if (!initialized.current) {
-      const param = searchParams.get(tabGroupKey);
-      const initialIndex = param != null ? Number(param) : Number(currentTab);
+    if (!initialized.current || switchingTab.current) {
+      switchingTab.current = false;
+      return;
+    }
+
+    const currentTabKey = tabs[Number(currentTab)]?.key;
+    if (!currentTabKey) return;
 
-      if (param != null && initialIndex !== Number(currentTab)) {
-        setCurrentTab(initialIndex);
+    setTabFilterStates((prev: Record<string, TabFilterState>) => {
+      const prevState = prev?.[currentTabKey];
+      if (
+        _.isEqual(prevState?.filterValues, filterValues) &&
+        _.isEqual(prevState?.displayedFilters, displayedFilters)
+      ) {
+        return prev;
       }
+      return {
+        ...prev,
+        [currentTabKey]: { filterValues, displayedFilters }
+      };
+    });
+  }, [filterValues, displayedFilters, currentTab, tabs, setTabFilterStates]);
+
+  return {
+    currentTab,
+    handleTabChange: (_: any, val: number) => handleTabChange(val)
+  };
+}
 
-      buildFilters(initialIndex, false);
-      initialized.current = true;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+function ListTabsToolbar({ tabs = [] }: ListTabsToolbarProps) {
+  const theme = useTheme();
+  const { currentTab, handleTabChange } = useListTabs(tabs);
+
+  if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
+    throw new Error('ListTabsToolbar: Each tab must have a unique key.');
+  }
+
+  if (tabs.length === 0) return null;
 
   return (
     <Box sx={{ width: '100%' }}>
-      {tabs.length > 0 ? (
-        <Tabs
-          value={Number(currentTab)}
-          onChange={handleChange}
-          allowScrollButtonsMobile
-          variant="scrollable"
-          scrollButtons="auto"
-          sx={{
-            width: '100%',
-            '.MuiTabs-scrollButtons.Mui-disabled': {
-              opacity: 0.2
-            }
-          }}
-        >
-          {tabs.map((tab) => (
-            <Tab
-              icon={tab.icon}
-              key={tab.key}
-              label={tab.label}
-              sx={{
-                flex: '0 0 auto',
-                lineHeight: 1,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                '& .MuiTab-iconWrapper': {
-                  marginRight: theme.spacing(0.5)
-                }
-              }}
-            />
-          ))}
-        </Tabs>
-      ) : null}
+      <Tabs
+        value={Number(currentTab)}
+        onChange={handleTabChange}
+        allowScrollButtonsMobile
+        variant="scrollable"
+        scrollButtons="auto"
+        sx={{
+          width: '100%',
+          '.MuiTabs-scrollButtons.Mui-disabled': {
+            opacity: 0.2
+          }
+        }}
+      >
+        {tabs.map((tab) => (
+          <Tab
+            icon={tab.icon}
+            key={tab.key}
+            label={tab.label}
+            sx={{
+              flex: '0 0 auto',
+              lineHeight: 1,
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              '& .MuiTab-iconWrapper': {
+                marginRight: theme.spacing(0.5)
+              }
+            }}
+          />
+        ))}
+      </Tabs>
     </Box>
   );
 }