Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

refactor(console): only show loading status on selected subscription button (#4318)

Browse source
This commit is contained in:
Xiao Yijun 2023-08-11 16:16:20 +08:00 committed by GitHub
parent c2b379ee30
commit 7cf73f96c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx
View file

@ -35,9 +35,13 @@ function SwitchPlanActionBar({
const { currentTenantId } = useContext(TenantsContext); const { currentTenantId } = useContext(TenantsContext);
const { subscribe, cancelSubscription } = useSubscribe(); const { subscribe, cancelSubscription } = useSubscribe();
const { show } = useConfirmModal(); const { show } = useConfirmModal();
const [isLoading, setIsLoading] = useState(false); const [currentLoadingPlanId, setCurrentLoadingPlanId] = useState<string>();
const handleSubscribe = async (targetPlanId: string, isDowngrade: boolean) => { const handleSubscribe = async (targetPlanId: string, isDowngrade: boolean) => {
if (currentLoadingPlanId) {
return;
}
const currentPlan = subscriptionPlans.find(({ id }) => id === currentSubscriptionPlanId); const currentPlan = subscriptionPlans.find(({ id }) => id === currentSubscriptionPlanId);
const targetPlan = subscriptionPlans.find(({ id }) => id === targetPlanId); const targetPlan = subscriptionPlans.find(({ id }) => id === targetPlanId);
if (!currentPlan || !targetPlan) { if (!currentPlan || !targetPlan) {
@ -60,7 +64,7 @@ function SwitchPlanActionBar({
} }
try { try {
setIsLoading(true); setCurrentLoadingPlanId(targetPlanId);
if (targetPlanId === ReservedPlanId.free) { if (targetPlanId === ReservedPlanId.free) {
await cancelSubscription(currentTenantId); await cancelSubscription(currentTenantId);
onSubscriptionUpdated(); onSubscriptionUpdated();
@ -69,7 +73,7 @@ function SwitchPlanActionBar({
{t('downgrade_success')} {t('downgrade_success')}
</Trans> </Trans>
); );
setIsLoading(false);
return; return;
} }
@ -79,10 +83,8 @@ function SwitchPlanActionBar({
isDowngrade, isDowngrade,
callbackPage: subscriptionPage, callbackPage: subscriptionPage,
}); });
setIsLoading(false);
} catch (error: unknown) { } catch (error: unknown) {
setIsLoading(false); setCurrentLoadingPlanId(undefined);
if (await isExceededQuotaLimitError(error)) { if (await isExceededQuotaLimitError(error)) {
await show({ await show({
ModalContent: () => ( ModalContent: () => (
@ -99,6 +101,8 @@ function SwitchPlanActionBar({
} }
void toastResponseError(error); void toastResponseError(error);
} finally {
setCurrentLoadingPlanId(undefined);
} }
}; };
@ -121,7 +125,7 @@ function SwitchPlanActionBar({
} }
type={isDowngrade ? 'default' : 'primary'} type={isDowngrade ? 'default' : 'primary'}
disabled={isCurrentPlan} disabled={isCurrentPlan}
isLoading={!isCurrentPlan && isLoading} isLoading={!isCurrentPlan && currentLoadingPlanId === planId}
onClick={() => { onClick={() => {
void handleSubscribe(planId, isDowngrade); void handleSubscribe(planId, isDowngrade);
}} }}