refactoring: account form.

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

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.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';
@@ -22,7 +22,6 @@ import ReceiptFromHeader from './ReceiptFormHeader';
 import ReceiptFormBody from './ReceiptFormBody';
 import ReceiptFormFloatingActions from './ReceiptFormFloatingActions';
 import ReceiptFormFooter from './ReceiptFormFooter';
-import ReceiptNumberWatcher from './ReceiptNumberWatcher';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -32,7 +31,6 @@ import {
   compose,
   repeatValue,
   orderingLinesIndexes,
-  defaultToTransform,
   transactionNumber,
 } from 'utils';
 
@@ -63,10 +61,6 @@ const defaultInitialValues = {
  * Receipt form.
  */
 function ReceiptForm({
-  // #withDashboard
-  changePageTitle,
-  changePageSubtitle,
-
   // #withSettings
   receiptNextNumber,
   receiptNumberPrefix,
@@ -91,28 +85,6 @@ function ReceiptForm({
     receiptNumberPrefix,
     receiptNextNumber,
   );
-  useEffect(() => {
-    const transactionNumber = !isNewMode
-      ? receipt.receipt_number
-      : receiptNumber;
-
-    if (receipt && receipt.id) {
-      changePageTitle(formatMessage({ id: 'edit_receipt' }));
-    } else {
-      changePageTitle(formatMessage({ id: 'new_receipt' }));
-    }
-    changePageSubtitle(
-      defaultToTransform(transactionNumber, `No. ${transactionNumber}`, ''),
-    );
-  }, [
-    isNewMode,
-    changePageTitle,
-    changePageSubtitle,
-    receipt,
-    receiptNumber,
-    formatMessage,
-  ]);
-
   // Initial values in create and edit mode.
   const initialValues = useMemo(
     () => ({
@@ -214,15 +186,6 @@ function ReceiptForm({
     }
   };
 
-  const handleReceiptNumberChanged = useCallback(
-    (receiptNumber) => {
-      changePageSubtitle(
-        defaultToTransform(receiptNumber, `No. ${receiptNumber}`, ''),
-      );
-    },
-    [changePageSubtitle],
-  );
-
   return (
     <div
       className={classNames(
@@ -239,10 +202,7 @@ function ReceiptForm({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <ReceiptFromHeader
-            onReceiptNumberChanged={handleReceiptNumberChanged}
-          />
-          <ReceiptNumberWatcher receiptNumber={receiptNumber} />
+          <ReceiptFromHeader />
           <ReceiptFormBody defaultReceipt={defaultReceipt} />
           <ReceiptFormFooter />
           <ReceiptFormFloatingActions />

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormBody.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
-import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
+// import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 
 export default function ExpenseFormBody({ defaultReceipt }) {
@@ -10,11 +10,11 @@ export default function ExpenseFormBody({ defaultReceipt }) {
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      <EditableItemsEntriesTable
+      {/* <EditableItemsEntriesTable
         items={items}
         defaultEntry={defaultReceipt}
         filterSellableItems={true}
-      />
+      /> */}
     </div>
   );
 }

client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormPage.js

@@ -1,57 +1,18 @@
-import React, { useEffect } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import ReceiptFrom from './ReceiptForm';
 import { ReceiptFormProvider } from './ReceiptFormProvider';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
-
 /**
  * Receipt form page.
  */
-function ReceiptFormPage({
-  // #withDashboardActions
-  setSidebarShrink,
-  resetSidebarPreviousExpand,
-  setDashboardBackLink,
-}) {
+export default function ReceiptFormPage() {
   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]);
-
-  
-  // const handleFormSubmit = useCallback(
-  //   (payload) => {
-  //     payload.redirect && history.push('/receipts');
-  //   },
-  //   [history],
-  // );
-
-  // const handleCancel = useCallback(() => {
-  //   history.goBack();
-  // }, [history]);
-
   return (
     <ReceiptFormProvider receiptId={id}>
       <ReceiptFrom />
     </ReceiptFormProvider>
   );
 }
-
-export default compose(
-  withDashboardActions,
-)(ReceiptFormPage);

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js

@@ -1,37 +1,23 @@
-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 ReceiptActionsBar from './ReceiptActionsBar';
 import ReceiptViewTabs from './ReceiptViewTabs';
 import ReceiptsAlerts from '../ReceiptsAlerts';
 import ReceiptsTable from './ReceiptsTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withReceipts from './withReceipts';
 
 import { ReceiptsListProvider } from './ReceiptsListProvider';
-
 import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Receipts list page.
  */
 function ReceiptsList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withReceipts
   receiptTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  // Changes the dashboard page title once the page mount.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'receipts_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <ReceiptsListProvider query={transformTableStateToQuery(receiptTableState)}>
       <DashboardPageContent>
@@ -39,7 +25,10 @@ function ReceiptsList({
 
         <DashboardPageContent>
           <ReceiptViewTabs />
-          <ReceiptsTable />
+
+          <DashboardContentTable>
+            <ReceiptsTable />
+          </DashboardContentTable>
         </DashboardPageContent>
 
         <ReceiptsAlerts />
@@ -49,7 +38,6 @@ function ReceiptsList({
 }
 
 export default compose(
-  withDashboardActions,
   withReceipts(({ receiptTableState }) => ({
     receiptTableState,
   })),

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.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';
 
 import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
@@ -29,7 +27,7 @@ function ReceiptsDataTable({
   baseCurrency,
 
   // #withAlertsActions
-  openAlert
+  openAlert,
 }) {
   const history = useHistory();
 
@@ -39,7 +37,7 @@ function ReceiptsDataTable({
     pagination,
     isReceiptsFetching,
     isReceiptsLoading,
-    isEmptyStatus
+    isEmptyStatus,
   } = useReceiptsListContext();
 
   // Receipts table columns.
@@ -58,7 +56,7 @@ function ReceiptsDataTable({
   // Handles receipt close action.
   const handleCloseReceipt = (receipt) => {
     openAlert('receipt-close', { receiptId: receipt.id });
-  }
+  };
 
   // Handles the datable fetch data once the state changing.
   const handleDataTableFetchData = useCallback(
@@ -73,44 +71,36 @@ function ReceiptsDataTable({
   );
 
   if (isEmptyStatus) {
-    return <ReceiptsEmptyStatus />
+    return <ReceiptsEmptyStatus />;
   }
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        columns={columns}
-        data={receipts}
-
-        loading={isReceiptsLoading}
-        headerLoading={isReceiptsLoading}
-        progressBarLoading={isReceiptsFetching}
-
-        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        pagination={true}
-        pagesCount={pagination.pagesCount}
-
-        manualPagination={true}
-
-        autoResetSortBy={false}
-        autoResetPage={false}
-
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-        ContextMenu={ActionsMenu}
-
-        payload={{
-          onEdit: handleEditReceipt,
-          onDelete: handleDeleteReceipt,
-          onClose: handleCloseReceipt,
-          baseCurrency
-        }}
-      />
-    </div>
+    <DataTable
+      columns={columns}
+      data={receipts}
+      loading={isReceiptsLoading}
+      headerLoading={isReceiptsLoading}
+      progressBarLoading={isReceiptsFetching}
+      onFetchData={handleDataTableFetchData}
+      manualSortBy={true}
+      selectionColumn={true}
+      noInitialFetch={true}
+      sticky={true}
+      pagination={true}
+      pagesCount={pagination.pagesCount}
+      manualPagination={true}
+      autoResetSortBy={false}
+      autoResetPage={false}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onEdit: handleEditReceipt,
+        onDelete: handleDeleteReceipt,
+        onClose: handleCloseReceipt,
+        baseCurrency,
+      }}
+    />
   );
 }