refactoring: account form.

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

client/src/containers/Vendors/VendorsLanding/VendorsList.js

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 
 import 'style/pages/Vendors/List.scss';
 
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import { VendorsListProvider } from './VendorsListProvider';
 import VendorActionsBar from './VendorActionsBar';
@@ -11,7 +10,6 @@ import VendorViewsTabs from './VendorViewsTabs';
 import VendorsAlerts from '../VendorsAlerts';
 import VendorsTable from './VendorsTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withVendors from './withVendors';
 
 import { transformTableStateToQuery, compose } from 'utils';
@@ -20,25 +18,20 @@ import { transformTableStateToQuery, compose } from 'utils';
  * Vendors list page.
  */
 function VendorsList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withVendors
   vendorsTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'vendors_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <VendorsListProvider query={transformTableStateToQuery(vendorsTableState)}>
       <VendorActionsBar />
 
       <DashboardPageContent>
         <VendorViewsTabs />
-        <VendorsTable />
+
+        <DashboardContentTable>
+          <VendorsTable />
+        </DashboardContentTable>
+
         <VendorsAlerts />
       </DashboardPageContent>
     </VendorsListProvider>
@@ -46,6 +39,5 @@ function VendorsList({
 }
 
 export default compose(
-  withDashboardActions,
   withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
 )(VendorsList);

client/src/containers/Vendors/VendorsLanding/VendorsTable.js

@@ -32,6 +32,7 @@ function VendorsTable({
     pagination,
     isVendorsFetching,
     isVendorsLoading,
+    isEmptyStatus
   } = useVendorsListContext();
 
   // Vendors table columns.
@@ -62,53 +63,37 @@ function VendorsTable({
     [setVendorsTableState],
   );
 
+  // Display empty status instead of the table.
+  if (isEmptyStatus) {
+    return <VendorsEmptyStatus />
+  }
+
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={false}>
-          <VendorsEmptyStatus />
-        </Choose.When>
-
-        <Choose.Otherwise>
-          <DataTable
-            noInitialFetch={true}
-            columns={columns}
-            data={vendors}
-
-            loading={isVendorsLoading}
-            headerLoading={isVendorsLoading}
-            progressBarLoading={isVendorsFetching}
-
-            onFetchData={handleFetchData}
-
-            selectionColumn={true}
-            expandable={false}
-            sticky={true}
-            
-            pagination={true}
-            manualSortBy={true}
-            pagesCount={pagination.pagesCount}
-
-            autoResetSortBy={false}
-            autoResetPage={false}
-
-            TableLoadingRenderer={TableSkeletonRows}
-            TableHeaderSkeletonRenderer={TableSkeletonHeader}
-
-            ContextMenu={ActionsMenu}
-
-            payload={{
-              onEdit: handleEditVendor,
-              onDelete: handleDeleteVendor,
-            }}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={vendors}
+      loading={isVendorsLoading}
+      headerLoading={isVendorsLoading}
+      progressBarLoading={isVendorsFetching}
+      onFetchData={handleFetchData}
+      selectionColumn={true}
+      expandable={false}
+      sticky={true}
+      pagination={true}
+      manualSortBy={true}
+      pagesCount={pagination.pagesCount}
+      autoResetSortBy={false}
+      autoResetPage={false}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditVendor,
+        onDelete: handleDeleteVendor,
+      }}
+    />
   );
 }
 
-export default compose(
-  withVendorsActions,
-  withAlertsActions
-)(VendorsTable);
+export default compose(withVendorsActions, withAlertsActions)(VendorsTable);