feat: datatables pagination.

client/src/store/expenses/expenses.reducer.js

@@ -1,5 +1,8 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { createTableQueryReducers } from 'store/queryReducers';
+import {
+  viewPaginationSetReducer,
+  createTableQueryReducers,
+} from 'store/journalNumber.reducer';
 
 import t from 'store/types';
 
@@ -7,6 +10,7 @@ const initialState = {
   items: {},
   views: {},
   loading: false,
+  // 
   tableQuery: {
     page_size: 12,
     page: 1,
@@ -18,7 +22,7 @@ const defaultExpense = {
   categories: [],
 };
 
-const reducer = createReducer(initialState, {
+export default createReducer(initialState, {
   [t.EXPENSE_SET]: (state, action) => {
     const { id, expense } = action.payload;
     const oldExpense = state.items[id] || {};
@@ -66,29 +70,6 @@ const reducer = createReducer(initialState, {
     };
   },
 
-  [t.EXPENSES_PAGINATION_SET]: (state, action) => {
-    const { pagination, customViewId } = action.payload;
-
-    const mapped = {
-      pageSize: parseInt(pagination.pageSize, 10),
-      page: parseInt(pagination.page, 10),
-      total: parseInt(pagination.total, 10),
-    };
-    const paginationMeta = {
-      ...mapped,
-      pagesCount: Math.ceil(mapped.total / mapped.pageSize),
-      pageIndex: Math.max(mapped.page - 1, 0),
-    };
-
-    state.views = {
-      ...state.views,
-      [customViewId]: {
-        ...(state.views?.[customViewId] || {}),
-        paginationMeta,
-      },
-    };
-  },
-
   [t.EXPENSES_TABLE_LOADING]: (state, action) => {
     const { loading } = action.payload;
     state.loading = loading;
@@ -117,9 +98,10 @@ const reducer = createReducer(initialState, {
     });
     state.items = items;
   },
-});
 
-export default createTableQueryReducers('expenses', reducer);
+  ...viewPaginationSetReducer(t.EXPENSES_PAGINATION_SET),
+  ...createTableQueryReducers('EXPENSES'),
+});
 
 export const getExpenseById = (state, id) => {
   return state.expenses.items[id];

client/src/store/expenses/expenses.selectors.js

@@ -1,8 +1,29 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
 
-const expensesTableQuery = state => state.expenses.tableQuery;
+const expensesTableQuery = (state) => state.expenses.tableQuery;
 
+const getPageExpensesQuery = (state, props) => {
+  const currentPageId = state.expenses.views?.[props.viewId]?.paginationMeta?.page;
+  return currentPageId || 0;
+};
+
+const expensesPageSelector = (state, props, query) => {
+  const viewId = state.expenses.currentViewId;
+  const currentPageId = getPageExpensesQuery(state, { viewId });
+
+  return state.expenses.views?.[viewId]?.pages?.[currentPageId];
+};
+
+const expensesItemsSelector = (state) => state.expenses.items;
+const expenseByIdSelector = (state, props) => state.expenses.items[props.expenseId];
+
+const manualJournalsPaginationSelector = (state, props) => {
+  const viewId = state.expenses.currentViewId;
+  return state.expenses.views?.[viewId];
+};
+
+// Retrive expenses table query.
 export const getExpensesTableQuery = createSelector(
   paginationLocationQuery,
   expensesTableQuery,
@@ -14,13 +35,7 @@ export const getExpensesTableQuery = createSelector(
   },
 );
 
-const expensesPageSelector = (state, props, query) => {
-  const viewId = state.expenses.currentViewId;
-  return state.expenses.views?.[viewId]?.pages?.[query.page];
-};
-
-const expensesItemsSelector = (state) => state.expenses.items;
-
+// Retrieve expenses results of the current page.
 export const getExpensesCurrentPageFactory = () => createSelector(
   expensesPageSelector,
   expensesItemsSelector,
@@ -31,8 +46,7 @@ export const getExpensesCurrentPageFactory = () => createSelector(
   },
 );
 
-const expenseByIdSelector = (state, props) => state.expenses.items[props.expenseId];
-
+// Retrieve specific expense by the passed expense id.
 export const getExpenseByIdFactory = () => createSelector(
   expenseByIdSelector,
   (expense) => {
@@ -40,11 +54,7 @@ export const getExpenseByIdFactory = () => createSelector(
   }  
 );
 
-const manualJournalsPaginationSelector = (state, props) => {
-  const viewId = state.expenses.currentViewId;
-  return state.expenses.views?.[viewId];
-};
-
+// Retrieve expenses pagination meta.
 export const getExpensesPaginationMetaFactory = () => createSelector(
   manualJournalsPaginationSelector,
   (expensesPage) => {

client/src/store/expenses/expenses.types.js

@@ -4,7 +4,7 @@ export default {
   EXPENSE_DELETE: 'EXPENSE_DELETE',
   EXPENSES_BULK_DELETE: 'EXPENSES_BULK_DELETE',
   EXPENSES_SET_CURRENT_VIEW: 'EXPENSES_SET_CURRENT_VIEW',
-  EXPENSES_TABLE_QUERIES_ADD:'EXPENSES_TABLE_QUERIES_ADD',
+  EXPENSES_TABLE_QUERIES_ADD:'EXPENSES/TABLE_QUERIES_ADD',
   EXPENSE_PUBLISH: 'EXPENSE_PUBLISH',
   EXPENSES_TABLE_LOADING: 'EXPENSES_TABLE_LOADING',
   EXPENSES_PAGE_SET: 'EXPENSES_PAGE_SET',