refactoring: account form.

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

client/src/containers/Customers/CustomerForm/CustomerForm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
@@ -14,7 +14,6 @@ import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
 import CustomersTabs from './CustomersTabs';
 import CustomerFloatingActions from './CustomerFloatingActions';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
 
 import { compose, transformToForm } from 'utils';
@@ -61,9 +60,6 @@ const defaultInitialValues = {
  * Customer form.
  */
 function CustomerForm({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withSettings
   baseCurrency,
 }) {
@@ -90,13 +86,7 @@ function CustomerForm({
     }),
     [customer, baseCurrency],
   );
-
-  useEffect(() => {
-    !isNewMode
-      ? changePageTitle(formatMessage({ id: 'edit_customer' }))
-      : changePageTitle(formatMessage({ id: 'new_customer' }));
-  }, [changePageTitle, isNewMode, formatMessage]);
-
+ 
   //Handles the form submit.
   const handleFormSubmit = (
     values,
@@ -165,5 +155,4 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     baseCurrency: organizationSettings?.baseCurrency,
   })),
-  withDashboardActions,
 )(CustomerForm);

client/src/containers/Customers/CustomerForm/CustomerForm.schema.js

@@ -1,49 +1,48 @@
 import * as Yup from 'yup';
 import { formatMessage } from 'services/intl';
 
-
 const Schema = Yup.object().shape({
-    customer_type: Yup.string()
-      .required()
-      .trim()
-      .label(formatMessage({ id: 'customer_type_' })),
-    salutation: Yup.string().trim(),
-    first_name: Yup.string().trim(),
-    last_name: Yup.string().trim(),
-    company_name: Yup.string().trim(),
-    display_name: Yup.string()
-      .trim()
-      .required()
-      .label(formatMessage({ id: 'display_name_' })),
+  customer_type: Yup.string()
+    .required()
+    .trim()
+    .label(formatMessage({ id: 'customer_type_' })),
+  salutation: Yup.string().trim(),
+  first_name: Yup.string().trim(),
+  last_name: Yup.string().trim(),
+  company_name: Yup.string().trim(),
+  display_name: Yup.string()
+    .trim()
+    .required()
+    .label(formatMessage({ id: 'display_name_' })),
 
-    email: Yup.string().email().nullable(),
-    work_phone: Yup.number(),
-    personal_phone: Yup.number(),
-    website: Yup.string().url().nullable(),
+  email: Yup.string().email().nullable(),
+  work_phone: Yup.number(),
+  personal_phone: Yup.number(),
+  website: Yup.string().url().nullable(),
 
-    active: Yup.boolean(),
-    note: Yup.string().trim(),
+  active: Yup.boolean(),
+  note: Yup.string().trim(),
 
-    billing_address_country: Yup.string().trim(),
-    billing_address_1: Yup.string().trim(),
-    billing_address_2: Yup.string().trim(),
-    billing_address_city: Yup.string().trim(),
-    billing_address_state: Yup.string().trim(),
-    billing_address_postcode: Yup.number().nullable(),
-    billing_address_phone: Yup.number(),
+  billing_address_country: Yup.string().trim(),
+  billing_address_1: Yup.string().trim(),
+  billing_address_2: Yup.string().trim(),
+  billing_address_city: Yup.string().trim(),
+  billing_address_state: Yup.string().trim(),
+  billing_address_postcode: Yup.number().nullable(),
+  billing_address_phone: Yup.number(),
 
-    shipping_address_country: Yup.string().trim(),
-    shipping_address_1: Yup.string().trim(),
-    shipping_address_2: Yup.string().trim(),
-    shipping_address_city: Yup.string().trim(),
-    shipping_address_state: Yup.string().trim(),
-    shipping_address_postcode: Yup.number().nullable(),
-    shipping_address_phone: Yup.number(),
+  shipping_address_country: Yup.string().trim(),
+  shipping_address_1: Yup.string().trim(),
+  shipping_address_2: Yup.string().trim(),
+  shipping_address_city: Yup.string().trim(),
+  shipping_address_state: Yup.string().trim(),
+  shipping_address_postcode: Yup.number().nullable(),
+  shipping_address_phone: Yup.number(),
 
-    opening_balance: Yup.number().nullable(),
-    currency_code: Yup.string(),
-    opening_balance_at: Yup.date(),
-  });
+  opening_balance: Yup.number().nullable(),
+  currency_code: Yup.string(),
+  opening_balance_at: Yup.date(),
+});
 
 export const CreateCustomerForm = Schema;
-export const EditCustomerForm = Schema;
+export const EditCustomerForm = Schema;

client/src/containers/Customers/CustomersLanding/CustomersList.js

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 
 import 'style/pages/Customers/List.scss';
 
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import CustomersActionsBar from './CustomersActionsBar';
 import CustomersViewsTabs from './CustomersViewsTabs';
@@ -12,27 +11,15 @@ import CustomersAlerts from 'containers/Customers/CustomersAlerts';
 import { CustomersListProvider } from './CustomersListProvider';
 
 import withCustomers from './withCustomers';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
 import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Customers list.
  */
 function CustomersList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withCustomers
   customersTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  // Changes the dashboard page title once the page mount.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'customers_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <CustomersListProvider
       query={transformTableStateToQuery(customersTableState)}
@@ -41,7 +28,10 @@ function CustomersList({
 
       <DashboardPageContent>
         <CustomersViewsTabs />
-        <CustomersTable />
+
+        <DashboardContentTable>
+          <CustomersTable />
+        </DashboardContentTable>
       </DashboardPageContent>
       <CustomersAlerts />
     </CustomersListProvider>
@@ -49,6 +39,5 @@ function CustomersList({
 }
 
 export default compose(
-  withDashboardActions,
   withCustomers(({ customersTableState }) => ({ customersTableState })),
 )(CustomersList);

client/src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
 import CustomersEmptyStatus from './CustomersEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
-import { DataTable, Choose } from 'components';
-import { CLASSES } from 'common/classes';
+import { DataTable } from 'components';
 
 import withCustomersActions from './withCustomersActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -23,10 +21,10 @@ import { compose } from 'utils';
  */
 function CustomersTable({
   // #withCustomersActions
-  setCustomersTableState, 
+  setCustomersTableState,
 
   // #withAlerts
-  openAlert
+  openAlert,
 }) {
   const history = useHistory();
 
@@ -56,60 +54,47 @@ function CustomersTable({
 
   // Handles the customer delete action.
   const handleCustomerDelete = (customer) => {
-    openAlert('customer-delete', { customerId: customer.id })
+    openAlert('customer-delete', { customerId: customer.id });
   };
 
   // Handle the customer edit action.
   const handleCustomerEdit = (customer) => {
     history.push(`/customers/${customer.id}/edit`);
   };
- 
+
+  if (isEmptyStatus) {
+    return <CustomersEmptyStatus />;
+  }
+
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={isEmptyStatus}>
-          <CustomersEmptyStatus />
-        </Choose.When>
-
-        <Choose.Otherwise>
-          <DataTable
-            noInitialFetch={true}
-            columns={columns}
-            data={customers}
-
-            loading={isCustomersLoading}
-            headerLoading={isCustomersLoading}
-            progressBarLoading={isCustomersFetching}
-
-            onFetchData={handleFetchData}
-            selectionColumn={true}
-            expandable={false}
-            sticky={true}
-
-            spinnerProps={{ size: 30 }}
-
-            pagination={true}
-            manualSortBy={true}
-            manualPagination={true}
-            pagesCount={pagination.pagesCount}
-
-            autoResetSortBy={false}
-            autoResetPage={false}
-
-            TableLoadingRenderer={TableSkeletonRows}
-            TableHeaderSkeletonRenderer={TableSkeletonHeader}
-
-            payload={{
-              onDelete: handleCustomerDelete,
-              onEdit: handleCustomerEdit,
-            }}
-            ContextMenu={ActionsMenu}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={customers}
+      loading={isCustomersLoading}
+      headerLoading={isCustomersLoading}
+      progressBarLoading={isCustomersFetching}
+      onFetchData={handleFetchData}
+      selectionColumn={true}
+      expandable={false}
+      sticky={true}
+      spinnerProps={{ size: 30 }}
+      pagination={true}
+      manualSortBy={true}
+      manualPagination={true}
+      pagesCount={pagination.pagesCount}
+      autoResetSortBy={false}
+      autoResetPage={false}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      payload={{
+        onDelete: handleCustomerDelete,
+        onEdit: handleCustomerEdit,
+      }}
+      ContextMenu={ActionsMenu}
+    />
   );
-};
+}
 
 export default compose(
   withAlertsActions,