refactor: add comments and error handling

packages/console/src/App.tsx

@@ -31,6 +31,7 @@ import AppConfirmModalProvider from './contexts/AppConfirmModalProvider';
 import AppDataProvider, { AppDataContext } from './contexts/AppDataProvider';
 import { AppThemeProvider } from './contexts/AppThemeProvider';
 import TenantsProvider, { TenantsContext } from './contexts/TenantsProvider';
+import Toast from './ds-components/Toast';
 import useCurrentUser from './hooks/use-current-user';
 import initI18n from './i18n/init';
 
@@ -112,6 +113,7 @@ function Providers() {
  >
  <AppThemeProvider>
  <Helmet titleTemplate={`%s - ${mainTitle}`} defaultTitle={mainTitle} />
+ <Toast />
  <ErrorBoundary>
  <LogtoErrorBoundary>
  {/**

packages/console/src/containers/ConsoleRoutes/index.tsx

@@ -9,7 +9,6 @@ import ConsoleContent from '@/containers/ConsoleContent';
 import ProtectedRoutes from '@/containers/ProtectedRoutes';
 import TenantAccess from '@/containers/TenantAccess';
 import { GlobalRoute } from '@/contexts/TenantsProvider';
-import Toast from '@/ds-components/Toast';
 import useSwrOptions from '@/hooks/use-swr-options';
 import Callback from '@/pages/Callback';
 import CheckoutSuccessCallback from '@/pages/CheckoutSuccessCallback';
@@ -23,7 +22,6 @@ function Layout() {
  return (
  <SWRConfig value={swrOptions}>
  <AppBoundary>
- <Toast />
  <Outlet />
  </AppBoundary>
  </SWRConfig>

packages/console/src/onboarding/index.tsx

@@ -5,7 +5,6 @@ import { Navigate, type RouteObject, useMatch, useRoutes } from 'react-router-do
 import AppLoading from '@/components/AppLoading';
 import AppBoundary from '@/containers/AppBoundary';
 import { AppThemeContext } from '@/contexts/AppThemeProvider';
-import Toast from '@/ds-components/Toast';
 import { usePlausiblePageview } from '@/hooks/use-plausible-pageview';
 
 import Topbar from './components/Topbar';
@@ -74,7 +73,6 @@ export function OnboardingApp() {
  return (
  <div className={styles.app}>
  <AppBoundary>
- <Toast />
  <Topbar />
  <div className={styles.content}>{routes}</div>
  </AppBoundary>

packages/console/src/pages/Profile/containers/DeleteAccountModal/components/DeletionConfirmationModal/index.tsx

@@ -1,6 +1,7 @@
 import { type IdTokenClaims, useLogto } from '@logto/react';
 import { TenantRole, getTenantIdFromOrganizationId } from '@logto/schemas';
 import { useContext, useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
 import AppLoading from '@/components/AppLoading';
@@ -14,6 +15,10 @@ import TenantsList from '../TenantsList';
 
 type RoleMap = { [key in string]?: string[] };
 
+/**
+ * Given a list of organization roles from the user's claims, returns a tenant ID - role names map.
+ * A user may have multiple roles in the same tenant.
+ */
 const getRoleMap = (organizationRoles: string[]) =>
  organizationRoles.reduce<RoleMap>((accumulator, value) => {
  const [organizationId, roleName] = value.split(':');
@@ -38,6 +43,7 @@ type Props = {
  readonly onClose: () => void;
 };
 
+/** A display component for the account deletion confirmation. */
 export default function DeletionConfirmationModal({ onClose }: Props) {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
  const [isFinalConfirmationOpen, setIsFinalConfirmationOpen] = useState(false);
@@ -49,19 +55,25 @@ export default function DeletionConfirmationModal({ onClose }: Props) {
  const fetchRoleMap = async () => {
  setClaims(undefined);
  const claims = await getIdTokenClaims();
+
+ if (!claims) {
+ toast.error(t('error_occurred'));
+ onClose();
+ return;
+ }
+
  setClaims(claims);
  };
 
  void fetchRoleMap();
- }, [getIdTokenClaims]);
+ }, [getIdTokenClaims, onClose, t]);
 
  const roleMap = claims && getRoleMap(claims.organization_roles ?? []);
  const tenantsToDelete = tenants.filter(({ id }) => roleMap?.[id]?.includes(TenantRole.Admin));
  const tenantsToQuit = tenants.filter(({ id }) =>
  tenantsToDelete.every(({ id: tenantId }) => tenantId !== id)
  );
 
- // TODO: consider the claims is undefined even after the useEffect
  if (!claims) {
  return <AppLoading />;
  }

packages/console/src/pages/Profile/containers/DeleteAccountModal/components/TenantsIssuesModal/index.tsx

@@ -16,6 +16,7 @@ type Props = {
  readonly onClose: () => void;
 };
 
+/** A display component for tenant issues that prevent account deletion. */
 export default function TenantsIssuesModal({ issues, onClose }: Props) {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.profile.delete_account' });
 

packages/console/src/pages/Profile/index.tsx

@@ -1,5 +1,5 @@
 import type { ConnectorResponse } from '@logto/schemas';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRoutes } from 'react-router-dom';
 import useSWRImmutable from 'swr/immutable';
@@ -47,6 +47,16 @@ function Profile() {
  const { isLoading: isUserAssetServiceLoading } = useUserAssetsService();
  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
 
+ // Avoid unnecessary re-renders in child components
+ const show = useCallback(() => {
+ setShowDeleteAccountModal(true);
+ }, []);
+
+ // Avoid unnecessary re-renders in child components
+ const hide = useCallback(() => {
+ setShowDeleteAccountModal(false);
+ }, []);
+
  const showLoadingSkeleton = isLoadingUser || isLoadingConnectors || isUserAssetServiceLoading;
 
  return (
@@ -92,19 +102,9 @@ function Profile() {
  <div className={styles.description}>
  {t('profile.delete_account.description')}
  </div>
- <Button
- title="profile.delete_account.button"
- onClick={() => {
- setShowDeleteAccountModal(true);
- }}
- />
+ <Button title="profile.delete_account.button" onClick={show} />
  </div>
- <DeleteAccountModal
- isOpen={showDeleteAccountModal}
- onClose={() => {
- setShowDeleteAccountModal(false);
- }}
- />
+ <DeleteAccountModal isOpen={showDeleteAccountModal} onClose={hide} />
  </FormCard>
  )}
  </div>