From b3e55d1ce63796b01edba103840a3ff882ecf190 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Wed, 12 Jul 2023 11:57:24 +0800 Subject: [PATCH] refactor(console): refactor `useSubscriptionPlans` hook (#4157) --- .../PlanName/index.tsx | 0 .../src/hooks/use-subscription-plans.ts | 35 ++++++++++--------- .../Subscription/PlanQuotaTable/index.tsx | 11 +++--- .../TenantSettings/Subscription/index.tsx | 16 ++++++++- .../TenantDomainSettings/index.tsx | 3 +- .../Skeleton/index.module.scss | 0 .../Skeleton/index.tsx | 0 7 files changed, 42 insertions(+), 23 deletions(-) rename packages/console/src/{pages/TenantSettings/Subscription/PlanQuotaTable => components}/PlanName/index.tsx (100%) rename packages/console/src/pages/TenantSettings/{TenantDomainSettings => components}/Skeleton/index.module.scss (100%) rename packages/console/src/pages/TenantSettings/{TenantDomainSettings => components}/Skeleton/index.tsx (100%) diff --git a/packages/console/src/pages/TenantSettings/Subscription/PlanQuotaTable/PlanName/index.tsx b/packages/console/src/components/PlanName/index.tsx similarity index 100% rename from packages/console/src/pages/TenantSettings/Subscription/PlanQuotaTable/PlanName/index.tsx rename to packages/console/src/components/PlanName/index.tsx diff --git a/packages/console/src/hooks/use-subscription-plans.ts b/packages/console/src/hooks/use-subscription-plans.ts index 79a0c6212..15c49d261 100644 --- a/packages/console/src/hooks/use-subscription-plans.ts +++ b/packages/console/src/hooks/use-subscription-plans.ts @@ -1,3 +1,4 @@ +import { type Optional } from '@silverhand/essentials'; import { useMemo } from 'react'; import { communitySupportEnabledMap, ticketSupportResponseTimeMap } from '@/consts/subscriptions'; @@ -8,26 +9,28 @@ import { useCloudSwr } from '../cloud/hooks/use-cloud-swr'; const useSubscriptionPlans = () => { const { data: subscriptionPlansResponse, error } = useCloudSwr('/api/subscription-plans'); - const subscriptionPlans: SubscriptionPlan[] = useMemo( - () => - subscriptionPlansResponse?.map((plan) => { - const { name, quota } = plan; + const subscriptionPlans: Optional = useMemo(() => { + if (!subscriptionPlansResponse) { + return; + } - return { - ...plan, - quota: { - ...quota, - communitySupportEnabled: communitySupportEnabledMap[name] ?? false, // Fallback to not supported - ticketSupportResponseTime: ticketSupportResponseTimeMap[name] ?? 0, // Fallback to not supported - }, - }; - }) ?? [], - [subscriptionPlansResponse] - ); + return subscriptionPlansResponse.map((plan) => { + const { name, quota } = plan; + + return { + ...plan, + quota: { + ...quota, + communitySupportEnabled: communitySupportEnabledMap[name] ?? false, // Fallback to not supported + ticketSupportResponseTime: ticketSupportResponseTimeMap[name] ?? 0, // Fallback to not supported + }, + }; + }); + }, [subscriptionPlansResponse]); return { - isLoading: !subscriptionPlansResponse && !error, data: subscriptionPlans, + error, }; }; diff --git a/packages/console/src/pages/TenantSettings/Subscription/PlanQuotaTable/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/PlanQuotaTable/index.tsx index 470be1e09..847d77445 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/PlanQuotaTable/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/PlanQuotaTable/index.tsx @@ -2,25 +2,27 @@ import { conditional } from '@silverhand/essentials'; import { useMemo } from 'react'; import Success from '@/assets/icons/success.svg'; +import PlanName from '@/components/PlanName'; import { enterprisePlanTableData, planTableGroupKeyMap } from '@/consts/subscriptions'; import DynamicT from '@/ds-components/DynamicT'; import Table from '@/ds-components/Table'; import { type RowGroup, type Column } from '@/ds-components/Table/types'; -import useSubscriptionPlans from '@/hooks/use-subscription-plans'; import { type SubscriptionPlanTableRow, type SubscriptionPlanTableGroupKey, + type SubscriptionPlan, } from '@/types/subscriptions'; -import PlanName from './PlanName'; import PlanQuotaGroupKeyLabel from './PlanQuotaGroupKeyLabel'; import PlanQuotaKeyLabel from './PlanQuotaKeyLabel'; import * as styles from './index.module.scss'; import { constructPlanTableDataArray } from './utils'; -function PlanQuotaTable() { - const { data: subscriptionPlans, isLoading } = useSubscriptionPlans(); +type Props = { + subscriptionPlans: SubscriptionPlan[]; +}; +function PlanQuotaTable({ subscriptionPlans }: Props) { const quotaTableRowGroups: Array> = useMemo(() => { const tableDataArray = [ ...constructPlanTableDataArray(subscriptionPlans), @@ -64,7 +66,6 @@ function PlanQuotaTable() {
conditional(index % 2 !== 0 && styles.colorRow)} diff --git a/packages/console/src/pages/TenantSettings/Subscription/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/index.tsx index 3b1c9bbf8..fd4c29117 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/index.tsx @@ -1,14 +1,28 @@ import { withAppInsights } from '@logto/app-insights/react'; import PageMeta from '@/components/PageMeta'; +import useSubscriptionPlans from '@/hooks/use-subscription-plans'; + +import Skeleton from '../components/Skeleton'; import PlanQuotaTable from './PlanQuotaTable'; function Subscription() { + const { data: subscriptionPlans, error } = useSubscriptionPlans(); + const isLoading = !subscriptionPlans && !error; + + if (isLoading) { + return ; + } + + if (!subscriptionPlans) { + return null; + } + return (
- +
); } diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx b/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx index 329e566af..e73057138 100644 --- a/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx +++ b/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx @@ -6,10 +6,11 @@ import FormField from '@/ds-components/FormField'; import useCustomDomain from '@/hooks/use-custom-domain'; import useDocumentationUrl from '@/hooks/use-documentation-url'; +import Skeleton from '../components/Skeleton'; + import AddDomainForm from './AddDomainForm'; import CustomDomain from './CustomDomain'; import DefaultDomain from './DefaultDomain'; -import Skeleton from './Skeleton'; import * as styles from './index.module.scss'; function TenantDomainSettings() { diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/Skeleton/index.module.scss b/packages/console/src/pages/TenantSettings/components/Skeleton/index.module.scss similarity index 100% rename from packages/console/src/pages/TenantSettings/TenantDomainSettings/Skeleton/index.module.scss rename to packages/console/src/pages/TenantSettings/components/Skeleton/index.module.scss diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/Skeleton/index.tsx b/packages/console/src/pages/TenantSettings/components/Skeleton/index.tsx similarity index 100% rename from packages/console/src/pages/TenantSettings/TenantDomainSettings/Skeleton/index.tsx rename to packages/console/src/pages/TenantSettings/components/Skeleton/index.tsx