refactoring: migrating to react-query to manage service-side state.

client/src/containers/Alerts/Estimates/EstimateApproveAlert.js

@@ -1,17 +1,18 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
+import { useApproveEstimate } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose } from 'utils';
 
 /**
- * Estimate Approve alert.
+ * Estimate approve alert.
  */
 function EstimateApproveAlert({
   name,
@@ -27,7 +28,10 @@ function EstimateApproveAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deliverEstimateMutate,
+    isLoading,
+  } = useApproveEstimate();
 
   // handle cancel approve alert.
   const handleCancelApproveEstimate = () => {
@@ -35,8 +39,7 @@ function EstimateApproveAlert({
   };
   // Handle confirm estimate approve.
   const handleConfirmEstimateApprove = useCallback(() => {
-    setLoading(true);
-    requestApproveEstimate(estimateId)
+    deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -48,10 +51,9 @@ function EstimateApproveAlert({
       })
       .catch((error) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [estimateId, requestApproveEstimate, formatMessage]);
+  }, [estimateId, deliverEstimateMutate, closeAlert, name, formatMessage]);
 
   return (
     <Alert
@@ -74,5 +76,4 @@ function EstimateApproveAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withEstimateActions,
 )(EstimateApproveAlert);

client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js

@@ -5,12 +5,12 @@ import {
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
+import { useDeleteEstimate } from 'hooks/query';
+
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose } from 'utils';
 
@@ -24,14 +24,11 @@ function EstimateDeleteAlert({
   isOpen,
   payload: { estimateId },
 
-  // #withEstimateActions
-  requestDeleteEstimate,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: deleteEstimateMutate, isLoading } = useDeleteEstimate();
 
   // handle cancel delete  alert.
   const handleCancelEstimateDelete = () => {
@@ -40,8 +37,7 @@ function EstimateDeleteAlert({
 
   // handle confirm delete estimate
   const handleConfirmEstimateDelete = useCallback(() => {
-    setLoading(true);
-    requestDeleteEstimate(estimateId)
+    deleteEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -49,14 +45,12 @@ function EstimateDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('estimates-table');
       })
       .catch(({ errors }) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [requestDeleteEstimate, formatMessage, estimateId]);
+  }, [deleteEstimateMutate, name, closeAlert, formatMessage, estimateId]);
 
   return (
     <Alert
@@ -81,5 +75,4 @@ function EstimateDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withEstimateActions,
 )(EstimateDeleteAlert);

client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.js

@@ -2,11 +2,12 @@ import React, { useCallback, useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
+import { useDeliverEstimate } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 
 import { compose } from 'utils';
 
@@ -20,14 +21,11 @@ function EstimateDeliveredAlert({
   isOpen,
   payload: { estimateId },
 
-  // #withEstimateActions
-  requestDeliveredEstimate,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: deliverEstimateMutate, isLoading } = useDeliverEstimate();
 
   // Handle cancel delivered estimate alert.
   const handleCancelDeliveredEstimate = () => {
@@ -36,8 +34,7 @@ function EstimateDeliveredAlert({
 
   // Handle confirm estimate delivered.
   const handleConfirmEstimateDelivered = useCallback(() => {
-    setLoading(true);
-    requestDeliveredEstimate(estimateId)
+    deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -50,9 +47,8 @@ function EstimateDeliveredAlert({
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [estimateId, requestDeliveredEstimate, formatMessage]);
+  }, [estimateId, deliverEstimateMutate, formatMessage]);
 
   return (
     <Alert
@@ -74,5 +70,4 @@ function EstimateDeliveredAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withEstimateActions,
 )(EstimateDeliveredAlert);

client/src/containers/Alerts/Estimates/EstimateRejectAlert.js

@@ -1,8 +1,10 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
 import { AppToaster } from 'components';
+import { useRejectEstimate } from 'hooks/query';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -27,7 +29,11 @@ function EstimateRejectAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: rejectEstimateMutate,
+    isLoading
+  } = useRejectEstimate();
+
   // Handle cancel reject estimate alert.
   const handleCancelRejectEstimate = () => {
     closeAlert(name);
@@ -35,7 +41,6 @@ function EstimateRejectAlert({
 
   // Handle confirm estimate reject.
   const handleConfirmEstimateReject = useCallback(() => {
-    setLoading(true);
     requestRejectEstimate(estimateId)
       .then(() => {
         AppToaster.show({
@@ -48,10 +53,9 @@ function EstimateRejectAlert({
       })
       .catch((error) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
-  }, [estimateId, requestRejectEstimate, formatMessage]);
+  }, [estimateId, rejectEstimateMutate, formatMessage]);
 
   return (
     <Alert