feat: datatables pagination.

client/src/store/customers/customers.reducer.js

@@ -1,21 +1,25 @@
 import t from 'store/types';
-import { snakeCase } from 'lodash';
 import { createReducer } from '@reduxjs/toolkit';
-import { createTableQueryReducers } from 'store/queryReducers';
+import {
+  viewPaginationSetReducer,
+  createTableQueryReducers,
+} from 'store/journalNumber.reducer';
 
 const initialState = {
   items: {},
   views: {},
   loading: false,
   currentViewId: -1,
+
+  // Responsible for data fetch query based on this query.
   tableQuery: {
-    page_size: 5,
+    page_size: 12,
     page: 1,
   },
   errors: [],
 };
 
-const customersReducer = createReducer(initialState, {
+export default createReducer(initialState, {
   [t.CUSTOMER_SET]: (state, action) => {
     const { id, customer } = action.payload;
     const _customers = state.items[id] || {};
@@ -65,28 +69,6 @@ const customersReducer = createReducer(initialState, {
     state.loading = loading;
   },
 
-  [t.CUSTOMERS_PAGINATION_SET]: (state, action) => {
-    const { pagination, customViewId } = action.payload;
-
-    const mapped = {
-      pageSize: parseInt(pagination.page_size, 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.CUSTOMERS_BULK_DELETE]: (state, action) => {
     const { ids } = action.payload;
     const items = { ...state.items };
@@ -98,9 +80,10 @@ const customersReducer = createReducer(initialState, {
     });
     state.items = items;
   },
-});
 
-export default createTableQueryReducers('customers', customersReducer);
+  ...viewPaginationSetReducer(t.CUSTOMERS_PAGINATION_SET),
+  ...createTableQueryReducers('CUSTOMERS'),
+});
 
 export const getCustomerById = (state, id) => {
   return state.customers.items[id];

client/src/store/customers/customers.selectors.js

@@ -1,5 +1,9 @@
 import { createSelector } from 'reselect';
-import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
+import {
+  pickItemsFromIds,
+  paginationLocationQuery,
+  defaultPaginationMeta,
+} from 'store/selectors';
 
 const customerTableQuery = (state) => state.customers.tableQuery;
 
@@ -12,9 +16,12 @@ const customersPaginationSelector = (state, props) => {
   return state.customers.views?.[viewId];
 };
 
-const customerPageSelector = (state, props, query) => {
+const customerPageSelector = (state, props) => {
   const viewId = state.customers.currentViewId;
-  return state.customers.views?.[viewId]?.pages?.[query.page];
+  const currentView = state.customers.views?.[viewId];
+  const currentPageId = currentView?.paginationMeta?.page;
+
+  return currentView?.pages?.[currentPageId];
 };
 
 const customersItemsSelector = (state) => state.customers.items;
@@ -49,6 +56,8 @@ export const getCustomersByIdFactory = () =>
 
 export const getCustomerPaginationMetaFactory = () =>
   createSelector(customersPaginationSelector, (customerPage) => {
-    return customerPage?.paginationMeta || {};
+    return {
+      ...defaultPaginationMeta(),
+      ...(customerPage?.paginationMeta || {}),
+    };
   });
-

client/src/store/customers/customers.type.js

@@ -3,7 +3,7 @@ export default {
   CUSTOMER_SET: 'CUSTOMER_SET',
   CUSTOMERS_PAGE_SET: 'CUSTOMERS_PAGE_SET',
   CUSTOMERS_TABLE_LOADING: 'CUSTOMERS_TABLE_LOADING',
-  CUSTOMERS_TABLE_QUERIES_ADD: 'CUSTOMERS_TABLE_QUERIES_ADD',
+  CUSTOMERS_TABLE_QUERIES_ADD: 'CUSTOMERS/TABLE_QUERIES_ADD',
   CUSTOMER_DELETE: 'CUSTOMER_DELETE',
   CUSTOMERS_BULK_DELETE: 'CUSTOMERS_BULK_DELETE',
   CUSTOMERS_PAGINATION_SET: 'CUSTOMERS_PAGINATION_SET',