Fix : Customers

client/src/store/customers/customers.actions.js

@@ -1,14 +1,9 @@
-import { resolve } from 'p-progress';
 import ApiService from 'services/ApiService';
 import t from 'store/types';
 
 export const submitCustomer = ({ form }) => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
-      dispatch({
-        type: t.SET_DASHBOARD_REQUEST_LOADING,
-      });
-
       ApiService.post('customers', form)
         .then((response) => {
           resolve(response);
@@ -25,10 +20,6 @@ export const submitCustomer = ({ form }) => {
 export const editCustomer = ({ form, id }) => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
-      dispatch({
-        type: t.SET_DASHBOARD_REQUEST_LOADING,
-      });
-
       ApiService.post(`customers/${id}`, form)
         .then((response) => {
           resolve(response);
@@ -45,7 +36,8 @@ export const editCustomer = ({ form, id }) => {
 export const fetchCustomers = ({ query }) => {
   return (dispatch, getState) =>
     new Promise((resolve, reject) => {
-      const pageQuery = getState().items.tableQuery;
+      const pageQuery = getState().customers.tableQuery;
+      
       dispatch({
         type: t.CUSTOMERS_TABLE_LOADING,
         payload: { loading: true },
@@ -53,14 +45,25 @@ export const fetchCustomers = ({ query }) => {
       ApiService.get(`customers`, { params: { ...pageQuery, ...query } })
         .then((response) => {
           dispatch({
-            type: t.CUSTOMERS_ITEMS_SET,
-            customers: response.data.customers,
+            type: t.CUSTOMERS_PAGE_SET,
+            payload: {
+              customers: response.data.customers,
+              customViewId: response.data.customViewId || -1,
+              paginationMeta: response.data.pagination,
+            },
           });
           dispatch({
-            type: t.CUSTOMERS_PAGE_SET,
-            customers: response.data.customers,
-            customViewId: response.data.customers?.viewMeta?.customViewId || -1,
-            paginationMeta: response.data.pagination,
+            type: t.CUSTOMERS_ITEMS_SET,
+            payload: {
+              customers: response.data.customers,
+            },
+          });
+          dispatch({
+            type: t.CUSTOMERS_PAGINATION_SET,
+            payload: {
+              pagination: response.data.pagination,
+              customViewId: response.data.customViewId || -1,
+            },
           });
           dispatch({
             type: t.CUSTOMERS_TABLE_LOADING,
@@ -83,7 +86,7 @@ export const fetchCustomer = ({ id }) => {
             type: t.CUSTOMER_SET,
             payload: {
               id,
-              customer: response.data.contact,
+              customer: response.data.customer,
             },
           });
           resolve(response);
@@ -99,7 +102,10 @@ export const deleteCustomer = ({ id }) => {
     new Promise((resolve, reject) => {
       ApiService.delete(`customers/${id}`)
         .then((response) => {
-          dispatch({ type: t.CUSTOMER_DELETE, id });
+          dispatch({
+            type: t.CUSTOMER_DELETE,
+            payload: { id },
+          });
           resolve(response);
         })
         .catch((error) => {

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

@@ -1,4 +1,5 @@
 import t from 'store/types';
+import { snakeCase } from 'lodash';
 import { createReducer } from '@reduxjs/toolkit';
 import { createTableQueryReducers } from 'store/queryReducers';
 
@@ -7,14 +8,26 @@ const initialState = {
   views: {},
   loading: false,
   currentViewId: -1,
+  tableQuery: {
+    page_size: 5,
+    page: 1,
+  },
   errors: [],
 };
 
 const customersReducer = createReducer(initialState, {
+  [t.CUSTOMER_SET]: (state, action) => {
+    const { id, customer } = action.payload;
+    const _customers = state.items[id] || {};
+    state.items[id] = { ..._customers, ...customer };
+  },
+
   [t.CUSTOMERS_ITEMS_SET]: (state, action) => {
+    const { customers } = action.payload;
+
     const _customers = {};
 
-    action.customers.forEach((customer) => {
+    customers.forEach((customer) => {
       _customers[customer.id] = customer;
     });
     state.items = {
@@ -22,24 +35,59 @@ const customersReducer = createReducer(initialState, {
       ..._customers,
     };
   },
+
   [t.CUSTOMERS_PAGE_SET]: (state, action) => {
-    const viewId = action.customViewId || -1;
+    const { customViewId, customers, paginationMeta } = action.payload;
+
+    const viewId = customViewId || -1;
     const view = state.views[viewId] || {};
 
     state.views[viewId] = {
       ...view,
-      ids: action.customers.map((i) => i.id),
+      pages: {
+        ...(state.views?.[viewId]?.pages || {}),
+        [paginationMeta.page]: {
+          ids: customers.map((i) => i.id),
+        },
+      },
     };
   },
+
   [t.CUSTOMER_DELETE]: (state, action) => {
-    if (typeof state.items[action.id] !== 'undefined') {
+    const { id } = action.payload;
+
+    if (typeof state.items[id] !== 'undefined') {
       delete state.items[action.id];
     }
   },
+
   [t.CUSTOMERS_TABLE_LOADING]: (state, action) => {
     const { loading } = action.payload;
-    state.loading = !!loading;
+    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 };
@@ -51,10 +99,6 @@ const customersReducer = createReducer(initialState, {
     });
     state.items = items;
   },
-  [t.CUSTOMER_SET]: (state, action) => {
-    const { id, customer } = action.payload;
-    state.items[id] = { ...customer };
-  },
 });
 
 export default createTableQueryReducers('customers', customersReducer);

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

@@ -1,26 +1,54 @@
 import { createSelector } from 'reselect';
-import { pickItemsFromIds } from 'store/selectors';
+import { pickItemsFromIds, paginationLocationQuery } from 'store/selectors';
 
-const customersViewsSelector = state => state.customers.views;
-const customersItemsSelector = state => state.customers.items;
-const customersCurrentViewSelector = state => state.customers.currentViewId;
+const customerTableQuery = (state) => state.customers.tableQuery;
 
-export const getCustomersItems = createSelector(
-  customersViewsSelector,
-  customersItemsSelector,
-  customersCurrentViewSelector,
-  (customersViews, customersItems, currentViewId) => {
-    const customersView = customersViews[currentViewId || -1];
+const customersByIdSelector = (state, props) => {
+  return state.customers.items[props.customerId];
+};
 
-    return (typeof customersView === 'object') 
-      ? pickItemsFromIds(customersItems, customersView.ids) || []
-      : [];  
-  },
-);
+const customersPaginationSelector = (state, props) => {
+  const viewId = state.customers.currentViewId;
+  return state.customers.views?.[viewId];
+};
+
+const customerPageSelector = (state, props, query) => {
+  const viewId = state.customers.currentViewId;
+  return state.customers.views?.[viewId]?.pages?.[query.page];
+};
+
+const customersItemsSelector = (state) => state.customers.items;
+
+export const getCustomerTableQueryFactory = () =>
+  createSelector(
+    paginationLocationQuery,
+    customerTableQuery,
+    (locationQuery, tableQuery) => {
+      return {
+        ...locationQuery,
+        ...tableQuery,
+      };
+    },
+  );
+
+export const getCustomerCurrentPageFactory = () =>
+  createSelector(
+    customerPageSelector,
+    customersItemsSelector,
+    (customerPage, customersItems) => {
+      return typeof customerPage === 'object'
+        ? pickItemsFromIds(customersItems, customerPage.ids) || []
+        : [];
+    },
+  );
+
+export const getCustomersByIdFactory = () =>
+  createSelector(customersByIdSelector, (customer) => {
+    return customer;
+  });
+
+export const getCustomerPaginationMetaFactory = () =>
+  createSelector(customersPaginationSelector, (customerPage) => {
+    return customerPage?.paginationMeta || {};
+  });
 
-export const getCustomersListFactory = () => createSelector(
-  customersItemsSelector,
-  (customersItems) => {
-    return Object.values(customersItems);
-  }
-);

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

@@ -4,6 +4,7 @@ export default {
   CUSTOMERS_PAGE_SET: 'CUSTOMERS_PAGE_SET',
   CUSTOMERS_TABLE_LOADING: 'CUSTOMERS_TABLE_LOADING',
   CUSTOMERS_TABLE_QUERIES_ADD: 'CUSTOMERS_TABLE_QUERIES_ADD',
-  CUSTOMER_DELETE:'CUSTOMER_DELETE',
-  CUSTOMERS_BULK_DELETE:'CUSTOMERS_BULK_DELETE'
+  CUSTOMER_DELETE: 'CUSTOMER_DELETE',
+  CUSTOMERS_BULK_DELETE: 'CUSTOMERS_BULK_DELETE',
+  CUSTOMERS_PAGINATION_SET: 'CUSTOMERS_PAGINATION_SET',
 };