refactoring: account form.

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

client/src/containers/Purchases/Bills/BillForm/BillForm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
@@ -13,12 +13,10 @@ import BillFormHeader from './BillFormHeader';
 import BillFloatingActions from './BillFloatingActions';
 import BillFormFooter from './BillFormFooter';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
 import { AppToaster } from 'components';
 
 import { ERROR } from 'common/errors';
-import { compose, repeatValue, orderingLinesIndexes } from 'utils';
+import { repeatValue, orderingLinesIndexes } from 'utils';
 import BillFormBody from './BillFormBody';
 import { useBillFormContext } from './BillFormProvider';
 
@@ -47,10 +45,8 @@ const defaultInitialValues = {
 /**
  * Bill form.
  */
-function BillForm({
-  //#withDashboard
-  changePageTitle,
-  changePageSubtitle,
+export default function BillForm({
+ 
 }) {
   const { formatMessage } = useIntl();
   const history = useHistory();
@@ -65,14 +61,6 @@ function BillForm({
 
   const isNewMode = !billId;
 
-  useEffect(() => {
-    if (!isNewMode) {
-      changePageTitle(formatMessage({ id: 'edit_bill' }));
-    } else {
-      changePageTitle(formatMessage({ id: 'new_bill' }));
-    }
-  }, [changePageTitle, isNewMode, formatMessage]);
-
   // Initial values in create and edit mode.
   const initialValues = useMemo(
     () => ({
@@ -146,8 +134,6 @@ function BillForm({
       });
       setSubmitting(false);
 
-      changePageSubtitle('');
-
       if (submitPayload.redirect) {
         history.push('/bills');
       }
@@ -167,14 +153,6 @@ function BillForm({
     }
   };
 
-  // Handle bill number changed once the field blur.
-  const handleBillNumberChanged = useCallback(
-    (billNumber) => {
-      changePageSubtitle(billNumber);
-    },
-    [changePageSubtitle],
-  );
-
   return (
     <div
       className={classNames(
@@ -189,7 +167,7 @@ function BillForm({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <BillFormHeader onBillNumberChanged={handleBillNumberChanged} />
+          <BillFormHeader />
           <BillFormBody defaultBill={defaultBill} />
           <BillFormFooter />
           <BillFloatingActions />
@@ -198,5 +176,3 @@ function BillForm({
     </div>
   );
 }
-
-export default compose(withDashboardActions)(BillForm);

client/src/containers/Purchases/Bills/BillForm/BillFormBody.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
 import { useBillFormContext } from './BillFormProvider';
 
 export default function BillFormBody({ defaultBill }) {
@@ -9,11 +8,7 @@ export default function BillFormBody({ defaultBill }) {
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      <EditableItemsEntriesTable
-        items={items}
-        defaultEntry={defaultBill}
-        filterPurchasableItems={true}
-      />
+      
     </div>
   );
 }

client/src/containers/Purchases/Bills/BillForm/BillFormHeader.js

@@ -14,8 +14,6 @@ import { compose } from 'redux';
  * Fill form header.
  */
 function BillFormHeader({
-  onBillNumberChanged,
-
   // #withSettings
   baseCurrency,
 }) {
@@ -28,7 +26,7 @@ function BillFormHeader({
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <BillFormHeaderFields onBillNumberChanged={onBillNumberChanged} />
+      <BillFormHeaderFields />
       <PageFormBigNumber
         label={'Due Amount'}
         amount={totalDueAmount}

client/src/containers/Purchases/Bills/BillForm/BillFormPage.js

@@ -1,45 +1,17 @@
-import React, { useCallback, useEffect } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import BillForm from './BillForm';
-
 import { BillFormProvider } from './BillFormProvider';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
 
 import 'style/pages/Bills/PageForm.scss';
 
-function BillFormPage({
-  // #withDashboardActions
-  setSidebarShrink,
-  resetSidebarPreviousExpand,
-  setDashboardBackLink
-}) {
+export default function BillFormPage() {
   const { id } = useParams();
 
-  useEffect(() => {
-    // Shrink the sidebar by foce.
-    setSidebarShrink();
-    // Show the back link on dashboard topbar.
-    setDashboardBackLink(true);
-
-    return () => {
-      // Reset the sidebar to the previous status.
-      resetSidebarPreviousExpand();
-      // Hide the back link on dashboard topbar.
-      setDashboardBackLink(false);
-    };
-  }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
-
   return (
     <BillFormProvider billId={id}>
       <BillForm />
     </BillFormProvider>
   );
-}
-
-export default compose(
-
-  withDashboardActions
-)(BillFormPage);
+}

client/src/containers/Purchases/Bills/BillsLanding/BillsList.js

@@ -1,7 +1,5 @@
-import React, { useEffect } from 'react';
-
-import { useIntl } from 'react-intl';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import { BillsListProvider } from './BillsListProvider';
 
@@ -10,7 +8,6 @@ import BillsAlerts from './BillsAlerts';
 import BillsViewsTabs from './BillsViewsTabs';
 import BillsTable from './BillsTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withBills from './withBills';
 
 import { transformTableStateToQuery, compose } from 'utils';
@@ -19,25 +16,19 @@ import { transformTableStateToQuery, compose } from 'utils';
  * Bills list.
  */
 function BillsList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withBills
   billsTableState,
 }) {
-  const { formatMessage } = useIntl();
-  
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'bills_list' }));
-  }, [changePageTitle, formatMessage]);
-  
   return (
     <BillsListProvider query={transformTableStateToQuery(billsTableState)}>
       <BillsActionsBar />
 
       <DashboardPageContent>
         <BillsViewsTabs />
-        <BillsTable />
+
+        <DashboardContentTable>
+          <BillsTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <BillsAlerts />
@@ -46,6 +37,5 @@ function BillsList({
 }
 
 export default compose(
-  withDashboardActions,
   withBills(({ billsTableState }) => ({ billsTableState })),
 )(BillsList);

client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js

@@ -1,9 +1,7 @@
 import React, { useCallback } from 'react';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
 import { compose } from 'utils';
-import { CLASSES } from 'common/classes';
 
 import DataTable from 'components/DataTable';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -25,7 +23,7 @@ function BillsDataTable({
   setBillsTableState,
 
   // #withAlerts
-  openAlert
+  openAlert,
 }) {
   // Bills list context.
   const {
@@ -72,30 +70,28 @@ function BillsDataTable({
   }
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        columns={columns}
-        data={bills}
-        loading={isBillsLoading}
-        headerLoading={isBillsLoading}
-        progressBarLoading={isBillsFetching}
-        onFetchData={handleFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        pagination={true}
-        pagesCount={pagination.pagesCount}
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-        ContextMenu={ActionsMenu}
-        payload={{
-          onDelete: handleDeleteBill,
-          onEdit: handleEditBill,
-          onOpen: handleOpenBill
-        }}
-      />
-    </div>
+    <DataTable
+      columns={columns}
+      data={bills}
+      loading={isBillsLoading}
+      headerLoading={isBillsLoading}
+      progressBarLoading={isBillsFetching}
+      onFetchData={handleFetchData}
+      manualSortBy={true}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
+      pagination={true}
+      pagesCount={pagination.pagesCount}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onDelete: handleDeleteBill,
+        onEdit: handleEditBill,
+        onOpen: handleOpenBill,
+      }}
+    />
   );
 }
 

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js

@@ -1,14 +1,11 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
-
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 import PaymentMadeActionsBar from './PaymentMadeActionsBar';
 import PaymentMadesAlerts from '../PaymentMadesAlerts';
 import PaymentMadesTable from './PaymentMadesTable';
 import { PaymentMadesListProvider } from './PaymentMadesListProvider';
 import PaymentMadeViewTabs from './PaymentMadeViewTabs';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withPaymentMades from './withPaymentMade';
 
 import { compose, transformTableStateToQuery } from 'utils';
@@ -17,18 +14,9 @@ import { compose, transformTableStateToQuery } from 'utils';
  * Payment mades list.
  */
 function PaymentMadeList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withPaymentMades
   paymentMadesTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'payment_made_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <PaymentMadesListProvider
       query={transformTableStateToQuery(paymentMadesTableState)}
@@ -37,7 +25,10 @@ function PaymentMadeList({
 
       <DashboardPageContent>
         <PaymentMadeViewTabs />
-        <PaymentMadesTable />
+
+        <DashboardContentTable>
+          <PaymentMadesTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <PaymentMadesAlerts />
@@ -46,7 +37,6 @@ function PaymentMadeList({
 }
 
 export default compose(
-  withDashboardActions,
   withPaymentMades(({ paymentMadesTableState }) => ({
     paymentMadesTableState,
   })),

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js

@@ -23,7 +23,7 @@ function PaymentMadesTable({
   addPaymentMadesTableQueries,
 
   // #withAlerts
-  openAlert
+  openAlert,
 }) {
   // Payment mades table columns.
   const columns = usePaymentMadesTableColumns();
@@ -42,7 +42,7 @@ function PaymentMadesTable({
 
   // Handles the delete payment made action.
   const handleDeletePaymentMade = (paymentMade) => {
-    openAlert('payment-made-delete', { paymentMadeId: paymentMade.id })
+    openAlert('payment-made-delete', { paymentMadeId: paymentMade.id });
   };
 
   // Handle datatable fetch data once the table state change.
@@ -52,37 +52,36 @@ function PaymentMadesTable({
     },
     [addPaymentMadesTableQueries],
   );
-    
+
+  // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <PaymentMadesEmptyStatus />;
   }
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        columns={columns}
-        data={paymentMades}
-        onFetchData={handleDataTableFetchData}
-        loading={isPaymentsLoading}
-        headerLoading={isPaymentsLoading}
-        progressBarLoading={isPaymentsFetching}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        pagination={true}
-        pagesCount={pagination.pagesCount}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-        ContextMenu={ActionsMenu}
-        payload={{
-          onEdit: handleEditPaymentMade,
-          onDelete: handleDeletePaymentMade,
-        }}
-      />
-    </div>
+    <DataTable
+      columns={columns}
+      data={paymentMades}
+      onFetchData={handleDataTableFetchData}
+      loading={isPaymentsLoading}
+      headerLoading={isPaymentsLoading}
+      progressBarLoading={isPaymentsFetching}
+      manualSortBy={true}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
+      pagination={true}
+      pagesCount={pagination.pagesCount}
+      autoResetSortBy={false}
+      autoResetPage={false}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditPaymentMade,
+        onDelete: handleDeletePaymentMade,
+      }}
+    />
   );
 }