feat: optimize accounts performance.

feat: optimize alerts architecture.
feat: optimize datatable architecture.
feat: optimize datatable style.

client/src/store/accounts/accounts.actions.js

@@ -1,3 +1,4 @@
+import { batch } from 'react-redux'
 import { omit } from 'lodash';
 import ApiService from 'services/ApiService';
 import t from 'store/types';
@@ -26,15 +27,17 @@ export const fetchAccountsList = () => {
 
       ApiService.get('accounts', { params: query })
         .then((response) => {
-          dispatch({
-            type: t.ACCOUNTS_ITEMS_SET,
-            accounts: response.data.accounts,
-          });
-          dispatch({
-            type: t.ACCOUNTS_LIST_SET,
-            payload: {
+          batch(() => {
+            dispatch({
+              type: t.ACCOUNTS_ITEMS_SET,
               accounts: response.data.accounts,
-            }
+            });
+            dispatch({
+              type: t.ACCOUNTS_LIST_SET,
+              payload: {
+                accounts: response.data.accounts,
+              }
+            });
           });
           resolve(response);
         })
@@ -62,18 +65,20 @@ export const fetchAccountsTable = ({ query } = {}) => {
       });
       ApiService.get('accounts', { params: { ...pageQuery, ...query } })
         .then((response) => {
-          dispatch({
-            type: t.ACCOUNTS_PAGE_SET,
-            accounts: response.data.accounts,
-            customViewId: response.data?.filter_meta?.view?.custom_view_id,
-          });
-          dispatch({
-            type: t.ACCOUNTS_ITEMS_SET,
-            accounts: response.data.accounts,
-          });
-          dispatch({
-            type: t.ACCOUNTS_TABLE_LOADING,
-            loading: false,
+          batch(() => {
+            dispatch({
+              type: t.ACCOUNTS_PAGE_SET,
+              accounts: response.data.accounts,
+              customViewId: response.data?.filter_meta?.view?.custom_view_id,
+            });
+            dispatch({
+              type: t.ACCOUNTS_ITEMS_SET,
+              accounts: response.data.accounts,
+            });
+            dispatch({
+              type: t.ACCOUNTS_TABLE_LOADING,
+              loading: false,
+            });
           });
           resolve(response);
         })
@@ -243,3 +248,11 @@ export const fetchAccount = ({ id }) => {
         });
     });
 };
+
+
+export const setBulkAction = ({ action }) => {
+  return (dispatch) => dispatch({
+    type: t.ACCOUNTS_BULK_ACTION,
+    payload: { action }
+  });
+}

client/src/store/accounts/accounts.reducer.js

@@ -75,11 +75,6 @@ const accountsReducer = createReducer(initialState, {
     }
   },
 
-  [t.ACCOUNTS_SELECTED_ROWS_SET]: (state, action) => {
-    const { ids } = action.payload;
-    state.selectedRows = [];
-  },
-
   [t.ACCOUNTS_SET_CURRENT_VIEW]: (state, action) => {  
     state.currentViewId = action.currentViewId;
   },
@@ -108,6 +103,11 @@ const accountsReducer = createReducer(initialState, {
     });
     state.items = items;
   },
+
+  [t.ACCOUNTS_SELECTED_ROWS_SET]: (state, action) => {
+    const { selectedRows } = action.payload;
+    state.selectedRows = selectedRows;
+  }
 });
 
 export default createTableQueryReducers('accounts', accountsReducer);

client/src/store/accounts/accounts.selectors.js

@@ -1,12 +1,15 @@
-import { createSelector } from 'reselect';
-import { repeat } from 'lodash';
+import { createSelector, createSelectorCreator, defaultMemoize } from 'reselect';
+import { repeat, isEqual } from 'lodash';
 import {
   pickItemsFromIds,
   getItemById,
-  paginationLocationQuery,
 } from 'store/selectors';
 import { flatToNestedArray, treeToList } from 'utils';
 
+const createDeepEqualSelector = createSelectorCreator(
+  defaultMemoize,
+  isEqual
+);
 const accountsViewsSelector = (state) => state.accounts.views;
 const accountsDataSelector = (state) => state.accounts.items;
 const accountsCurrentViewSelector = (state) => state.accounts.currentViewId;
@@ -23,7 +26,7 @@ export const getAccountsTableQuery = createSelector(
   },
 );
 
-export const getAccountsItems = createSelector(
+export const getAccountsItems = createDeepEqualSelector(
   accountsViewsSelector,
   accountsDataSelector,
   accountsCurrentViewSelector,
@@ -42,7 +45,7 @@ export const getAccountsItems = createSelector(
 );
 
 export const getAccountsListFactory = () =>
-  createSelector(
+  createDeepEqualSelector(
     accountsListSelector,
     accountsDataSelector,
     (accountsTree, accountsItems) => {

client/src/store/accounts/accounts.types.js

@@ -8,6 +8,8 @@ export default {
   ACCOUNT_SET: 'ACCOUNT_SET',
   ACCOUNT_DELETE: 'ACCOUNT_DELETE',
   ACCOUNT_FORM_ERRORS: 'ACCOUNT_FORM_ERRORS',
+  ACCOUNTS_BULK_ACTION: 'ACCOUNTS_BULK_ACTION',
+  
   CLEAR_ACCOUNT_FORM_ERRORS: 'CLEAR_ACCOUNT_FORM_ERRORS',
 
   ACCOUNTS_SELECTED_ROWS_SET: 'ACCOUNTS_SELECTED_ROWS_SET',