From da6f9eef5c8478bcfbb32631fdcd77a379f35e5d Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Tue, 20 Jun 2023 15:41:13 +0800 Subject: [PATCH] refactor(console): remove use tenant hook and use cloud SWR instead (#4060) --- .../TenantLandingPageContent/index.tsx | 15 ++++- .../Topbar/TenantSelector/index.tsx | 24 ++++--- packages/console/src/hooks/use-tenants.ts | 64 ------------------- .../TenantBasicSettings/index.tsx | 27 +++++--- 4 files changed, 44 insertions(+), 86 deletions(-) delete mode 100644 packages/console/src/hooks/use-tenants.ts diff --git a/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx b/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx index 648566c69..08185981f 100644 --- a/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx +++ b/packages/console/src/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/index.tsx @@ -1,16 +1,17 @@ import { Theme } from '@logto/schemas'; import type { TenantInfo } from '@logto/schemas/models'; import classNames from 'classnames'; -import { useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import Plus from '@/assets/icons/plus.svg'; import TenantLandingPageImageDark from '@/assets/images/tenant-landing-page-dark.svg'; import TenantLandingPageImage from '@/assets/images/tenant-landing-page.svg'; +import { useCloudSwr } from '@/cloud/hooks/use-cloud-swr'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import DynamicT from '@/ds-components/DynamicT'; -import useTenants from '@/hooks/use-tenants'; import useTheme from '@/hooks/use-theme'; import CreateTenantModal from './CreateTenantModal'; @@ -22,7 +23,15 @@ type Props = { function TenantLandingPageContent({ className }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { tenants, mutate } = useTenants(); + const { tenants, setTenants } = useContext(TenantsContext); + const { data: availableTenants, mutate } = useCloudSwr('/api/tenants'); + + useEffect(() => { + if (availableTenants) { + setTenants(availableTenants); + } + }, [availableTenants, setTenants]); + const theme = useTheme(); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx index 14b1708d8..82284b4e7 100644 --- a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx @@ -1,18 +1,19 @@ import { type TenantInfo } from '@logto/schemas/models'; import classNames from 'classnames'; -import { useRef, useState } from 'react'; +import { useContext, useRef, useState, useEffect, useMemo } from 'react'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg'; import PlusSign from '@/assets/icons/plus.svg'; import Tick from '@/assets/icons/tick.svg'; +import { useCloudSwr } from '@/cloud/hooks/use-cloud-swr'; import CreateTenantModal from '@/cloud/pages/Main/TenantLandingPage/TenantLandingPageContent/CreateTenantModal'; import AppError from '@/components/AppError'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import Divider from '@/ds-components/Divider'; import Dropdown, { DropdownItem } from '@/ds-components/Dropdown'; import OverlayScrollbar from '@/ds-components/OverlayScrollbar'; -import useTenants from '@/hooks/use-tenants'; import { onKeyDownHandler } from '@/utils/a11y'; import TenantEnvTag from './TenantEnvTag'; @@ -20,13 +21,18 @@ import * as styles from './index.module.scss'; function TenantSelector() { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { - tenants, - currentTenant: currentTenantInfo, - currentTenantId, - error, - mutate, - } = useTenants(); + const { tenants, setTenants, currentTenantId } = useContext(TenantsContext); + const { data: availableTenants, mutate, error } = useCloudSwr('/api/tenants'); + + useEffect(() => { + if (availableTenants) { + setTenants(availableTenants); + } + }, [availableTenants, setTenants]); + + const currentTenantInfo = useMemo(() => { + return tenants?.find((tenant) => tenant.id === currentTenantId); + }, [currentTenantId, tenants]); const anchorRef = useRef(null); const [showDropdown, setShowDropdown] = useState(false); diff --git a/packages/console/src/hooks/use-tenants.ts b/packages/console/src/hooks/use-tenants.ts deleted file mode 100644 index 9dd57abf1..000000000 --- a/packages/console/src/hooks/use-tenants.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { useLogto } from '@logto/react'; -import { type TenantInfo } from '@logto/schemas/models'; -import { type Optional, trySafe } from '@silverhand/essentials'; -import { useCallback, useContext, useEffect, useMemo } from 'react'; -import { type KeyedMutator } from 'swr'; - -import { useCloudSwr } from '@/cloud/hooks/use-cloud-swr'; -import { TenantsContext } from '@/contexts/TenantsProvider'; - -type TenantsHook = { - currentTenant?: TenantInfo; - currentTenantId: string; - error?: Error; - isLoaded: boolean; - isLoading: boolean; - isSettle: boolean; - mutate: KeyedMutator; - setCurrentTenantId: (id: string) => void; - tenants?: TenantInfo[]; -}; - -const useTenants = (): TenantsHook => { - const { signIn, getAccessToken } = useLogto(); - const { currentTenantId, setCurrentTenantId, isSettle, setIsSettle } = useContext(TenantsContext); - const { data: availableTenants, error, mutate } = useCloudSwr('/api/tenants'); - const isLoading = !availableTenants && !error; - const isLoaded = Boolean(availableTenants && !error); - - const validate = useCallback( - async (tenant: TenantInfo) => { - const { id, indicator } = tenant; - if (await trySafe(getAccessToken(indicator))) { - setIsSettle(true); - } else { - void signIn(new URL(`/${id}/callback`, window.location.origin).toString()); - } - }, - [getAccessToken, setIsSettle, signIn] - ); - - const currentTenant: Optional = useMemo(() => { - return availableTenants?.find(({ id }) => id === currentTenantId); - }, [currentTenantId, availableTenants]); - - useEffect(() => { - if (currentTenant) { - void validate(currentTenant); - } - }, [currentTenant, validate]); - - return { - currentTenant, - currentTenantId, - error, - isLoaded, - isLoading, - isSettle, - mutate, - setCurrentTenantId, // Will be used to switch to another tenant. - tenants: availableTenants, - }; -}; - -export default useTenants; diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx b/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx index b37aca90f..a6355a9ef 100644 --- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx +++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx @@ -1,17 +1,18 @@ import { type TenantInfo, TenantTag } from '@logto/schemas/models'; import classNames from 'classnames'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useContext, useMemo } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; +import { useCloudSwr } from '@/cloud/hooks/use-cloud-swr'; import AppError from '@/components/AppError'; import AppLoading from '@/components/AppLoading'; import PageMeta from '@/components/PageMeta'; import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; -import useTenants from '@/hooks/use-tenants'; +import { TenantsContext } from '@/contexts/TenantsProvider'; import DeleteCard from './DeleteCard'; import DeleteModal from './DeleteModal'; @@ -28,14 +29,20 @@ const tenantProfileToForm = (tenant?: TenantInfo): TenantSettingsForm => { function TenantBasicSettings() { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const api = useCloudApi(); - const { - currentTenant, - currentTenantId, - error: requestError, - mutate, - isLoading, - tenants, - } = useTenants(); + const { tenants, setTenants, currentTenantId } = useContext(TenantsContext); + const { data: availableTenants, mutate, error: requestError } = useCloudSwr('/api/tenants'); + const isLoading = !availableTenants && !requestError; + + useEffect(() => { + if (availableTenants) { + setTenants(availableTenants); + } + }, [availableTenants, setTenants]); + + const currentTenant = useMemo(() => { + return tenants?.find((tenant) => tenant.id === currentTenantId); + }, [currentTenantId, tenants]); + const [error, setError] = useState(); const [isDeletionModalOpen, setIsDeletionModalOpen] = useState(false); const [isDeleting, setIsDeleting] = useState(false);