Implementing new approach for saving table filter preferences

src/common/hooks/useDataTablePreference.ts

@@ -14,7 +14,7 @@ import { TableFiltersPreference } from './useReactSettings';
 import { dataTableFiltersAtom } from './useStoreSessionTableFilters';
 
 interface Params {
-  tableKey: string;
+  tableKey: string | undefined;
 }
 export function useDataTablePreference(params: Params) {
   const user = useUserChanges();
@@ -24,6 +24,10 @@ export function useDataTablePreference(params: Params) {
   const storeSessionTableFilters = useAtomValue(dataTableFiltersAtom);
 
   return (filterKey: keyof TableFiltersPreference) => {
+    if (!tableKey) {
+      return '';
+    }
+
     if (filterKey === 'filter' || filterKey === 'currentPage') {
       return storeSessionTableFilters?.[tableKey]?.[filterKey]
         ? storeSessionTableFilters[tableKey][filterKey]

src/common/hooks/useDataTablePreferences.ts

@@ -27,7 +27,7 @@ import { useStoreSessionTableFilters } from './useStoreSessionTableFilters';
 interface Params {
   apiEndpoint: URL;
   customFilters?: SelectOption[];
-  tableKey: string;
+  tableKey: string | undefined;
   isInitialConfiguration: boolean;
   customFilter: string[] | undefined;
   setFilter: Dispatch<SetStateAction<string>>;
@@ -38,6 +38,7 @@ interface Params {
   setStatus: Dispatch<SetStateAction<string[]>>;
   setPerPage: Dispatch<SetStateAction<PerPage>>;
   withoutStoringPerPage: boolean;
+  enableSavingFilterPreference?: boolean;
 }
 
 export function useDataTablePreferences(params: Params) {
@@ -58,6 +59,7 @@ export function useDataTablePreferences(params: Params) {
     setStatus,
     setPerPage,
     withoutStoringPerPage,
+    enableSavingFilterPreference,
   } = params;
 
   const getPreference = useDataTablePreference({ tableKey });
@@ -85,7 +87,7 @@ export function useDataTablePreferences(params: Params) {
     status: string[],
     perPage: PerPage
   ) => {
-    if (!customFilter) {
+    if (!customFilter || !tableKey || !enableSavingFilterPreference) {
       return;
     }
 
@@ -124,6 +126,16 @@ export function useDataTablePreferences(params: Params) {
     const updatedUser = cloneDeep(user) as User;
 
     if (updatedUser) {
+      // This is a temporary solution for creating the table_filters object. It can be removed after some time.
+      const tableFilters =
+        updatedUser.company_user?.react_settings.table_filters || {};
+
+      Object.keys(tableFilters).forEach((key) => {
+        if (key.includes('/')) {
+          delete tableFilters[key];
+        }
+      });
+
       set(
         updatedUser,
         `company_user.react_settings.table_filters.${tableKey}`,

src/common/hooks/useDataTableUtilities.ts

@@ -16,7 +16,7 @@ import collect from 'collect.js';
 interface Params {
   apiEndpoint: URL;
   isInitialConfiguration: boolean;
-  tableKey: string;
+  tableKey: string | undefined;
   customFilters?: SelectOption[];
   customFilter?: string[] | undefined;
 }

src/common/hooks/useStoreSessionTableFilters.ts

@@ -21,14 +21,18 @@ export const dataTableFiltersAtom = atomWithStorage<SessionDataTableFilters>(
 );
 
 interface Params {
-  tableKey: string;
+  tableKey: string | undefined;
 }
 export function useStoreSessionTableFilters(params: Params) {
   const { tableKey } = params;
 
   const setDataTableFilters = useSetAtom(dataTableFiltersAtom);
 
   return (filter: string, currentPage: number) => {
+    if (!tableKey) {
+      return;
+    }
+
     setDataTableFilters((current) => ({
       ...current,
       [tableKey]: {

src/components/DataTable.tsx

@@ -52,7 +52,6 @@ import { Guard } from '$app/common/guards/Guard';
 import { EntityState } from '$app/common/enums/entity-state';
 import { GenericSingleResourceResponse } from '$app/common/interfaces/generic-api-response';
 import { refetchByUrl } from '$app/common/hooks/useRefetch';
-import { useLocation } from 'react-router-dom';
 import { useDataTableOptions } from '$app/common/hooks/useDataTableOptions';
 import { useDataTableUtilities } from '$app/common/hooks/useDataTableUtilities';
 import { useDataTablePreferences } from '$app/common/hooks/useDataTablePreferences';
@@ -152,6 +151,7 @@ interface Props<T> extends CommonProps {
   withoutPerPageAsPreference?: boolean;
   withoutSortQueryParameter?: boolean;
   showRestoreBulk?: (selectedResources: T[]) => boolean;
+  enableSavingFilterPreference?: boolean;
 }
 
 export type ResourceAction<T> = (resource: T) => ReactElement;
@@ -160,7 +160,6 @@ export type PerPage = '10' | '50' | '100';
 
 export function DataTable<T extends object>(props: Props<T>) {
   const [t] = useTranslation();
-  const location = useLocation();
   const options = useDataTableOptions();
 
   const reactSettings = useReactSettings();
@@ -174,8 +173,6 @@ export function DataTable<T extends object>(props: Props<T>) {
     new URL(endpoint(props.endpoint))
   );
 
-  const tableKey = `${location.pathname}${props.endpoint.replace('.', '')}`;
-
   const setInvalidationQueryAtom = useSetAtom(invalidationQueryAtom);
 
   const {
@@ -193,6 +190,7 @@ export function DataTable<T extends object>(props: Props<T>) {
     withoutPerPageAsPreference = false,
     withoutSortQueryParameter = false,
     showRestoreBulk,
+    enableSavingFilterPreference = false,
   } = props;
 
   const companyUpdateTimeOut = useRef<NodeJS.Timeout | undefined>(undefined);
@@ -232,9 +230,10 @@ export function DataTable<T extends object>(props: Props<T>) {
     setSort,
     setSortedBy,
     setStatus,
-    tableKey,
+    tableKey: `${props.resource}s`,
     customFilters,
     withoutStoringPerPage: withoutPerPageAsPreference,
+    enableSavingFilterPreference,
   });
 
   const {
@@ -244,7 +243,7 @@ export function DataTable<T extends object>(props: Props<T>) {
   } = useDataTableUtilities({
     apiEndpoint,
     isInitialConfiguration,
-    tableKey,
+    tableKey: `${props.resource}s`,
     customFilter,
     customFilters,
   });

src/pages/invoices/index/Invoices.tsx

@@ -151,6 +151,7 @@ export default function Invoices() {
           setInvoiceSliderVisibility(true);
         }}
         dateRangeColumns={dateRangeColumns}
+        enableSavingFilterPreference
       />
 
       {!disableNavigation('invoice', invoiceSlider) && <InvoiceSlider />}