feat: move accounts data-table component to components file.

client/src/containers/Accounting/components.js

@@ -31,7 +31,7 @@ const AmountPopoverContentLineRender = ({
       </Choose.When>
 
       <Choose.When condition={isCredit}>
-        <div class={'ml1'}>
+        <div>
           D. <Money amount={journalEntry.credit} currency={'USD'} /> USD -{' '}
           {account.name} <If condition={account.code}>({account.code})</If>
         </div>

client/src/containers/Accounts/AccountsDataTable.js

@@ -6,18 +6,21 @@ import {
   MenuItem,
   MenuDivider,
   Position,
-  Classes,
-  Tooltip,
   Intent,
 } from '@blueprintjs/core';
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
-import { Icon, DataTable, Money, If, Choose } from 'components';
+import { Icon, DataTable, If } from 'components';
 import { compose } from 'utils';
 import { useUpdateEffect } from 'hooks';
 
 import { CLASSES } from 'common/classes';
+import { 
+  NormalCell,
+  BalanceCell,
+  AccountNameAccessor
+} from './components';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
@@ -26,82 +29,6 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCurrentView from 'containers/Views/withCurrentView';
 
 
-
-function NormalCell({ cell }) {
-  const { formatMessage } = useIntl();
-
-  const account = cell.row.original;
-  const normal = account?.type?.normal || '';
-  const arrowDirection = normal === 'credit' ? 'down' : 'up';
-
-  return (
-    <Tooltip
-      className={Classes.TOOLTIP_INDICATOR}
-      content={formatMessage({ id: normal })}
-      position={Position.RIGHT}
-      hoverOpenDelay={100}
-    >
-      <Icon icon={`arrow-${arrowDirection}`} />
-    </Tooltip>
-  );
-}
-
-function BalanceCell({ cell }) {
-  const account = cell.row.original;
-
-  return account.amount ? (
-    <span>
-      <Money amount={account.amount} currency={'USD'} />
-    </span>
-  ) : (
-    <span class="placeholder">—</span>
-  );
-}
-
-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>
-  );
-}
-
-function AccountNameAccessor(row) {
-  return (
-    <>
-      <Choose>
-        <Choose.When condition={!!row.description}>
-          <Tooltip
-            className={classNames(
-              Classes.TOOLTIP_INDICATOR,
-              'bp3-popover-wrapper--account-desc',
-            )}
-            content={row.description}
-            position={Position.RIGHT_TOP}
-            hoverOpenDelay={500}
-          >
-            {row.name}
-          </Tooltip>
-        </Choose.When>
-
-        <Choose.Otherwise>{row.name}</Choose.Otherwise>
-      </Choose>
-
-      <If condition={!row.active}>
-        <InactiveSemafro />
-      </If>
-    </>
-  );
-}
-
 function AccountsDataTable({
   // #withDashboardActions
   accountsTable,

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -1,12 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { useHistory } from 'react-router';
 import { connect } from 'react-redux';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
 import { useUpdateEffect } from 'hooks';
-import { DashboardViewsTabs, Icon } from 'components';
+import { DashboardViewsTabs } from 'components';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
@@ -34,7 +34,6 @@ function AccountsViewsTabs({
   customViewChanged,
   onViewChanged,
 }) {
-
   const history = useHistory();
   const { custom_view_id: customViewId = null } = useParams();