From 9ff8847153e189c97333b2f719277c8a403832a0 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Wed, 27 Jan 2021 21:43:01 +0200 Subject: [PATCH] refactor: accounts alerts loading. --- .../containers/Alerts/AccountActivateAlert.js | 19 +++++++-------- .../Alerts/AccountBulkActivateAlert.js | 21 +++++++++-------- .../Alerts/AccountBulkDeleteAlert.js | 23 +++++++++++-------- .../Alerts/AccountBulkInactivateAlert.js | 11 +++++---- .../containers/Alerts/AccountDeleteAlert.js | 19 +++++++++------ .../Alerts/AccountInactivateAlert.js | 18 +++++++-------- 6 files changed, 63 insertions(+), 48 deletions(-) diff --git a/client/src/containers/Alerts/AccountActivateAlert.js b/client/src/containers/Alerts/AccountActivateAlert.js index 8d895f01a..a106cc1c6 100644 --- a/client/src/containers/Alerts/AccountActivateAlert.js +++ b/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} >

@@ -70,5 +71,5 @@ function AccountActivateAlert({ export default compose( withAlertStoreConnect(), withAlertActions, - withAccountsActions + withAccountsActions, )(AccountActivateAlert); diff --git a/client/src/containers/Alerts/AccountBulkActivateAlert.js b/client/src/containers/Alerts/AccountBulkActivateAlert.js index e3ba21c02..3cb367b67 100644 --- a/client/src/containers/Alerts/AccountBulkActivateAlert.js +++ b/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} >

@@ -72,5 +75,5 @@ function AccountBulkActivateAlert({ export default compose( withAlertStoreConnect(), withAlertActions, - withAccountsActions -)(AccountBulkActivateAlert); \ No newline at end of file + withAccountsActions, +)(AccountBulkActivateAlert); diff --git a/client/src/containers/Alerts/AccountBulkDeleteAlert.js b/client/src/containers/Alerts/AccountBulkDeleteAlert.js index bb5da79b0..663d1858e 100644 --- a/client/src/containers/Alerts/AccountBulkDeleteAlert.js +++ b/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} >

@@ -76,5 +79,5 @@ function AccountBulkDeleteAlert({ export default compose( withAlertStoreConnect(), withAlertActions, - withAccountsActions -)(AccountBulkDeleteAlert); \ No newline at end of file + withAccountsActions, +)(AccountBulkDeleteAlert); diff --git a/client/src/containers/Alerts/AccountBulkInactivateAlert.js b/client/src/containers/Alerts/AccountBulkInactivateAlert.js index fa98e1d33..bb58a7072 100644 --- a/client/src/containers/Alerts/AccountBulkInactivateAlert.js +++ b/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} >

diff --git a/client/src/containers/Alerts/AccountDeleteAlert.js b/client/src/containers/Alerts/AccountDeleteAlert.js index 6984f84ed..89da81058 100644 --- a/client/src/containers/Alerts/AccountDeleteAlert.js +++ b/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} >

- ) + ); } export default compose( withAlertStoreConnect(), withAlertActions, - withAccountsActions -)(AccountDeleteAlert); \ No newline at end of file + withAccountsActions, +)(AccountDeleteAlert); diff --git a/client/src/containers/Alerts/AccountInactivateAlert.js b/client/src/containers/Alerts/AccountInactivateAlert.js index 3a1cb57c4..996b22197 100644 --- a/client/src/containers/Alerts/AccountInactivateAlert.js +++ b/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} >

@@ -67,5 +67,5 @@ function AccountInactivateAlert({ export default compose( withAlertStoreConnect(), withAlertActions, - withAccountsActions + withAccountsActions, )(AccountInactivateAlert);