refactoring: account form.

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

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -72,40 +72,38 @@ function InvoicesDataTable({
     [setInvoicesTableState],
   );
 
-  // Display invoice empty status.
+  // Display invoice empty status instead of the table.
   if (isEmptyStatus) {
     return <InvoicesEmptyStatus />;
   }
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        columns={columns}
-        data={invoices}
-        loading={isInvoicesLoading}
-        headerLoading={isInvoicesLoading}
-        progressBarLoading={isInvoicesFetching}
-        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        pagination={true}
-        manualPagination={true}
-        pagesCount={pagination.pagesCount}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-        ContextMenu={ActionsMenu}
-        payload={{
-          onDelete: handleDeleteInvoice,
-          onDeliver: handleDeliverInvoice,
-          onEdit: handleEditInvoice,
-          baseCurrency
-        }}
-      />
-    </div>
+    <DataTable
+      columns={columns}
+      data={invoices}
+      loading={isInvoicesLoading}
+      headerLoading={isInvoicesLoading}
+      progressBarLoading={isInvoicesFetching}
+      onFetchData={handleDataTableFetchData}
+      manualSortBy={true}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
+      pagination={true}
+      manualPagination={true}
+      pagesCount={pagination.pagesCount}
+      autoResetSortBy={false}
+      autoResetPage={false}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onDelete: handleDeleteInvoice,
+        onDeliver: handleDeliverInvoice,
+        onEdit: handleEditInvoice,
+        baseCurrency,
+      }}
+    />
   );
 }
 

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 
 import 'style/pages/SaleInvoice/List.scss';
 
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 import InvoiceActionsBar from './InvoiceActionsBar';
 import { InvoicesListProvider } from './InvoicesListProvider';
 
@@ -11,7 +10,6 @@ import InvoiceViewTabs from './InvoiceViewTabs';
 import InvoicesDataTable from './InvoicesDataTable';
 import InvoicesAlerts from '../InvoicesAlerts';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withInvoices from './withInvoices';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
@@ -21,18 +19,9 @@ import { transformTableStateToQuery, compose } from 'utils';
  * Sale invoices list.
  */
 function InvoicesList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withInvoice
   invoicesTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'invoices_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <InvoicesListProvider
       query={transformTableStateToQuery(invoicesTableState)}
@@ -41,7 +30,10 @@ function InvoicesList({
 
       <DashboardPageContent>
         <InvoiceViewTabs />
-        <InvoicesDataTable />
+
+        <DashboardContentTable>
+          <InvoicesDataTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <InvoicesAlerts />
@@ -50,7 +42,6 @@ function InvoicesList({
 }
 
 export default compose(
-  withDashboardActions,
   withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
   withAlertsActions,
 )(InvoicesList);