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',

client/src/store/customViews/customViews.selectors.js

@@ -3,10 +3,10 @@ import { pickItemsFromIds } from 'store/selectors';
 import { getResourceColumn } from 'store/resources/resources.reducer';
 
 const resourceViewsIdsSelector = (state, props, resourceName) =>
-  state.views.resourceViews[resourceName] || [];
+  state.views.resourceViews[resourceName];
 
 const viewsSelector = (state) => state.views.views;
-const viewByIdSelector = (state, props) => state.views.views[props.viewId] || {}; 
+const viewByIdSelector = (state, props) => state.views.views[props.viewId]; 
 
 const viewColumnsSelector = (state, props) => {
 };

client/src/store/dashboard/dashboard.actions.js

@@ -13,5 +13,21 @@ export function closeDialog(name, payload) {
     type: t.CLOSE_DIALOG,
     name: name,
     payload: payload,
-  }
+  };
+}
+
+export function openAlert(name, payload) {
+  return  {
+    type: t.OPEN_ALERT,
+    name,
+    payload,
+  };
+}
+
+export function closeAlert(name, payload) {
+  return  {
+    type: t.CLOSE_ALERT,
+    name,
+    payload,
+  };
 }

client/src/store/dashboard/dashboard.reducer.js

@@ -11,6 +11,7 @@ const initialState = {
   sidebarExpended: true,
   previousSidebarExpended: null,
   dialogs: {},
+  alerts: {},
   topbarEditViewId: null,
   requestsLoading: 0,
   backLink: false,
@@ -47,6 +48,20 @@ const reducerInstance = createReducer(initialState, {
     };
   },
 
+  [t.OPEN_ALERT]: (state, action) => {
+    state.alerts[action.name] = {
+      isOpen: true,
+      payload: action.payload || {},
+    };
+  },
+
+  [t.CLOSE_ALERT]: (state, action) => {
+    state.alerts[action.name] = {
+      ...state.alerts[action.name],
+      isOpen: false,
+    };
+  },
+
   [t.CLOSE_ALL_DIALOGS]: (state, action) => {
     
   },

client/src/store/dashboard/dashboard.selectors.js

@@ -14,4 +14,20 @@ export const getDialogPayloadFactory = () => createSelector(
   (dialog) => {
     return { ...dialog?.payload };
   },
-);
+);
+
+const alertByNameSelector = (state, props) => state.dashboard.alerts?.[props.name];
+
+export const isAlertOpenFactory = () => createSelector(
+  alertByNameSelector,
+  (alert) => {
+    return alert && alert.isOpen;
+  },
+);
+
+export const getAlertPayloadFactory = () => createSelector(
+  alertByNameSelector,
+  (alert) => {
+    return { ...alert?.payload };
+  },
+);

client/src/store/dashboard/dashboard.types.js

@@ -1,10 +1,11 @@
 
-
-
 export default {
   OPEN_DIALOG: 'OPEN_DIALOG',
   CLOSE_DIALOG: 'CLOSE_DIALOG',
+  OPEN_ALERT: 'OPEN_ALERT',
+  CLOSE_ALERT: 'CLOSE_ALERT',
   CLOSE_ALL_DIALOGS: 'CLOSE_ALL_DIALOGS',
+  CLOSE_ALL_ALERTS: 'CLOSE_ALL_ALERTS',
   CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE',
   CHANGE_DASHBOARD_PAGE_HINT: 'CHANGE_DASHBOARD_PAGE_HINT',
   CHANGE_PREFERENCES_PAGE_TITLE: 'CHANGE_PREFERENCES_PAGE_TITLE',