refactor: accounts alerts loading.

client/src/containers/Alerts/AccountActivateAlert.js

@@ -1,8 +1,5 @@
-import React from 'react';
-import {
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
+import React, { useState } 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';
@@ -24,9 +21,10 @@ function AccountActivateAlert({
   // #withAlertActions
   closeAlert,
 
-  requestActivateAccount
+  requestActivateAccount,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // Handle alert cancel.
   const handleCancel = () => {
@@ -35,9 +33,9 @@ function AccountActivateAlert({
 
   // Handle activate account confirm.
   const handleConfirmAccountActivate = () => {
+    setLoading(true);
     requestActivateAccount(accountId)
       .then(() => {
-        closeAlert('account-activate');
         AppToaster.show({
           message: formatMessage({
             id: 'the_account_has_been_successfully_activated',
@@ -46,8 +44,10 @@ function AccountActivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
         closeAlert('account-activate');
+        setLoading(false);
       });
   };
 
@@ -59,6 +59,7 @@ function AccountActivateAlert({
       isOpen={isOpen}
       onCancel={handleCancel}
       onConfirm={handleConfirmAccountActivate}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_activate_this_account'} />
@@ -70,5 +71,5 @@ function AccountActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
+  withAccountsActions,
 )(AccountActivateAlert);

client/src/containers/Alerts/AccountBulkActivateAlert.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
-  useIntl
+  useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
@@ -22,22 +22,22 @@ function AccountBulkActivateAlert({
   // #withAlertActions
   closeAlert,
 
-  requestBulkActivateAccounts
+  requestBulkActivateAccounts,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
   // Handle alert cancel.
   const handleClose = () => {
     closeAlert(name);
-  }
+  };
 
   // Handle Bulk activate account confirm.
   const handleConfirmBulkActivate = () => {
+    setLoading(true);
     requestBulkActivateAccounts(accountsIds)
       .then(() => {
-        closeAlert(name);
-
         AppToaster.show({
           message: formatMessage({
             id: 'the_accounts_has_been_successfully_activated',
@@ -46,7 +46,9 @@ function AccountBulkActivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -61,6 +63,7 @@ function AccountBulkActivateAlert({
       isOpen={isOpen}
       onCancel={handleClose}
       onConfirm={handleConfirmBulkActivate}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_activate_this_accounts'} />
@@ -72,5 +75,5 @@ function AccountBulkActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
-)(AccountBulkActivateAlert);
+  withAccountsActions,
+)(AccountBulkActivateAlert);

client/src/containers/Alerts/AccountBulkDeleteAlert.js

@@ -1,8 +1,5 @@
-import React from 'react';
-import {
-  FormattedMessage as T,
-  useIntl
-} from 'react-intl';
+import React, { useState } 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';
@@ -27,9 +24,11 @@ function AccountBulkDeleteAlert({
   closeAlert,
 
   // #withAccountsActions
-  requestDeleteBulkAccounts
+  requestDeleteBulkAccounts,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
+
   const selectedRowsCount = 0;
 
   const handleCancel = () => {
@@ -37,9 +36,9 @@ function AccountBulkDeleteAlert({
   };
   // Handle confirm accounts bulk delete.
   const handleConfirmBulkDelete = () => {
+    setLoading(true);
     requestDeleteBulkAccounts(accountsIds)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_accounts_has_been_successfully_deleted',
@@ -49,8 +48,11 @@ function AccountBulkDeleteAlert({
         queryCache.invalidateQueries('accounts-table');
       })
       .catch((errors) => {
-        closeAlert(name);
         handleDeleteErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
+        closeAlert(name);
       });
   };
 
@@ -65,6 +67,7 @@ function AccountBulkDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancel}
       onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
     >
       <p>
         <T id={'once_delete_these_accounts_you_will_not_able_restore_them'} />
@@ -76,5 +79,5 @@ function AccountBulkDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
-)(AccountBulkDeleteAlert);
+  withAccountsActions,
+)(AccountBulkDeleteAlert);

client/src/containers/Alerts/AccountBulkInactivateAlert.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
@@ -21,6 +21,7 @@ function AccountBulkInactivateAlert({
   closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
   // Handle alert cancel.
@@ -29,10 +30,9 @@ function AccountBulkInactivateAlert({
   };
   // Handle Bulk Inactive accounts confirm.
   const handleConfirmBulkInactive = () => {
+    setLoading(true);
     requestBulkInactiveAccounts(accountsIds)
       .then(() => {
-        closeAlert(name);
-
         AppToaster.show({
           message: formatMessage({
             id: 'the_accounts_have_been_successfully_inactivated',
@@ -41,7 +41,9 @@ function AccountBulkInactivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((errors) => {
+      .catch((errors) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -56,6 +58,7 @@ function AccountBulkInactivateAlert({
       isOpen={isOpen}
       onCancel={handleCancel}
       onConfirm={handleConfirmBulkInactive}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_inactive_this_accounts'} />

client/src/containers/Alerts/AccountDeleteAlert.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
-  useIntl
+  useIntl,
 } from 'react-intl';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
@@ -30,9 +30,10 @@ function AccountDeleteAlert({
   requestDeleteAccount,
 
   // #withAlertActions
-  closeAlert
+  closeAlert,
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete account alert.
   const handleCancelAccountDelete = () => {
@@ -41,9 +42,9 @@ function AccountDeleteAlert({
 
   // Handle confirm account delete.
   const handleConfirmAccountDelete = () => {
+    setLoading(true);
     requestDeleteAccount(accountId)
       .then(() => {
-        closeAlert(name);
         AppToaster.show({
           message: formatMessage({
             id: 'the_account_has_been_successfully_deleted',
@@ -54,6 +55,9 @@ function AccountDeleteAlert({
       })
       .catch((errors) => {
         handleDeleteErrors(errors);
+      })
+      .finally(() => {
+        setLoading(false);
         closeAlert(name);
       });
   };
@@ -67,6 +71,7 @@ function AccountDeleteAlert({
       isOpen={isOpen}
       onCancel={handleCancelAccountDelete}
       onConfirm={handleConfirmAccountDelete}
+      loading={isLoading}
     >
       <p>
         <FormattedHTMLMessage
@@ -74,11 +79,11 @@ function AccountDeleteAlert({
         />
       </p>
     </Alert>
-  )
+  );
 }
 
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
-)(AccountDeleteAlert);
+  withAccountsActions,
+)(AccountDeleteAlert);

client/src/containers/Alerts/AccountInactivateAlert.js

@@ -1,8 +1,5 @@
-import React from 'react';
-import {
-  FormattedMessage as T,
-  useIntl,
-} from 'react-intl';
+import React, { useState } 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';
@@ -23,18 +20,18 @@ function AccountInactivateAlert({
 
   // #withAccountsActions
   requestInactiveAccount,
-
 }) {
   const { formatMessage } = useIntl();
+  const [isLoading, setLoading] = useState(false);
 
   const handleCancelInactiveAccount = () => {
     closeAlert('account-inactivate');
   };
 
   const handleConfirmAccountActive = () => {
+    setLoading(true);
     requestInactiveAccount(accountId)
       .then(() => {
-        closeAlert('account-inactivate');
         AppToaster.show({
           message: formatMessage({
             id: 'the_account_has_been_successfully_inactivated',
@@ -43,7 +40,9 @@ function AccountInactivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((error) => {
+      .catch((error) => {})
+      .finally(() => {
+        setLoading(false);
         closeAlert('account-inactivate');
       });
   };
@@ -56,6 +55,7 @@ function AccountInactivateAlert({
       isOpen={isOpen}
       onCancel={handleCancelInactiveAccount}
       onConfirm={handleConfirmAccountActive}
+      loading={isLoading}
     >
       <p>
         <T id={'are_sure_to_inactive_this_account'} />
@@ -67,5 +67,5 @@ function AccountInactivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions
+  withAccountsActions,
 )(AccountInactivateAlert);