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

client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js

@@ -1,16 +1,17 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
-import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions';
+import {
+  useDeleteInventoryAdjustment
+} from 'hooks/query';
 
 import { compose } from 'utils';
 
@@ -23,23 +24,24 @@ function InventoryAdjustmentDeleteAlert({
   // #withAlertStoreConnect
   isOpen,
   payload: { inventoryId },
-  // #withInventoryAdjustmentActions
-  requestDeleteInventoryAdjustment,
 
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteInventoryAdjMutate,
+    isLoading
+  } = useDeleteInventoryAdjustment();
 
-  // handle cancel delete  alert.
+  // handle cancel delete alert.
   const handleCancelInventoryAdjustmentDelete = () => {
     closeAlert(name);
   };
 
+  // Handle the confirm delete of the inventory adjustment transaction.
   const handleConfirmInventoryAdjustmentDelete = () => {
-    setLoading(true);
-    requestDeleteInventoryAdjustment(inventoryId)
+    deleteInventoryAdjMutate(inventoryId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -47,11 +49,9 @@ function InventoryAdjustmentDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('inventory-adjustment-list');
       })
       .catch((errors) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
   };
@@ -81,5 +81,4 @@ function InventoryAdjustmentDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withInventoryAdjustmentActions,
 )(InventoryAdjustmentDeleteAlert);

client/src/containers/Alerts/Items/ItemActivateAlert.js

@@ -1,10 +1,12 @@
-import React, { 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 { AppToaster } from 'components';
 
-import withItemsActions from 'containers/Items/withItemsActions';
+import {
+  useActivateItem,
+} from 'hooks/query';
+
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -20,14 +22,11 @@ function ItemActivateAlert({
   isOpen,
   payload: { itemId },
 
-  // #withItemsActions
-  requestActivateItem,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: activateItem, isLoading }  = useActivateItem();
   
   // Handle activate item alert cancel.
   const handleCancelActivateItem = () => {
@@ -36,8 +35,7 @@ function ItemActivateAlert({
 
   // Handle confirm item activated.
   const handleConfirmItemActivate = () => {
-    setLoading(true);
-    requestActivateItem(itemId)
+    activateItem(itemId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -45,12 +43,10 @@ function ItemActivateAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-table');
       })
       .catch((error) => {})
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
   };
 
@@ -61,8 +57,8 @@ function ItemActivateAlert({
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleCancelActivateItem}
-      onConfirm={handleConfirmItemActivate}
       loading={isLoading}
+      onConfirm={handleConfirmItemActivate}
     >
       <p>
         <T id={'are_sure_to_activate_this_item'} />
@@ -74,5 +70,4 @@ function ItemActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemsActions,
 )(ItemActivateAlert);

client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
 import { AppToaster } from 'components';
 
 import withItemsActions from 'containers/Items/withItemsActions';
@@ -54,7 +55,7 @@ function ItemBulkDeleteAlert({
     <Alert
       cancelButtonText={<T id={'cancel'} />}
       confirmButtonText={
-        <T id={'delete_count'} values={{ count: itemsIds.length }} />
+        <T id={'delete_count'} values={{ count: size(itemsIds) }} />
       }
       icon="trash"
       intent={Intent.DANGER}

client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js

@@ -5,6 +5,7 @@ import {
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
+import { size } from 'lodash';
 import { AppToaster } from 'components';
 
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
@@ -59,7 +60,7 @@ function ItemCategoryBulkDeleteAlert({
     <Alert
       cancelButtonText={<T id={'cancel'} />}
       confirmButtonText={
-        <T id={'delete_count'} values={{ count: itemCategoriesIds.length }} />
+        <T id={'delete_count'} values={{ count: size(itemCategoriesIds) }} />
       }
       icon="trash"
       intent={Intent.DANGER}

client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js

@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
-import { queryCache } from 'react-query';
 
-import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+import { useDeleteItemCategory } from 'hooks/query';
+import { AppToaster } from 'components';
+
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -24,14 +24,14 @@ function ItemCategoryDeleteAlert({
   isOpen,
   payload: { itemCategoryId },
 
-  // #withItemCategoriesActions
-  requestDeleteItemCategory,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const {
+    mutateAsync: deleteItemCategory,
+    isLoading,
+  } = useDeleteItemCategory();
 
   // handle cancel delete item category alert.
   const handleCancelItemCategoryDelete = () => {
@@ -40,8 +40,7 @@ function ItemCategoryDeleteAlert({
 
   // Handle alert confirm delete item category.
   const handleConfirmItemDelete = () => {
-    setLoading(true);
-    requestDeleteItemCategory(itemCategoryId)
+    deleteItemCategory(itemCategoryId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -49,11 +48,9 @@ function ItemCategoryDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-categories-list');
       })
       .catch(() => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
   };
@@ -81,5 +78,4 @@ function ItemCategoryDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemCategoriesActions,
 )(ItemCategoryDeleteAlert);

client/src/containers/Alerts/Items/ItemDeleteAlert.js

@@ -10,7 +10,9 @@ import { AppToaster } from 'components';
 
 import { handleDeleteErrors } from 'containers/Items/utils';
 
-import withItemsActions from 'containers/Items/withItemsActions';
+import {
+  useDeleteItem
+} from 'hooks/query';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -26,14 +28,11 @@ function ItemDeleteAlert({
   isOpen,
   payload: { itemId },
 
-  // #withItemsActions
-  requestDeleteItem,
-
   // #withAlertActions
   closeAlert,
 }) {
+  const { mutateAsync: deleteItem, isLoading } = useDeleteItem();
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete item alert.
   const handleCancelItemDelete = () => {
@@ -41,8 +40,7 @@ function ItemDeleteAlert({
   };
 
   const handleConfirmDeleteItem = () => {
-    setLoading(true);
-    requestDeleteItem(itemId)
+    deleteItem(itemId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -50,14 +48,12 @@ function ItemDeleteAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-table');
       })
       .catch(({ errors }) => {
         handleDeleteErrors(errors);
       })
       .finally(() => {
         closeAlert(name);
-        setLoading(false);
       });
   };
 
@@ -84,5 +80,4 @@ function ItemDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemsActions,
 )(ItemDeleteAlert);

client/src/containers/Alerts/Items/ItemInactivateAlert.js

@@ -1,10 +1,10 @@
-import React, { 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 { AppToaster } from 'components';
 
-import withItemsActions from 'containers/Items/withItemsActions';
+import { useInactivateItem } from 'hooks/query';
+
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
@@ -20,24 +20,20 @@ function ItemInactivateAlert({
   isOpen,
   payload: { itemId },
 
-  // #withItemsActions
-  requestInactiveItem,
-
   // #withAlertActions
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: inactivateItem, isLoading } = useInactivateItem();
 
-  // handle cancel inactivate alert.
+  // Handle cancel inactivate alert.
   const handleCancelInactivateItem = () => {
     closeAlert(name);
   };
 
   // Handle confirm item Inactive.
   const handleConfirmItemInactive = () => {
-    setLoading(true);
-    requestInactiveItem(itemId)
+    inactivateItem(itemId)
       .then(() => {
         AppToaster.show({
           message: formatMessage({
@@ -45,11 +41,9 @@ function ItemInactivateAlert({
           }),
           intent: Intent.SUCCESS,
         });
-        queryCache.invalidateQueries('items-table');
       })
       .catch((error) => {})
       .finally(() => {
-        setLoading(false);
         closeAlert(name);
       });
   };
@@ -74,5 +68,4 @@ function ItemInactivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemsActions,
 )(ItemInactivateAlert);