[Cleanup] Implementing New Approach For Saving Table Filters

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) {
+      // @Todo: 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/clients/index/Clients.tsx

@@ -52,11 +52,7 @@ export default function Clients() {
   } = useChangeTemplate();
 
   return (
-    <Default
-      breadcrumbs={pages}
-      title={t('clients')}
-      docsLink="en/clients"
-    >
+    <Default breadcrumbs={pages} title={t('clients')} docsLink="en/clients">
       <DataTable
         resource="client"
         endpoint="/api/v1/clients?include=group_settings&sort=id|desc"
@@ -86,6 +82,7 @@ export default function Clients() {
         }
         linkToCreateGuards={[permission('create_client')]}
         hideEditableOptions={!hasPermission('edit_client')}
+        enableSavingFilterPreference
       />
 
       <ChangeTemplateModal<Client>

src/pages/credits/index/Credits.tsx

@@ -85,6 +85,7 @@ export default function Credits() {
         dateRangeColumns={dateRangeColumns}
         linkToCreateGuards={[permission('create_credit')]}
         hideEditableOptions={!hasPermission('edit_credit')}
+        enableSavingFilterPreference
       />
 
       <ChangeTemplateModal<Credit>

src/pages/expenses/index/Expenses.tsx

@@ -77,6 +77,7 @@ export default function Expenses() {
         }
         linkToCreateGuards={[permission('create_expense')]}
         hideEditableOptions={!hasPermission('edit_expense')}
+        enableSavingFilterPreference
       />
     </Default>
   );

src/pages/invoices/index/Invoices.tsx

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

src/pages/payments/index/Payments.tsx

@@ -124,6 +124,7 @@ export default function Payments() {
             (payment) => getEntityState(payment) === EntityState.Archived
           )
         }
+        enableSavingFilterPreference
       />
 
       {!disableNavigation('payment', paymentSlider) && <PaymentSlider />}

src/pages/products/index/Products.tsx

@@ -74,6 +74,7 @@ export default function Products() {
         }
         linkToCreateGuards={[permission('create_product')]}
         hideEditableOptions={!hasPermission('edit_product')}
+        enableSavingFilterPreference
       />
     </Default>
   );

src/pages/projects/index/Projects.tsx

@@ -71,6 +71,7 @@ export default function Projects() {
         }
         linkToCreateGuards={[permission('create_project')]}
         hideEditableOptions={!hasPermission('edit_project')}
+        enableSavingFilterPreference
       />
 
       <ChangeTemplateModal<Project>

src/pages/purchase-orders/index/PurchaseOrders.tsx

@@ -79,6 +79,7 @@ export default function PurchaseOrders() {
         dateRangeColumns={dateRangeColumns}
         linkToCreateGuards={[permission('create_purchase_order')]}
         hideEditableOptions={!hasPermission('edit_purchase_order')}
+        enableSavingFilterPreference
       />
 
       <ChangeTemplateModal<PurchaseOrder>

src/pages/quotes/index/Quotes.tsx

@@ -143,6 +143,7 @@ export default function Quotes() {
         dateRangeColumns={dateRangeColumns}
         linkToCreateGuards={[permission('create_quote')]}
         hideEditableOptions={!hasPermission('edit_quote')}
+        enableSavingFilterPreference
       />
 
       {!disableNavigation('quote', quoteSlider) && <QuoteSlider />}

src/pages/recurring-expenses/index/RecurringExpenses.tsx

@@ -66,6 +66,7 @@ export default function RecurringExpenses() {
         }
         linkToCreateGuards={[permission('create_recurring_expense')]}
         hideEditableOptions={!hasPermission('edit_recurring_expense')}
+        enableSavingFilterPreference
       />
     </Default>
   );

src/pages/recurring-invoices/index/RecurringInvoices.tsx

@@ -151,6 +151,7 @@ export default function RecurringInvoices() {
           );
           setRecurringInvoiceSliderVisibility(true);
         }}
+        enableSavingFilterPreference
       />
 
       {!disableNavigation('recurring_invoice', recurringInvoiceSlider) && (

src/pages/settings/bank-accounts/components/transaction-rules/TransactionRules.tsx

@@ -44,6 +44,7 @@ export function TransactionRules() {
         linkToCreate="/settings/bank_accounts/transaction_rules/create"
         linkToEdit="/settings/bank_accounts/transaction_rules/:id/edit"
         withResourcefulActions
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/bank-accounts/index/BankAccounts.tsx

@@ -98,6 +98,7 @@ export function BankAccounts() {
             )}
           </div>
         }
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/expense-categories/ExpenseCategories.tsx

@@ -49,6 +49,7 @@ export function ExpenseCategories() {
       linkToCreate="/settings/expense_categories/create"
       linkToEdit="/settings/expense_categories/:id/edit"
       withResourcefulActions
+      enableSavingFilterPreference
     />
   );
 }

src/pages/settings/group-settings/index/GroupSettings.tsx

@@ -62,6 +62,7 @@ export function GroupSettings() {
         linkToEdit="/settings/group_settings/:id/edit"
         customActions={actions}
         withResourcefulActions
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/integrations/api-tokens/ApiTokens.tsx

@@ -65,6 +65,7 @@ export function ApiTokens() {
         linkToCreate="/settings/integrations/api_tokens/create"
         linkToEdit="/settings/integrations/api_tokens/:id/edit"
         withResourcefulActions
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/integrations/api-webhooks/ApiWebhooks.tsx

@@ -35,6 +35,7 @@ export function ApiWebhooks() {
         linkToCreate="/settings/integrations/api_webhooks/create"
         linkToEdit="/settings/integrations/api_webhooks/:id/edit"
         withResourcefulActions
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/invoice-design/pages/custom-designs/index/CustomDesigns.tsx

@@ -40,6 +40,7 @@ export default function CustomDesigns() {
         linkToEdit="/settings/invoice_design/custom_designs/:id/edit"
         withResourcefulActions
         hideEditableOptions={!proPlan() && !enterprisePlan()}
+        enableSavingFilterPreference
       />
     </>
   );

src/pages/settings/payment-terms/PaymentTerms.tsx

@@ -52,6 +52,7 @@ export function PaymentTerms() {
         linkToCreate="/settings/payment_terms/create"
         linkToEdit="/settings/payment_terms/:id/edit"
         withResourcefulActions
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/schedules/index/Schedules.tsx

@@ -40,6 +40,7 @@ export function Schedules() {
         linkToCreate="/settings/schedules/create"
         linkToEdit="/settings/schedules/:id/edit"
         withResourcefulActions
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/subscriptions/index/Subscriptions.tsx

@@ -40,6 +40,7 @@ export function Subscriptions() {
         linkToCreate="/settings/subscriptions/create"
         linkToEdit="/settings/subscriptions/:id/edit"
         withResourcefulActions
+        enableSavingFilterPreference
       />
     </Settings>
   );

src/pages/settings/task-statuses/TaskStatuses.tsx

@@ -52,6 +52,7 @@ export function TaskStatuses() {
       linkToCreate="/settings/task_statuses/create"
       linkToEdit="/settings/task_statuses/:id/edit"
       withResourcefulActions
+      enableSavingFilterPreference
     />
   );
 }

src/pages/settings/tax-rates/TaxRates.tsx

@@ -41,6 +41,7 @@ export function TaxRates() {
       linkToEdit="/settings/tax_rates/:id/edit"
       withResourcefulActions
       onBulkActionSuccess={(_, action) => onBulkActionsSuccess(action)}
+      enableSavingFilterPreference
     />
   );
 }

src/pages/settings/users/index/Users.tsx

@@ -75,6 +75,7 @@ export function Users() {
             setAction(action);
             setIsPasswordConfirmModalOpen(true);
           }}
+          enableSavingFilterPreference
         />
       </Settings>
 

src/pages/tasks/index/Tasks.tsx

@@ -135,6 +135,7 @@ export default function Tasks() {
           setSliderTaskId(quote.id);
           setTaskSliderVisibility(true);
         }}
+        enableSavingFilterPreference
       />
 
       {!disableNavigation('task', taskSlider) && <TaskSlider />}

src/pages/transactions/index/Transactions.tsx

@@ -105,6 +105,7 @@ export default function Transactions() {
           withResourcefulActions
           linkToCreateGuards={[permission('create_bank_transaction')]}
           hideEditableOptions={!hasPermission('edit_bank_transaction')}
+          enableSavingFilterPreference
         />
       </Default>
     </>

src/pages/vendors/index/Vendors.tsx

@@ -71,6 +71,7 @@ export default function Vendors() {
         }
         linkToCreateGuards={[permission('create_vendor')]}
         hideEditableOptions={!hasPermission('edit_vendor')}
+        enableSavingFilterPreference
       />
     </Default>
   );