refactoring: expenses landing list.

refactoring: customers landing list.
refactoring: vendors landing list.
refactoring: manual journals landing list.

client/src/containers/Accounts/AccountActionsMenu.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
-import { Icon, If } from 'components';
-import { useIntl } from 'react-intl';
-
-import withDialogs from 'containers/Dialog/withDialogActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-
-import { compose } from 'utils';
-import { formatMessage } from 'services/intl';
-
-/**
- * Account actions menu list.
- */
-export default function AccountActionsMenuList({
-  account,
-
-  // #withAlert
-  openAlert,
-  openDialog,
-}) {
-  const { formatMessage } = useIntl();
-
-  
-  return (
-    
-  );
-}
-
-// export default compose(withDialogs, withAlertsActions)(AccountActionsMenuList);

client/src/containers/Accounts/AccountsActionsBar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Icon from 'components/Icon';
+import { isEmpty } from 'lodash';
 import {
   Button,
   NavbarGroup,
@@ -21,6 +22,7 @@ import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvid
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withAlertActions from 'containers/Alert/withAlertActions';
+import withAccountsTableActions from './withAccountsTableActions';
 
 import { compose } from 'utils';
 
@@ -37,6 +39,9 @@ function AccountsActionsBar({
   // #withAlertActions
   openAlert,
 
+  // #withAccountsTableActions
+  setAccountsTableState,
+
   // #ownProps
   onFilterChanged,
 }) {
@@ -46,7 +51,7 @@ function AccountsActionsBar({
     openDialog('account-form', {});
   };
 
-  // handle bulk accounts delete.
+  // Handle bulk accounts delete.
   const handleBulkDelete = () => {
     openAlert('accounts-bulk-delete', { accountsIds: accountsSelectedRows });
   };
@@ -63,12 +68,18 @@ function AccountsActionsBar({
     });
   };
 
+  // Handle tab changing.
+  const handleTabChange = (viewId) => {
+    setAccountsTableState({ customViewId: viewId.id || null });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <DashboardActionViewsList
           resourceName={'accounts'}
           views={resourceViews}
+          onChange={handleTabChange}
         />
         <NavbarDivider />
 
@@ -100,7 +111,7 @@ function AccountsActionsBar({
           />
         </Popover>
 
-        <If condition={accountsSelectedRows.length}>
+        <If condition={!isEmpty(accountsSelectedRows)}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon="play-16" iconSize={16} />}
@@ -144,8 +155,9 @@ function AccountsActionsBar({
 
 export default compose(
   withDialogActions,
+  withAlertActions,
   withAccounts(({ accountsSelectedRows }) => ({
     accountsSelectedRows,
   })),
-  withAlertActions,
+  withAccountsTableActions
 )(AccountsActionsBar);

client/src/containers/Accounts/AccountsAlerts.js

@@ -2,9 +2,9 @@ import React from 'react';
 import AccountDeleteAlert from 'containers/Alerts/AccountDeleteAlert';
 import AccountInactivateAlert from 'containers/Alerts/AccountInactivateAlert';
 import AccountActivateAlert from 'containers/Alerts/AccountActivateAlert';
-import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
-import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
-import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
+// import AccountBulkDeleteAlert from 'containers/Alerts/AccountBulkDeleteAlert';
+// import AccountBulkInactivateAlert from 'containers/Alerts/AccountBulkInactivateAlert';
+// import AccountBulkActivateAlert from 'containers/Alerts/AccountBulkActivateAlert';
 
 /**
  * Accounts alert.
@@ -18,9 +18,9 @@ export default function AccountsAlerts({
       <AccountInactivateAlert name={'account-inactivate'} />
       <AccountActivateAlert name={'account-activate'} />
 
-      <AccountBulkDeleteAlert name={'accounts-bulk-delete'} />
+      {/* <AccountBulkDeleteAlert name={'accounts-bulk-delete'} />
       <AccountBulkInactivateAlert name={'accounts-bulk-inactivate'} />
-      <AccountBulkActivateAlert name={'accounts-bulk-activate'} />
+      <AccountBulkActivateAlert name={'accounts-bulk-activate'} /> */}
     </div>
   )
 }

client/src/containers/Accounts/AccountsChart.js

@@ -4,15 +4,17 @@ import { useIntl } from 'react-intl';
 import 'style/pages/Accounts/List.scss';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import { AccountsChartProvider } from 'containers/Accounts/AccountsChartProvider';
-import AccountsViewPage from 'containers/Accounts/AccountsViewPage';
+import { AccountsChartProvider } from './AccountsChartProvider';
+
+import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
 import AccountsActionsBar from 'containers/Accounts/AccountsActionsBar';
 import AccountsAlerts from './AccountsAlerts';
+import AccountsDataTable from './AccountsDataTable';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 
-import { compose } from 'utils';
+import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Accounts chart list.
@@ -22,7 +24,7 @@ function AccountsChart({
   changePageTitle,
 
   // #withAccounts
-  accountsTableQuery
+  accountsTableState,
 }) {
   const { formatMessage } = useIntl();
 
@@ -31,11 +33,14 @@ function AccountsChart({
   }, [changePageTitle, formatMessage]);
 
   return (
-    <AccountsChartProvider query={accountsTableQuery}>
+    <AccountsChartProvider
+      query={transformTableStateToQuery(accountsTableState)}
+    >
       <AccountsActionsBar />
 
       <DashboardPageContent>
-        <AccountsViewPage />
+        <AccountsViewsTabs />
+        <AccountsDataTable />
       </DashboardPageContent>
 
       <AccountsAlerts />
@@ -45,7 +50,5 @@ function AccountsChart({
 
 export default compose(
   withDashboardActions,
-  withAccounts(({ accountsTableQuery }) => ({
-    accountsTableQuery,
-  })),
+  withAccounts(({ accountsTableState }) => ({ accountsTableState })),
 )(AccountsChart);

client/src/containers/Accounts/AccountsChartProvider.js

@@ -9,18 +9,22 @@ const AccountsChartContext = createContext();
  */
 function AccountsChartProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: resourceViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: resourceViews, isLoading: isViewsLoading } = useResourceViews(
     'accounts',
   );
 
   // Fetch the accounts resource fields.
   const {
     data: resourceFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('accounts');
 
   // Fetch accounts list according to the given custom view id.
-  const { data: accounts, isFetching: isAccountsLoading } = useAccounts(
+  const {
+    data: accounts,
+    isFetching: isAccountsFetching,
+    isLoading: isAccountsLoading
+  } = useAccounts(
     query,
     { keepPreviousData: true }
   );
@@ -32,6 +36,7 @@ function AccountsChartProvider({ query, ...props }) {
     resourceViews,
 
     isAccountsLoading,
+    isAccountsFetching,
     isFieldsLoading,
     isViewsLoading,
   };

client/src/containers/Accounts/AccountsDataTable.js

@@ -1,127 +1,75 @@
-import React, { useCallback, useMemo } from 'react';
-import { Button, Popover, Position } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import React from 'react';
 import classNames from 'classnames';
 
-import { Icon, DataTable } from 'components';
-import { saveInvoke } from 'utils';
+import { TableFastCell, DataTable } from 'components';
+import { compose } from 'utils';
 
 import { CLASSES } from 'common/classes';
 
-import { NormalCell, BalanceCell, AccountActionsMenu } from './components';
-import { TableFastCell } from 'components';
+import { useAccountsTableColumns, rowClassNames } from './utils';
+import { ActionsMenu } from './components';
 
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { useAccountsChartContext } from './AccountsChartProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 /**
  * Accounts data-table.
  */
-export default function AccountsDataTable({
-  // #ownProps
-  accounts,
-  loading,
-  onFetchData,
-  onSelectedRowsChange,
-  // onDeleteAccount,
-  // onInactivateAccount,
-  // onActivateAccount,
-  // onEditAccount,
-  // onNewChildAccount,
+function AccountsDataTable({
+  // #withAlertsDialog
+  openAlert,
+
+  // #withDial
+  openDialog,
 }) {
-  const { formatMessage } = useIntl();
+  const {
+    isAccountsLoading,
+    isAccountsFetching,
+    accounts,
+  } = useAccountsChartContext();
 
-  const ActionsCell = useMemo(
-    () => ({ row }) => (
-      <Popover
-        content={<AccountActionsMenu row={row} />}
-        position={Position.RIGHT_TOP}
-      >
-        <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-      </Popover>
-    ),
-    [],
-  );
+  // Retrieve accounts table columns.
+  const columns = useAccountsTableColumns();
 
-  const RowContextMenu = useMemo(
-    () => ({ row }) => <AccountActionsMenu row={row} />,
-    [],
-  );
+  // Handle delete action account.
+  const handleDeleteAccount = (account) => {
+    openAlert('account-delete', { accountId: account.id });
+  };
 
-  const columns = useMemo(
-    () => [
-      {
-        id: 'name',
-        Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
-        className: 'account_name',
-        width: 200,
-      },
-      {
-        id: 'code',
-        Header: formatMessage({ id: 'code' }),
-        accessor: 'code',
-        className: 'code',
-        width: 80,
-      },
-      {
-        id: 'type',
-        Header: formatMessage({ id: 'type' }),
-        accessor: 'account_type_label',
-        className: 'type',
-        width: 140,
-      },
-      {
-        id: 'normal',
-        Header: formatMessage({ id: 'normal' }),
-        Cell: NormalCell,
-        accessor: 'account_normal',
-        className: 'normal',
-        width: 80,
-      },
-      {
-        id: 'currency',
-        Header: formatMessage({ id: 'currency' }),
-        accessor: (row) => 'USD',
-        width: 75,
-      },
-      {
-        id: 'balance',
-        Header: formatMessage({ id: 'balance' }),
-        accessor: 'amount',
-        Cell: BalanceCell,
-        width: 150,
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ActionsCell,
-        className: 'actions',
-        width: 50,
-        skeletonWidthMin: 100,
-      },
-    ],
-    [ActionsCell, formatMessage],
-  );
+  // Handle activate action account.
+  const handleActivateAccount = (account) => {
+    openAlert('account-activate', { accountId: account.id });
+  };
 
-  const handleDatatableFetchData = useCallback(
-    (...params) => {
-      saveInvoke(onFetchData, params);
-    },
-    [onFetchData],
-  );
+  // Handle inactivate action account.
+  const handleInactivateAccount = (account) => {
+    openAlert('account-inactivate', { accountId: account.id });
+  };
 
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(onSelectedRowsChange, selectedRows);
-    },
-    [onSelectedRowsChange],
-  );
+  // Handle select accounts datatable rows.
+  //   const handleSelectedRowsChange = (selectedRows) => {
+  //     const selectedRowsIds = selectedRows.map((r) => r.id);
+  //     setSelectedRowsAccounts(selectedRowsIds);
+  //   };
 
-  const rowClassNames = (row) => ({
-    inactive: !row.original.active,
-  });
+  // Handle edit account action.
+  const handleEditAccount = (account) => {
+    openDialog('account-form', { action: 'edit', id: account.id });
+  };
+
+  // Handle new child button click.
+  const handleNewChildAccount = (account) => {
+    openDialog('account-form', {
+      action: 'new_child',
+      parentAccountId: account.id,
+      accountType: account.account_type,
+    });
+  };
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
@@ -129,29 +77,44 @@ export default function AccountsDataTable({
         noInitialFetch={true}
         columns={columns}
         data={accounts}
-        onFetchData={handleDatatableFetchData}
         selectionColumn={true}
         expandable={true}
         sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        loading={loading}
-        headerLoading={loading}
-        rowContextMenu={RowContextMenu}
+
+        loading={isAccountsLoading}
+        headerLoading={isAccountsLoading}
+        progressBarLoading={isAccountsFetching}
+        
         rowClassNames={rowClassNames}
+
         autoResetExpanded={false}
         autoResetSortBy={false}
         autoResetSelectedRows={false}
+
         expandColumnSpace={1}
         expandToggleColumn={2}
         selectionColumnWidth={50}
+
         TableCellRenderer={TableFastCell}
         TableRowsRenderer={TableVirtualizedListRows}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+
         // #TableVirtualizedListRows props.
         vListrowHeight={42}
         vListOverscanRowCount={10}
+
+        payload={{
+          onEdit: handleEditAccount,
+          onDelete: handleDeleteAccount,
+          onActivate: handleActivateAccount,
+          onInactivate: handleInactivateAccount,
+          newChild: handleNewChildAccount
+        }}
       />
     </div>
   );
 }
+
+export default compose(withAlertsActions, withDialogActions)(AccountsDataTable);

client/src/containers/Accounts/AccountsViewPage.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
-import AccountsDataTable from 'containers/Accounts/AccountsDataTable';
-import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
-
-import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import withDialogActions from 'containers/Dialog/withDialogActions';
-
-import { compose } from 'utils';
-
-/**
- * Accounts view page.
- */
-function AccountsViewPage({
-  // #withAlertActions
-  openAlert,
-
-  // #withDialog.
-  openDialog,
-
-  // #withAccountsTableActions
-  setSelectedRowsAccounts,
-}) {
-  const { isAccountsLoading, accounts } = useAccountsChartContext();
-
-  // Handle delete action account.
-  const handleDeleteAccount = (account) => {
-    // openAlert('account-delete', { accountId: account.id });
-  };
-
-  // Handle activate action account.
-  const handleActivateAccount = (account) => {
-    // openAlert('account-activate', { accountId: account.id });
-  };
-
-  // Handle inactivate action account.
-  const handleInactivateAccount = (account) => {
-    // openAlert('account-inactivate', { accountId: account.id });
-  };
-
-  // Handle select accounts datatable rows.
-  //   const handleSelectedRowsChange = (selectedRows) => {
-  //     const selectedRowsIds = selectedRows.map((r) => r.id);
-  //     setSelectedRowsAccounts(selectedRowsIds);
-  //   };
-
-  // Handle edit account action.
-  const handleEditAccount = (account) => {
-    // openDialog('account-form', { action: 'edit', id: account.id });
-  };
-
-  // Handle new child button click.
-  const handleNewChildAccount = (account) => {
-    // openDialog('account-form', {
-    //   action: 'new_child',
-    //   parentAccountId: account.id,
-    //   accountType: account.account_type,
-    // });
-  };
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/accounts/:custom_view_id/custom_view', '/accounts']}
-      >
-        <AccountsViewsTabs />
-
-        <AccountsDataTable
-          loading={isAccountsLoading}
-          accounts={accounts}
-          // onDeleteAccount={handleDeleteAccount}
-          // onInactivateAccount={handleInactivateAccount}
-          // onActivateAccount={handleActivateAccount}
-          // onSelectedRowsChange={handleSelectedRowsChange}
-          // onEditAccount={handleEditAccount}
-          // onNewChildAccount={handleNewChildAccount}
-        />
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withAccountsTableActions,
-  withDialogActions,
-)(AccountsViewPage);

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -1,12 +1,12 @@
 import React, { useMemo, useCallback } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams  } from 'react-router-dom';
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
 
-import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
+import withAccountsTableActions from './withAccountsTableActions';
+import withAccounts from './withAccounts';
 
 import { compose } from 'utils';
 
@@ -15,18 +15,22 @@ import { compose } from 'utils';
  */
 function AccountsViewsTabs({
   // #withAccountsTableActions
-  addAccountsTableQuery,
-}) {
-  const { resourceViews } = useAccountsChartContext();
-  const { custom_view_id: customViewId = null } = useParams();
+  setAccountsTableState,
 
+  // #withAccounts
+  accountsCustomViewId
+}) {
+  // Accounts chart context.
+  const { resourceViews } = useAccountsChartContext();
+
+  // Handles the tab change.
   const handleTabChange = useCallback(
     (viewId) => {
-      addAccountsTableQuery({
-        custom_view_id: viewId || null,
+      setAccountsTableState({
+        customViewId: viewId || null,
       });
     },
-    [addAccountsTableQuery],
+    [setAccountsTableState],
   );
 
   const tabs = useMemo(
@@ -42,7 +46,7 @@ function AccountsViewsTabs({
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           defaultTabText={'All Accounts'}
-          initialViewId={customViewId}
+          currentViewId={accountsCustomViewId}
           resourceName={'accounts'}
           onChange={handleTabChange}
           tabs={tabs}
@@ -54,4 +58,7 @@ function AccountsViewsTabs({
 
 export default compose(
   withAccountsTableActions,
+  withAccounts(({ accountsTableState }) => ({
+    accountsCustomViewId: accountsTableState.customViewId
+  }))
 )(AccountsViewsTabs);

client/src/containers/Accounts/components.js

@@ -6,65 +6,97 @@ import {
   MenuItem,
   Menu,
   MenuDivider,
-  Intent
+  Intent,
+  Popover,
+  Button,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import classNames from 'classnames';
+import { useIntl } from 'react-intl';
 import { Icon, Money, If } from 'components';
-import { saveInvoke } from 'utils';
 import { formatMessage } from 'services/intl';
+import { safeCallback } from 'utils';
 
-export function AccountActionsMenu({ row: { original } }) {
+/**
+ * Accounts table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: {
+    onEdit,
+    onViewDetails,
+    onDelete,
+    onNewChild,
+    onActivate,
+    onInactivate,
+  },
+}) {
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
         text={formatMessage({ id: 'view_details' })}
+        onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
         text={formatMessage({ id: 'edit_account' })}
-        // onClick={handleEditAccount}
+        onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
         icon={<Icon icon="plus" />}
         text={formatMessage({ id: 'new_child_account' })}
-        // onClick={handleNewChildAccount}
+        onClick={safeCallback(onNewChild, original)}
       />
       <MenuDivider />
       <If condition={original.active}>
         <MenuItem
           text={formatMessage({ id: 'inactivate_account' })}
           icon={<Icon icon="pause-16" iconSize={16} />}
-          // onClick={handleInactivateAccount}
+          onClick={safeCallback(onInactivate, original)}
         />
       </If>
       <If condition={!original.active}>
         <MenuItem
           text={formatMessage({ id: 'activate_account' })}
           icon={<Icon icon="play-16" iconSize={16} />}
-          // onClick={handleActivateAccount}
+          onClick={safeCallback(onActivate, original)}
         />
       </If>
       <MenuItem
         text={formatMessage({ id: 'delete_account' })}
         icon={<Icon icon="trash-16" iconSize={16} />}
         intent={Intent.DANGER}
-        // onClick={handleDeleteA ccount}
+        onClick={safeCallback(onDelete, original)}
       />
     </Menu>
   );
 }
 
+/**
+ * Actions cell.
+ */
+export const ActionsCell = (props) => {
+  return (
+    <Popover
+      position={Position.RIGHT_BOTTOM}
+      content={<ActionsMenu {...props} />}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+};
 
+/**
+ * Normal cell.
+ */
 export function NormalCell({ cell: { value } }) {
   const { formatMessage } = useIntl();
   const arrowDirection = value === 'credit' ? 'down' : 'up';
 
-  // if (value !== 'credit' || value !== 'debit') {
-  //   return '';
-  // }
+  // Can't continue if the value is not `credit` or `debit`.
+  if (['credit', 'debit'].indexOf(value) === -1) {
+    return '';
+  }
   return (
     <Tooltip
       className={Classes.TOOLTIP_INDICATOR}
@@ -77,6 +109,9 @@ export function NormalCell({ cell: { value } }) {
   );
 }
 
+/**
+ * Balance cell.
+ */
 export function BalanceCell({ cell }) {
   const account = cell.row.original;
 
@@ -88,19 +123,3 @@ export function BalanceCell({ cell }) {
     <span class="placeholder">—</span>
   );
 }
-
-export function InactiveSemafro() {
-  return (
-    <Tooltip
-      content={<T id="inactive" />}
-      className={classNames(
-        Classes.TOOLTIP_INDICATOR,
-        'bp3-popover-wrapper--inactive-semafro',
-      )}
-      position={Position.TOP}
-      hoverOpenDelay={250}
-    >
-      <div className="inactive-semafro"></div>
-    </Tooltip>
-  );
-}

client/src/containers/Accounts/utils.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { Intent } from '@blueprintjs/core';
 import { If, AppToaster } from 'components';
 import { formatMessage } from 'services/intl';
+import { NormalCell, BalanceCell, ActionsCell } from './components';
 
+/**
+ * Account name accessor.
+ */
 export const accountNameAccessor = (account) => {
   return (
     <span>
@@ -14,7 +18,9 @@ export const accountNameAccessor = (account) => {
   );
 };
 
-// Handle delete errors in bulk and singular.
+/**
+ * Handle delete errors in bulk and singular.
+ */
 export const handleDeleteErrors = (errors) => {
   if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
     AppToaster.show({
@@ -32,4 +38,69 @@ export const handleDeleteErrors = (errors) => {
       intent: Intent.DANGER,
     });
   }
-};
+};
+
+/**
+ * Accounts table columns.
+ */
+export const useAccountsTableColumns = () => {
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'account_name',
+        width: 200,
+      },
+      {
+        id: 'code',
+        Header: formatMessage({ id: 'code' }),
+        accessor: 'code',
+        className: 'code',
+        width: 80,
+      },
+      {
+        id: 'type',
+        Header: formatMessage({ id: 'type' }),
+        accessor: 'account_type_label',
+        className: 'type',
+        width: 140,
+      },
+      {
+        id: 'normal',
+        Header: formatMessage({ id: 'normal' }),
+        Cell: NormalCell,
+        accessor: 'account_normal',
+        className: 'normal',
+        width: 80,
+      },
+      {
+        id: 'currency',
+        Header: formatMessage({ id: 'currency' }),
+        accessor: (row) => 'USD',
+        width: 75,
+      },
+      {
+        id: 'balance',
+        Header: formatMessage({ id: 'balance' }),
+        accessor: 'amount',
+        Cell: BalanceCell,
+        width: 150,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        skeletonWidthMin: 100,
+      },
+    ],
+    [],
+  )
+}
+
+export const rowClassNames = (row) => ({
+  inactive: !row.original.active,
+});

client/src/containers/Accounts/withAccountDetail.js

@@ -1,8 +0,0 @@
-import { connect } from 'react-redux';
-import { getAccountById } from 'store/accounts/accounts.selectors';
-
-const mapStateToProps = (state, props) => ({
-  account: getAccountById(state, props),
-});
-
-export default connect(mapStateToProps);

client/src/containers/Accounts/withAccounts.js

@@ -1,24 +1,15 @@
 import { connect } from 'react-redux';
 import {
-  getAccountsItems,
-  getAccountsListFactory,
-  getAccountsTableQuery,
+  getAccountsTableStateFactory,
 } from 'store/accounts/accounts.selectors';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
 
 export default (mapState) => {
-  const getAccountsList = getAccountsListFactory();
+  const getAccountsTableState = getAccountsTableStateFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
-      accountsViews: getResourceViews(state, props, 'accounts'),
-      accountsTable: getAccountsItems(state, props),
-      accountsList: getAccountsList(state, props),
-      accountsTypes: state.accounts.accountsTypes,
-      accountsTableQuery: state.accounts.tableQuery,
-      accountsLoading: state.accounts.loading,
-      accountErrors: state.accounts.errors,
-      accountsSelectedRows: state.accounts.selectedRows,
+      accountsTableState: getAccountsTableState(state, props),
+      accountsSelectedRows: null,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Accounts/withAccountsActions.js

@@ -1,30 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  fetchAccountTypes,
-  fetchAccountsList,
-  deleteAccount,
-  inactiveAccount,
-  activateAccount,
-  submitAccount,
-  fetchAccount,
-  deleteBulkAccounts,
-  bulkActivateAccounts,
-  bulkInactiveAccounts,
-  editAccount,
-} from 'store/accounts/accounts.actions';
-
-const mapActionsToProps = (dispatch) => ({
-  requestFetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
-  requestFetchAccountTypes: () => dispatch(fetchAccountTypes()),
-  requestSubmitAccount: ({ form }) => dispatch(submitAccount({ form })),
-  requestDeleteAccount: (id) => dispatch(deleteAccount({ id })),
-  requestInactiveAccount: (id) => dispatch(inactiveAccount({ id })),
-  requestActivateAccount: (id) => dispatch(activateAccount({ id })),
-  requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
-  requestDeleteBulkAccounts: (ids) => dispatch(deleteBulkAccounts({ ids })),
-  requestBulkActivateAccounts: (ids) => dispatch(bulkActivateAccounts({ ids })),
-  requestBulkInactiveAccounts: (ids) => dispatch(bulkInactiveAccounts({ ids })),
-  requestEditAccount: (id, form) => dispatch(editAccount(id, form)),
-});
-
-export default connect(null, mapActionsToProps);

client/src/containers/Accounts/withAccountsTableActions.js

@@ -1,32 +1,8 @@
 import { connect } from 'react-redux';
-import t from 'store/types';
-import { fetchAccountsTable, setBulkAction } from 'store/accounts/accounts.actions';
+import { setAccountsTableState } from 'store/accounts/accounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestFetchAccountsTable: (query = {}) =>
-    dispatch(fetchAccountsTable({ query: { ...query } })),
-  changeAccountsCurrentView: (id) =>
-    dispatch({
-      type: t.ACCOUNTS_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    }),
-  setAccountsTableQuery: (key, value) =>
-    dispatch({
-      type: t.ACCOUNTS_TABLE_QUERY_SET,
-      key,
-      value,
-    }),
-  addAccountsTableQuery: (queries) =>
-    dispatch({
-      type: t.ACCOUNTS_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  setSelectedRowsAccounts: (selectedRows) =>
-    dispatch({
-      type: t.ACCOUNTS_SELECTED_ROWS_SET,
-      payload: { selectedRows },
-    }),
-  setAccountsBulkAction: (actionName) => setBulkAction(actionName),
+  setAccountsTableState: (queries) => dispatch(setAccountsTableState(queries)),
 });
 
 export default connect(null, mapActionsToProps);