refactoring: account form.

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

client/src/containers/ItemsCategories/ItemCategoriesList.js

@@ -1,46 +1,25 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { useIntl } from 'react-intl';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import ItemsCategoriesAlerts from './ItemsCategoriesAlerts';
 import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
 import { ItemsCategoriesProvider } from './ItemsCategoriesProvider';
 import ItemCategoriesTable from './ItemCategoriesTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import { compose } from 'utils';
-
 /**
  * Item categories list.
  */
-const ItemCategoryList = ({
-  // #withDashboardActions
-  changePageTitle,
-}) => {
-  const { id } = useParams();
-  const { formatMessage } = useIntl();
-
-  // Changes the dashboard page title once the page mount.
-  useEffect(() => {
-    id
-      ? changePageTitle(formatMessage({ id: 'edit_category_details' }))
-      : changePageTitle(formatMessage({ id: 'category_list' }));
-  }, [id, changePageTitle, formatMessage]);
-
+export default function ItemCategoryList() {
   return (
     <ItemsCategoriesProvider query={{}}>
       <ItemsCategoryActionsBar />
 
       <DashboardPageContent>
-        <ItemCategoriesTable />
+        <DashboardContentTable>
+          <ItemCategoriesTable />
+        </DashboardContentTable>
       </DashboardPageContent>
       <ItemsCategoriesAlerts />
     </ItemsCategoriesProvider>
   );
-};
-
-export default compose(
-  withDashboardActions,
-)(ItemCategoryList);
+}

client/src/containers/ItemsCategories/ItemCategoriesTable.js

@@ -24,7 +24,7 @@ function ItemsCategoryTable({
   openDialog,
 
   // #withAlertActions
-  openAlert
+  openAlert,
 }) {
   // Items categories context.
   const {
@@ -49,34 +49,27 @@ function ItemsCategoryTable({
   };
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        noInitialFetch={true}
-        columns={columns}
-        data={itemsCategories}
-
-        loading={isCategoriesLoading}
-        headerLoading={isCategoriesLoading}
-        progressBarLoading={isCategoriesFetching}
-
-        manualSortBy={true}
-        expandable={true}
-        sticky={true}
-        selectionColumn={true}
-        TableLoadingRenderer={TableSkeletonRows}
-        noResults={'There is no items categories in table yet.'}
-        payload={{
-          onDeleteCategory: handleDeleteCategory,
-          onEditCategory: handleEditCategory
-        }}
-        ContextMenu={ActionMenuList}
-        {...tableProps}
-      />
-    </div>
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={itemsCategories}
+      loading={isCategoriesLoading}
+      headerLoading={isCategoriesLoading}
+      progressBarLoading={isCategoriesFetching}
+      manualSortBy={true}
+      expandable={true}
+      sticky={true}
+      selectionColumn={true}
+      TableLoadingRenderer={TableSkeletonRows}
+      noResults={'There is no items categories in table yet.'}
+      payload={{
+        onDeleteCategory: handleDeleteCategory,
+        onEditCategory: handleEditCategory,
+      }}
+      ContextMenu={ActionMenuList}
+      {...tableProps}
+    />
   );
 }
 
-export default compose(
-  withDialogActions,
-  withAlertActions,
-)(ItemsCategoryTable);
+export default compose(withDialogActions, withAlertActions)(ItemsCategoryTable);