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

client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -6,7 +6,9 @@ import {
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
+
 import { AppToaster } from 'components';
+import { useDeleteInvoice } from 'hooks/query';
 
 import { handleDeleteErrors } from 'containers/Sales/Invoice/components';
 
@@ -26,14 +28,14 @@ function InvoiceDeleteAlert({
   isOpen,
   payload: { invoiceId },
 
-  // #withInvoiceActions
-  requestDeleteInvoice,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteInvoiceMutate,
+    isLoading
+  } = useDeleteInvoice();
 
   // handle cancel delete invoice  alert.
   const handleCancelDeleteAlert = () => {
@@ -41,9 +43,8 @@ function InvoiceDeleteAlert({
   };
 
   // handleConfirm delete invoice
-  const handleConfirmInvoiceDelete = useCallback(() => {
-    setLoading(true);
-    requestDeleteInvoice(invoiceId)
+  const handleConfirmInvoiceDelete = () => {
+    deleteInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -51,16 +52,14 @@ function InvoiceDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('invoices-table');
       })
       .catch((errors) => {
         handleDeleteErrors(errors);
       })
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [invoiceId, requestDeleteInvoice, formatMessage]);
+  };
 
   return (
     <Alert

client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js

@@ -1,7 +1,8 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
+
+import { useDeliverInvoice } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
@@ -11,7 +12,7 @@ import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
 import { compose } from 'utils';
 
 /**
- * Invoice  alert.
+ * Sale invoice alert.
  */
 function InvoiceDeliverAlert({
   name,
@@ -20,14 +21,14 @@ function InvoiceDeliverAlert({
   isOpen,
   payload: { invoiceId },
 
-  // #withInvoiceActions
-  requestDeliverInvoice,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deliverInvoiceMutate,
+    isLoading
+  } = useDeliverInvoice();
 
   // handle cancel delete deliver alert.
   const handleCancelDeleteAlert = () => {
@@ -35,9 +36,8 @@ function InvoiceDeliverAlert({
   };
 
   // Handle confirm invoice deliver.
-  const handleConfirmInvoiceDeliver = useCallback(() => {
-    setLoading(true);
-    requestDeliverInvoice(invoiceId)
+  const handleConfirmInvoiceDeliver = () => {
+    deliverInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -45,14 +45,12 @@ function InvoiceDeliverAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('invoices-table');
       })
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
-  }, [invoiceId, requestDeliverInvoice, formatMessage]);
+  };
 
   return (
     <Alert