refactoring: account form.

refactoring: expense form.
refactoring: manual journal form.
refactoring: invoice form.

client/src/containers/Accounts/AccountsChart.js

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 
 import 'style/pages/Accounts/List.scss';
+import { DashboardPageContent, DashboardContentTable } from 'components';
 
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { AccountsChartProvider } from './AccountsChartProvider';
 
 import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
@@ -11,7 +10,6 @@ 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 { transformTableStateToQuery, compose } from 'utils';
@@ -20,18 +18,9 @@ import { transformTableStateToQuery, compose } from 'utils';
  * Accounts chart list.
  */
 function AccountsChart({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withAccounts
   accountsTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'chart_of_accounts' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <AccountsChartProvider
       query={transformTableStateToQuery(accountsTableState)}
@@ -40,7 +29,10 @@ function AccountsChart({
 
       <DashboardPageContent>
         <AccountsViewsTabs />
-        <AccountsDataTable />
+
+        <DashboardContentTable>
+          <AccountsDataTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <AccountsAlerts />
@@ -49,6 +41,5 @@ function AccountsChart({
 }
 
 export default compose(
-  withDashboardActions,
   withAccounts(({ accountsTableState }) => ({ accountsTableState })),
 )(AccountsChart);

client/src/containers/Accounts/AccountsDataTable.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import classNames from 'classnames';
 
 import { TableFastCell, DataTable } from 'components';
 import { compose } from 'utils';
 
-import { CLASSES } from 'common/classes';
-
 import { useAccountsTableColumns, rowClassNames } from './utils';
 import { ActionsMenu } from './components';
 
@@ -72,48 +69,46 @@ function AccountsDataTable({
   };
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        noInitialFetch={true}
-        columns={columns}
-        data={accounts}
-        selectionColumn={true}
-        expandable={true}
-        sticky={true}
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={accounts}
+      selectionColumn={true}
+      expandable={true}
+      sticky={true}
 
-        loading={isAccountsLoading}
-        headerLoading={isAccountsLoading}
-        progressBarLoading={isAccountsFetching}
-        
-        rowClassNames={rowClassNames}
+      loading={isAccountsLoading}
+      headerLoading={isAccountsLoading}
+      progressBarLoading={isAccountsFetching}
+      
+      rowClassNames={rowClassNames}
 
-        autoResetExpanded={false}
-        autoResetSortBy={false}
-        autoResetSelectedRows={false}
+      autoResetExpanded={false}
+      autoResetSortBy={false}
+      autoResetSelectedRows={false}
 
-        expandColumnSpace={1}
-        expandToggleColumn={2}
-        selectionColumnWidth={50}
+      expandColumnSpace={1}
+      expandToggleColumn={2}
+      selectionColumnWidth={50}
 
-        TableCellRenderer={TableFastCell}
-        TableRowsRenderer={TableVirtualizedListRows}
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-        ContextMenu={ActionsMenu}
+      TableCellRenderer={TableFastCell}
+      TableRowsRenderer={TableVirtualizedListRows}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
 
-        // #TableVirtualizedListRows props.
-        vListrowHeight={42}
-        vListOverscanRowCount={10}
+      // #TableVirtualizedListRows props.
+      vListrowHeight={42}
+      vListOverscanRowCount={10}
 
-        payload={{
-          onEdit: handleEditAccount,
-          onDelete: handleDeleteAccount,
-          onActivate: handleActivateAccount,
-          onInactivate: handleInactivateAccount,
-          newChild: handleNewChildAccount
-        }}
-      />
-    </div>
+      payload={{
+        onEdit: handleEditAccount,
+        onDelete: handleDeleteAccount,
+        onActivate: handleActivateAccount,
+        onInactivate: handleInactivateAccount,
+        newChild: handleNewChildAccount
+      }}
+    />
   );
 }