refactoring: account form.

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

client/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js

@@ -13,70 +13,55 @@ import { FormattedMessage as T } from 'react-intl';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { saveInvoke } from 'utils';
 import { If, Icon } from 'components';
+import { useEstimateFormContext } from './EstimateFormProvider';
 
 /**
  * Estimate floating actions bar.
  */
-export default function EstimateFloatingActions({
-  isSubmitting,
-  onSubmitClick,
-  onCancelClick,
-  estimate,
-}) {
-  const { resetForm, submitForm } = useFormikContext();
+export default function EstimateFloatingActions() {
+  const { resetForm, submitForm, isSubmitting } = useFormikContext();
 
+  // Estimate form context.
+  const { estimate, setSubmitPayload } = useEstimateFormContext();
+
+  // Handle submit & deliver button click.
   const handleSubmitDeliverBtnClick = (event) => {
-    saveInvoke(onSubmitClick, event, {
-      redirect: true,
-      deliver: true,
-    });
+    setSubmitPayload({ redirect: true, deliver: true, });
   };
 
+  // Handle submit, deliver & new button click.
   const handleSubmitDeliverAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: true, resetForm: true });
     submitForm();
-    saveInvoke(onSubmitClick, event, {
-      redirect: false,
-      deliver: true,
-      resetForm: true,
-    });
   };
 
+  // Handle submit, deliver & continue editing button click.
   const handleSubmitDeliverContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: true });
     submitForm();
-    saveInvoke(onSubmitClick, event, {
-      redirect: false,
-      deliver: true,
-    });
   };
 
+  // Handle submit as draft button click.
   const handleSubmitDraftBtnClick = (event) => {
-    saveInvoke(onSubmitClick, event, {
-      redirect: true,
-      deliver: false,
-    });
+    setSubmitPayload({ redirect: true, deliver: false });
+    submitForm();
   };
 
+  // Handle submit as draft & new button click.
   const handleSubmitDraftAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: false, resetForm: true });
     submitForm();
-    saveInvoke(onSubmitClick, event, {
-      redirect: false,
-      deliver: false,
-      resetForm: true,
-    });
   };
 
+  // Handle submit as draft & continue editing button click.
   const handleSubmitDraftContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, deliver: false });
     submitForm();
-    saveInvoke(onSubmitClick, event, {
-      redirect: false,
-      deliver: false,
-    });
   };
 
   const handleCancelBtnClick = (event) => {
-    saveInvoke(onCancelClick, event);
+    
   };
 
   const handleClearBtnClick = (event) => {
@@ -90,6 +75,7 @@ export default function EstimateFloatingActions({
         <ButtonGroup>
           <Button
             disabled={isSubmitting}
+            loading={isSubmitting}
             intent={Intent.PRIMARY}
             type="submit"
             onClick={handleSubmitDeliverBtnClick}

client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
@@ -17,10 +17,6 @@ import EstimateFormHeader from './EstimateFormHeader';
 import EstimateFormBody from './EstimateFormBody';
 import EstimateFloatingActions from './EstimateFloatingActions';
 import EstimateFormFooter from './EstimateFormFooter';
-import EstimateNumberWatcher from './EstimateNumberWatcher';
-
-import withEstimateActions from './withEstimateActions';
-import withEstimateDetail from './withEstimateDetail';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withMediaActions from 'containers/Media/withMediaActions';
@@ -28,13 +24,12 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { AppToaster } from 'components';
 import { ERROR } from 'common/errors';
-
 import {
   compose,
   repeatValue,
-  defaultToTransform,
   orderingLinesIndexes,
 } from 'utils';
+import { useEstimateFormContext } from './EstimateFormProvider';
 
 const MIN_LINES_NUMBER = 4;
 
@@ -63,64 +58,25 @@ const defaultInitialValues = {
  * Estimate form.
  */
 const EstimateForm = ({
-  // #WithMedia
-  requestSubmitMedia,
-  requestDeleteMedia,
-
-  // #WithEstimateActions
-  requestSubmitEstimate,
-  requestEditEstimate,
-  setEstimateNumberChanged,
-
-  //#withDashboard
-  changePageTitle,
-  changePageSubtitle,
-
   // #withSettings
   estimateNextNumber,
   estimateNumberPrefix,
-
-  //#withEstimateDetail
-  estimate,
-
-  // #withEstimates
-  estimateNumberChanged,
-
-  //#own Props
-  estimateId,
-  onFormSubmit,
-  onCancelForm,
 }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
-  const [submitPayload, setSubmitPayload] = useState({});
 
-  const isNewMode = !estimateId;
+  const {
+    estimate,
+    isNewMode,
+    submitPayload,
+    createEstimateMutate,
+    editEstimateMutate,
+  } = useEstimateFormContext();
 
   const estimateNumber = estimateNumberPrefix
     ? `${estimateNumberPrefix}-${estimateNextNumber}`
     : estimateNextNumber;
 
-  useEffect(() => {
-    const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
-
-    if (!isNewMode) {
-      changePageTitle(formatMessage({ id: 'edit_estimate' }));
-    } else {
-      changePageTitle(formatMessage({ id: 'new_estimate' }));
-    }
-    changePageSubtitle(
-      defaultToTransform(estimateNumber, `No. ${transNumber}`, ''),
-    );
-  }, [
-    estimate,
-    estimateNumber,
-    isNewMode,
-    formatMessage,
-    changePageTitle,
-    changePageSubtitle,
-  ]);
-
   // Initial values in create and edit mode.
   const initialValues = useMemo(
     () => ({
@@ -167,7 +123,6 @@ const EstimateForm = ({
     const entries = values.entries.filter(
       (item) => item.item_id && item.quantity,
     );
-
     const totalQuantity = sumBy(entries, (entry) => parseInt(entry.quantity));
 
     if (totalQuantity === 0) {
@@ -218,35 +173,12 @@ const EstimateForm = ({
     };
 
     if (estimate && estimate.id) {
-      requestEditEstimate(estimate.id, form).then(onSuccess).catch(onError);
+      editEstimateMutate([estimate.id, form]).then(onSuccess).catch(onError);
     } else {
-      requestSubmitEstimate(form).then(onSuccess).catch(onError);
+      createEstimateMutate(form).then(onSuccess).catch(onError);
     }
   };
 
-  const handleEstimateNumberChange = useCallback(
-    (estimateNumber) => {
-      changePageSubtitle(
-        defaultToTransform(estimateNumber, `No. ${estimateNumber}`, ''),
-      );
-    },
-    [changePageSubtitle],
-  );
-
-  const handleSubmitClick = useCallback(
-    (event, payload) => {
-      setSubmitPayload({ ...payload });
-    },
-    [setSubmitPayload],
-  );
-
-  const handleCancelClick = useCallback(
-    (event) => {
-      history.goBack();
-    },
-    [history],
-  );
-
   return (
     <div
       className={classNames(
@@ -262,30 +194,18 @@ const EstimateForm = ({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {({ isSubmitting}) => (
-          <Form>
-            <EstimateFormHeader
-              onEstimateNumberChanged={handleEstimateNumberChange}
-            />
-            <EstimateNumberWatcher estimateNumber={estimateNumber} />
-            <EstimateFormBody defaultEstimate={defaultEstimate} />
-            <EstimateFormFooter />
-            <EstimateFloatingActions
-              isSubmitting={isSubmitting}
-              estimate={estimate}
-              onSubmitClick={handleSubmitClick}
-              onCancelClick={handleCancelClick}
-            />
-          </Form>
-        )}
+        <Form>
+          <EstimateFormHeader />
+          <EstimateFormBody defaultEstimate={defaultEstimate} />
+          <EstimateFormFooter />
+          <EstimateFloatingActions />
+        </Form>
       </Formik>
     </div>
   );
 };
 
 export default compose(
-  withEstimateActions,
-  withEstimateDetail(),
   withDashboardActions,
   withMediaActions,
   withSettings(({ estimatesSettings }) => ({

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormBody.js

@@ -1,15 +1,15 @@
 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';
 
 export default function EstimateFormBody({ defaultEstimate }) {
   return (
     <div className={classNames(CLASSES.PAGE_FORM_BODY)}>
-      <EditableItemsEntriesTable
+      {/* <EditableItemsEntriesTable
         defaultEntry={defaultEstimate}
         filterSellableItems={true}
-      />
+      /> */}
     </div>
   );
 }

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js

@@ -12,9 +12,6 @@ import { compose } from 'utils';
 
 // Estimate form top header.
 function EstimateFormHeader({
-  // #ownProps
-  onEstimateNumberChanged,
-
   // #withSettings
   baseCurrency,
 }) {
@@ -27,9 +24,7 @@ function EstimateFormHeader({
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
-      <EstimateFormHeaderFields
-        onEstimateNumberChanged={onEstimateNumberChanged}
-      />
+      <EstimateFormHeaderFields />
       <PageFormBigNumber
         label={'Amount'}
         amount={totalDueAmount}

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
   FormGroup,
   InputGroup,
@@ -8,7 +8,7 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import { FastField, ErrorMessage } from 'formik';
-import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
@@ -16,30 +16,25 @@ import {
   FieldRequiredHint,
   Icon,
   InputPrependButton,
-  Row,
-  Col,
 } from 'components';
 
 import withCustomers from 'containers/Customers/withCustomers';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
 import { inputIntent, handleDateChange } from 'utils';
-import { formatMessage } from 'services/intl';
+import { useEstimateFormContext } from './EstimateFormProvider';
 
+/**
+ * Estimate form header.
+ */
 function EstimateFormHeader({
-  //#withCustomers
-  customers,
   // #withDialogActions
   openDialog,
-  // #ownProps
-  onEstimateNumberChanged,
 }) {
-  const handleEstimateNumberChange = useCallback(() => {
-    openDialog('estimate-number-form', {});
-  }, [openDialog]);
+  const { customers } = useEstimateFormContext();
 
-  const handleEstimateNumberChanged = (event) => {
-    saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
+  const handleEstimateNumberChange = () => {
+    openDialog('estimate-number-form', {});
   };
 
   return (
@@ -138,7 +133,6 @@ function EstimateFormHeader({
               <InputGroup
                 minimal={true}
                 {...field}
-                onBlur={handleEstimateNumberChanged}
               />
               <InputPrependButton
                 buttonProps={{

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormPage.js

@@ -1,39 +1,24 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
-import { useQuery } from 'react-query';
-
-import EstimateForm from './EstimateForm';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
-import withCustomersActions from 'containers/Customers/withCustomersActions';
-import withItemsActions from 'containers/Items/withItemsActions';
-import withEstimateActions from './withEstimateActions';
-import withSettingsActions from 'containers/Settings/withSettingsActions';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
-
+ 
 import 'style/pages/SaleEstimate/PageForm.scss';
 
+import EstimateForm from './EstimateForm';
+ 
+import { EstimateFormProvider } from './EstimateFormProvider';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { compose } from 'utils';
+
+/**
+ * Estimate form page.
+ */
 function EstimateFormPage({
-  // #withCustomersActions
-  requestFetchCustomers,
-
-  // #withItemsActions
-  requestFetchItems,
-
-  // #withEstimateActions
-  requestFetchEstimate,
-
-  // #withSettingsActions
-  requestFetchOptions,
-
   // #withDashboardActions
   setSidebarShrink,
   resetSidebarPreviousExpand,
   setDashboardBackLink,
 }) {
-  const history = useHistory();
+  
   const { id } = useParams();
 
   useEffect(() => {
@@ -50,55 +35,15 @@ function EstimateFormPage({
     };
   }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
 
-  const fetchEstimate = useQuery(
-    ['estimate', id],
-    (key, _id) => requestFetchEstimate(_id),
-    { enabled: !!id },
-  );
-
-  // Handle fetch Items data table or list
-  const fetchItems = useQuery('items-list', () => requestFetchItems({}));
-
-  // Handle fetch customers data table or list
-  const fetchCustomers = useQuery('customers-table', () =>
-    requestFetchCustomers({}),
-  );
-
-  //
-  const handleFormSubmit = useCallback(
-    (payload) => {
-      payload.redirect && history.push('/estimates');
-    },
-    [history],
-  );
-  const handleCancel = useCallback(() => {
-    history.goBack();
-  }, [history]);
-
-  const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
-
+ 
   return (
-    <DashboardInsider
-      loading={
-        fetchCustomers.isFetching ||
-        fetchItems.isFetching ||
-        fetchEstimate.isFetching
-      }
-      name={'estimate-form'}
-    >
-      <EstimateForm
-        estimateId={id}
-        onFormSubmit={handleFormSubmit}
-        onCancelForm={handleCancel}
-      />
-    </DashboardInsider>
+    <EstimateFormProvider estimateId={id}>
+      <EstimateForm />
+    </EstimateFormProvider>
   );
 }
 
 export default compose(
-  withEstimateActions,
-  withCustomersActions,
-  withItemsActions,
-  withSettingsActions,
+ 
   withDashboardActions,
 )(EstimateFormPage);

client/src/containers/Sales/Estimates/EstimateForm/EstimateFormProvider.js

@@ -0,0 +1,76 @@
+import React, { createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useEstimate,
+  useCustomers,
+  useItems,
+  useSettings,
+  useCreateEstimate,
+  useEditEstimate
+} from 'query/hooks';
+
+const EstimateFormContext = createContext();
+
+/**
+ * Estimate form provider.
+ */
+function EstimateFormProvider({ estimateId, ...props }) {
+  const { data: estimate, isFetching: isEstimateFetching } = useEstimate(
+    estimateId,
+  );
+
+  // Handle fetch Items data table or list
+  const {
+    data: { items },
+    isFetching: isItemsFetching,
+  } = useItems();
+
+  // Handle fetch customers data table or list
+  const {
+    data: { customers },
+    isFetch: isCustomersFetching,
+  } = useCustomers();
+
+  // Handle fetch settings.
+  const {
+    data: { settings },
+  } = useSettings();
+
+  const [submitPayload, setSubmitPayload] = React.useState({});
+
+  const isNewMode = !estimateId;
+
+  const { mutateAsync: createEstimateMutate } = useCreateEstimate();
+  const { mutateAsync: editEstimateMutate } = useEditEstimate();
+
+  // Provider payload.
+  const provider = {
+    estimateId,
+    estimate,
+    items,
+    customers,
+    isNewMode,
+
+    isItemsFetching,
+    isEstimateFetching,
+
+    submitPayload,
+    setSubmitPayload,
+
+    createEstimateMutate,
+    editEstimateMutate
+  };
+
+  return (
+    <DashboardInsider
+      loading={isCustomersFetching || isItemsFetching || isEstimateFetching}
+      name={'estimate-form'}
+    >
+      <EstimateFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useEstimateFormContext = () => useContext(EstimateFormContext);
+
+export { EstimateFormProvider, useEstimateFormContext };

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js

@@ -17,7 +17,6 @@ import withAlertsActions from 'containers/Alert/withAlertActions';
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { ActionsMenu, useEstiamtesTableColumns } from './components';
 
-
 /**
  * Estimates datatable.
  */
@@ -78,43 +77,37 @@ function EstimatesDataTable({
     [setEstimatesTableState],
   );
 
+  // Display empty status instead of the table.
   if (isEmptyStatus) {
     return <EstimatesEmptyStatus />;
   }
 
   return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <DataTable
-        columns={columns}
-        data={estimates}
-        
-        loading={isEstimatesLoading}
-        headerLoading={isEstimatesLoading}
-        progressBarLoading={isEstimatesFetching}
-
-        onFetchData={handleFetchData}
-        noInitialFetch={true}
-        manualSortBy={true}
-        selectionColumn={true}
-        sticky={true}
-        pagination={true}
-
-        manualPagination={true}
-        pagesCount={pagination.pagesCount}
-
-        TableLoadingRenderer={TableSkeletonRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-
-        ContextMenu={ActionsMenu}
-        payload={{
-          onApprove: handleApproveEstimate,
-          onEdit: handleEditEstimate,
-          onReject: handleRejectEstimate,
-          onDeliver: handleDeliverEstimate,
-          onDelete: handleDeleteEstimate,
-        }}
-      />
-    </div>
+    <DataTable
+      columns={columns}
+      data={estimates}
+      loading={isEstimatesLoading}
+      headerLoading={isEstimatesLoading}
+      progressBarLoading={isEstimatesFetching}
+      onFetchData={handleFetchData}
+      noInitialFetch={true}
+      manualSortBy={true}
+      selectionColumn={true}
+      sticky={true}
+      pagination={true}
+      manualPagination={true}
+      pagesCount={pagination.pagesCount}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onApprove: handleApproveEstimate,
+        onEdit: handleEditEstimate,
+        onReject: handleRejectEstimate,
+        onDeliver: handleDeliverEstimate,
+        onDelete: handleDeleteEstimate,
+      }}
+    />
   );
 }
 

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js

@@ -1,13 +1,11 @@
-import React, { useEffect } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import React from 'react';
+import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import EstimatesActionsBar from './EstimatesActionsBar';
 import EstimatesAlerts from '../EstimatesAlerts';
 import EstimatesViewTabs from './EstimatesViewTabs';
 import EstimatesDataTable from './EstimatesDataTable';
 
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withEstimates from './withEstimates';
 
 import { EstimatesListProvider } from './EstimatesListProvider';
@@ -17,18 +15,9 @@ import { compose, transformTableStateToQuery } from 'utils';
  * Sale estimates list page.
  */
 function EstimatesList({
-  // #withDashboardActions
-  changePageTitle,
-
   // #withEstimate
   estimatesTableState,
 }) {
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'estimates_list' }));
-  }, [changePageTitle, formatMessage]);
-
   return (
     <EstimatesListProvider
       query={transformTableStateToQuery(estimatesTableState)}
@@ -37,7 +26,10 @@ function EstimatesList({
 
       <DashboardPageContent>
         <EstimatesViewTabs />
-        <EstimatesDataTable />
+
+        <DashboardContentTable>
+          <EstimatesDataTable />
+        </DashboardContentTable>
       </DashboardPageContent>
 
       <EstimatesAlerts />
@@ -46,6 +38,5 @@ function EstimatesList({
 }
 
 export default compose(
-  withDashboardActions,
   withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
 )(EstimatesList);