refactor(console,ui): fix errors

logto-io · Apr 21, 2023 · b2a4a05 · b2a4a05
1 parent 05d38be
commit b2a4a05
Show file tree

Hide file tree

Showing 47 changed files with 115 additions and 71 deletions.
diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
+import type { TFuncKey } from 'i18next';
 import type { MouseEventHandler } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import type { TFuncKey } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 
 import Copy from '@/assets/images/copy.svg';

diff --git a/packages/console/src/components/Dropdown/DropdownItem.tsx b/packages/console/src/components/Dropdown/DropdownItem.tsx
@@ -8,7 +8,7 @@ import * as styles from './DropdownItem.module.scss';
 type Props = {
   onClick?: (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => void;
   className?: string;
-  children: ReactNode | Record<string, unknown>;
+  children: ReactNode;
   icon?: ReactNode;
   iconClassName?: string;
   type?: 'default' | 'danger';

diff --git a/packages/console/src/components/DynamicT/index.tsx b/packages/console/src/components/DynamicT/index.tsx
@@ -0,0 +1,12 @@
+import { type AdminConsoleKey } from '@logto/phrases';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  key: AdminConsoleKey;
+};
+
+export default function DynamicT({ key }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return <>{t(key)}</>;
+}
diff --git a/packages/console/src/components/FormCard/index.tsx b/packages/console/src/components/FormCard/index.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Card from '../Card';
+import DynamicT from '../DynamicT';
 import TextLink from '../TextLink';
 
 import * as styles from './index.module.scss';
@@ -23,7 +24,7 @@ function FormCard({ title, description, learnMoreLink, children }: Props) {
         <div className={styles.title}>{t(title)}</div>
         {description && (
           <div className={styles.description}>
-            {t(description)}
+            <DynamicT key={description} />
             {learnMoreLink && (
               <>
                 {' '}

diff --git a/packages/console/src/components/FormField/index.tsx b/packages/console/src/components/FormField/index.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import Tip from '@/assets/images/tip.svg';
 
 import type DangerousRaw from '../DangerousRaw';
+import DynamicT from '../DynamicT';
 import IconButton from '../IconButton';
 import Spacer from '../Spacer';
 import { ToggleTip } from '../Tip';
@@ -38,7 +39,7 @@ function FormField({
     <div className={classNames(styles.field, className)}>
       <div className={classNames(styles.headline, headlineClassName)}>
         <div className={styles.title}>
-          {typeof title === 'string' ? t(title) : title}
+          {typeof title === 'string' ? <DynamicT key={title} /> : title}
           {isMultiple && (
             <span className={styles.multiple}>{t('general.multiple_form_field')}</span>
           )}

diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx
@@ -5,6 +5,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type DangerousRaw from '../DangerousRaw';
+import DynamicT from '../DynamicT';
 
 import * as styles from './Radio.module.scss';
 
@@ -89,7 +90,7 @@ function Radio({
         {children}
         {type === 'plain' && <div className={styles.indicator} />}
         {icon && <span className={styles.icon}>{icon}</span>}
-        {title && (typeof title === 'string' ? t(title) : title)}
+        {title && (typeof title === 'string' ? <DynamicT key={title} /> : title)}
         {isDisabled && disabledLabel && (
           <div className={classNames(styles.indicator, styles.disabledLabel)}>
             {t(disabledLabel)}

diff --git a/packages/console/src/components/Table/TablePlaceholder.tsx b/packages/console/src/components/Table/TablePlaceholder.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import useTheme from '@/hooks/use-theme';
 
+import DynamicT from '../DynamicT';
 import TextLink from '../TextLink';
 
 import * as styles from './TablePlaceholder.module.scss';
@@ -27,7 +28,7 @@ function TablePlaceholder({ image, imageDark, title, description, learnMoreLink,
       <div className={styles.image}>{theme === Theme.Light ? image : imageDark}</div>
       <div className={styles.title}>{t(title)}</div>
       <div className={styles.description}>
-        {t(description)}
+        <DynamicT key={description} />
         {learnMoreLink && (
           <>
             {' '}

diff --git a/packages/console/src/components/UserAccountInformation/index.tsx b/packages/console/src/components/UserAccountInformation/index.tsx
@@ -46,7 +46,7 @@ function UserAccountInformation({
       primaryEmail && `${t('user_details.created_email')} ${primaryEmail}`,
       primaryPhone && `${t('user_details.created_phone')} ${primaryPhone}`,
       username && `${t('user_details.created_username')} ${username}`,
-      `${passwordLabel ?? t('user_details.created_password')} ${password}`
+      `${passwordLabel ?? t('user_details.created_username')} ${password}`
     ).join('\n');
 
     await navigator.clipboard.writeText(content);

diff --git a/packages/console/src/consts/connectors.ts b/packages/console/src/consts/connectors.ts
@@ -9,21 +9,21 @@ type TitlePlaceHolder = {
   [key in ConnectorType]: AdminConsoleKey;
 };
 
-export const connectorTitlePlaceHolder: TitlePlaceHolder = Object.freeze({
+export const connectorTitlePlaceHolder = Object.freeze({
   [ConnectorType.Sms]: 'connectors.type.sms',
   [ConnectorType.Email]: 'connectors.type.email',
   [ConnectorType.Social]: 'connectors.type.social',
-});
+}) satisfies TitlePlaceHolder;
 
 type ConnectorPlatformLabel = {
   [key in ConnectorPlatform]: AdminConsoleKey;
 };
 
-export const connectorPlatformLabel: ConnectorPlatformLabel = Object.freeze({
+export const connectorPlatformLabel = Object.freeze({
   [ConnectorPlatform.Native]: 'connectors.platform.native',
   [ConnectorPlatform.Universal]: 'connectors.platform.universal',
   [ConnectorPlatform.Web]: 'connectors.platform.web',
-});
+}) satisfies ConnectorPlatformLabel;
 
 type ConnectorPlaceholderIcon = {
   [key in ConnectorType]?: SvgComponent;
@@ -32,7 +32,7 @@ type ConnectorPlaceholderIcon = {
 export const connectorPlaceholderIcon: ConnectorPlaceholderIcon = Object.freeze({
   [ConnectorType.Sms]: SmsConnectorIcon,
   [ConnectorType.Email]: EmailConnector,
-} as const);
+});
 
 export const defaultSmsConnectorGroup: ConnectorGroup = {
   id: 'default-sms-connector',

diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import type { ReactChild, ReactNode } from 'react';
+import type { TFuncKey } from 'i18next';
+import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
-import type { TFuncKey } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
@@ -10,7 +10,7 @@ import { getPath } from '../../utils';
 import * as styles from './index.module.scss';
 
 type Props = {
-  icon?: ReactChild;
+  icon?: ReactNode;
   titleKey: TFuncKey<'translation', 'admin_console.tabs'>;
   isActive?: boolean;
   modal?: (isOpen: boolean, onCancel: () => void) => ReactNode;

diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx
@@ -1,6 +1,6 @@
 import type { Optional } from '@silverhand/essentials';
+import type { TFuncKey } from 'i18next';
 import type { FC, ReactNode } from 'react';
-import type { TFuncKey } from 'react-i18next';
 
 import Role from '@/assets/images/role.svg';
 import useDocumentationUrl from '@/hooks/use-documentation-url';

diff --git a/packages/console/src/hooks/use-me-custom-data.ts b/packages/console/src/hooks/use-me-custom-data.ts
@@ -1,7 +1,7 @@
 import { useLogto } from '@logto/react';
-import { t } from 'i18next';
 import { useCallback } from 'react';
 import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import { adminTenantEndpoint, meApi } from '@/consts';
@@ -13,6 +13,7 @@ import useSwrFetcher from './use-swr-fetcher';
 
 const useMeCustomData = () => {
   const { isAuthenticated, error: authError } = useLogto();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const userId = useLogtoUserId();
   const shouldFetch = isAuthenticated && !authError && userId;
   const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
@@ -38,7 +39,7 @@ const useMeCustomData = () => {
         .json();
       await mutate(updated);
     },
-    [api, mutate, userId]
+    [api, mutate, t, userId]
   );
 
   return {

diff --git a/.../console/src/include.d/react-i18next.d.ts → packages/console/src/include.d/i18next.d.ts b/.../console/src/include.d/react-i18next.d.ts → packages/console/src/include.d/i18next.d.ts
@@ -2,8 +2,9 @@
 
 import type { LocalePhrase } from '@logto/phrases';
 
-declare module 'react-i18next' {
+declare module 'i18next' {
   interface CustomTypeOptions {
+    returnNull: false;
     allowObjectInHTMLChildren: true;
     resources: LocalePhrase;
   }

diff --git a/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.tsx b/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.tsx
@@ -2,6 +2,7 @@ import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
+import DynamicT from '@/components/DynamicT';
 import { Tooltip } from '@/components/Tip';
 import { onKeyDownHandler } from '@/utils/a11y';
 
@@ -52,7 +53,7 @@ function CardItem({
         {icon && <span className={styles.icon}>{icon}</span>}
         <div className={styles.content}>
           <div>
-            {typeof title === 'string' ? t(title) : title}
+            {typeof title === 'string' ? <DynamicT key={title} /> : title}
             {trailingTag && (
               <span className={classNames(styles.tag, styles.trailingTag)}>{t(trailingTag)}</span>
             )}

diff --git a/...ges/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/PlatformTab.tsx b/...ges/console/src/onboarding/pages/SignInExperience/components/PlatformTabs/PlatformTab.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import DynamicT from '@/components/DynamicT';
 import type { PreviewPlatform } from '@/components/SignInExperiencePreview/types';
 import { onKeyDownHandler } from '@/utils/a11y';
 
@@ -32,7 +33,7 @@ function PlatformTab({ isSelected, icon, title, tab, onClick }: Props) {
       })}
     >
       <span className={styles.icon}>{icon}</span>
-      {t(title)}
+      <DynamicT key={title} />
     </div>
   );
 }

diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
@@ -73,7 +73,7 @@ function ConnectorName({ connectorGroup, isDemo = false }: Props) {
                   platform && (
                     <div key={id} className={styles.platform}>
                       <ConnectorPlatformIcon platform={platform} />
-                      {t(`${connectorPlatformLabel[platform]}`)}
+                      {t(connectorPlatformLabel[platform])}
                     </div>
                   )
               )}

diff --git a/packages/console/src/pages/Dashboard/components/Block.tsx b/packages/console/src/pages/Dashboard/components/Block.tsx
@@ -7,6 +7,7 @@ import ArrowDown from '@/assets/images/arrow-down.svg';
 import ArrowUp from '@/assets/images/arrow-up.svg';
 import Tip from '@/assets/images/tip.svg';
 import Card from '@/components/Card';
+import DynamicT from '@/components/DynamicT';
 import IconButton from '@/components/IconButton';
 import { ToggleTip } from '@/components/Tip';
 import type { Props as ToggleTipProps } from '@/components/Tip/ToggleTip';
@@ -30,7 +31,7 @@ function Block({ variant = 'default', count, delta, title, tip }: Props) {
   return (
     <Card className={classNames(styles.block, styles[variant])}>
       <div className={styles.title}>
-        {t(title)}
+        <DynamicT key={title} />
         {tip && (
           <ToggleTip anchorClassName={styles.toggleTipButton} content={tip}>
             <IconButton size="small">

diff --git a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import TadaDark from '@/assets/images/tada-dark.svg';
 import Tada from '@/assets/images/tada.svg';
 import Dropdown, { DropdownItem } from '@/components/Dropdown';
+import DynamicT from '@/components/DynamicT';
 import Index from '@/components/Index';
 import useTheme from '@/hooks/use-theme';
 import useUserPreferences from '@/hooks/use-user-preferences';
@@ -77,7 +78,7 @@ function GetStartedProgress() {
               icon={<Index className={styles.index} index={index + 1} isComplete={isComplete} />}
               onClick={onClick}
             >
-              {t(title)}
+              <DynamicT key={title} />
             </DropdownItem>
           ))}
         </div>

diff --git a/packages/console/src/pages/Profile/components/CardContent/index.tsx b/packages/console/src/pages/Profile/components/CardContent/index.tsx
@@ -5,6 +5,7 @@ import { cloneElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
+import DynamicT from '@/components/DynamicT';
 
 import NotSet from '../NotSet';
 
@@ -56,7 +57,7 @@ function CardContent<T extends Nullable<boolean | string | Record<string, unknow
                       cloneElement(icon, {
                         className: styles.icon,
                       })}
-                    {typeof label === 'string' ? t(label) : label}
+                    {typeof label === 'string' ? <DynamicT key={label} /> : label}
                   </div>
                 </td>
                 <td>{renderer(value)}</td>

diff --git a/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx b/packages/console/src/pages/Profile/components/MainFlowLikeModal/index.tsx
@@ -44,7 +44,7 @@ function MainFlowLikeModal({ title, subtitle, subtitleProps, children, onClose,
           {subtitle && (
             <span className={styles.subtitle}>
               <Trans components={{ strong: <span className={styles.strong} /> }}>
-                {t(subtitle, subtitleProps)}
+                {t(subtitle, subtitleProps ?? {})}
               </Trans>
             </span>
           )}

diff --git a/.../components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx b/.../components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx
@@ -3,6 +3,7 @@ import { getSafe } from '@silverhand/essentials';
 import { detailedDiff } from 'deep-object-diff';
 import { useTranslation } from 'react-i18next';
 
+import DynamicT from '@/components/DynamicT';
 import { signInIdentifierPhrase } from '@/pages/SignInExperience/constants';
 import type { SignInMethod, SignInMethodsObject } from '@/pages/SignInExperience/types';
 
@@ -55,7 +56,7 @@ function SignInDiffSection({ before, after, isAfter = false }: Props) {
           return (
             <li key={identifierKey}>
               <DiffSegment hasChanged={hasIdentifierChanged(identifierKey)} isAfter={isAfter}>
-                {String(t(signInIdentifierPhrase[identifierKey]))}
+                <DynamicT key={signInIdentifierPhrase[identifierKey]} />
                 {hasAuthentication && ' ('}
                 {password && (
                   <DiffSegment
@@ -65,7 +66,7 @@ function SignInDiffSection({ before, after, isAfter = false }: Props) {
                     {t('sign_in_exp.sign_up_and_sign_in.sign_in.password_auth')}
                   </DiffSegment>
                 )}
-                {needDisjunction && ` ${String(t('sign_in_exp.sign_up_and_sign_in.or'))} `}
+                {needDisjunction && ` ${t('sign_in_exp.sign_up_and_sign_in.or')} `}
                 {verificationCode && (
                   <DiffSegment
                     hasChanged={hasAuthenticationChanged(identifierKey, 'verificationCode')}

diff --git a/.../components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx b/.../components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx
@@ -3,6 +3,7 @@ import { getSafe } from '@silverhand/essentials';
 import { diff } from 'deep-object-diff';
 import { useTranslation } from 'react-i18next';
 
+import DynamicT from '@/components/DynamicT';
 import { signUpIdentifierPhrase } from '@/pages/SignInExperience/constants';
 import type { SignUpForm } from '@/pages/SignInExperience/types';
 import { signInExperienceParser } from '@/pages/SignInExperience/utils/form';
@@ -34,15 +35,15 @@ function SignUpDiffSection({ before, after, isAfter = false }: Props) {
       <ul className={styles.list}>
         <li>
           <DiffSegment hasChanged={hasChanged('identifier')} isAfter={isAfter}>
-            {String(t(signUpIdentifierPhrase[identifier]))}
+            <DynamicT key={signUpIdentifierPhrase[identifier]} />
           </DiffSegment>
           {hasAuthentication && ' ('}
           {password && (
             <DiffSegment hasChanged={hasChanged('password')} isAfter={isAfter}>
               {t('sign_in_exp.sign_up_and_sign_in.sign_up.set_a_password_option')}
             </DiffSegment>
           )}
-          {needConjunction && ` ${String(t('sign_in_exp.sign_up_and_sign_in.and'))} `}
+          {needConjunction && ` ${t('sign_in_exp.sign_up_and_sign_in.and')} `}
           {verify && (
             <DiffSegment hasChanged={hasChanged('verify')} isAfter={isAfter}>
               {needConjunction

diff --git a/packages/console/src/pages/SignInExperience/constants.ts b/packages/console/src/pages/SignInExperience/constants.ts
@@ -26,30 +26,30 @@ type SignInIdentifierPhrase = {
   [key in SignInIdentifier]: AdminConsoleKey;
 };
 
-export const signInIdentifierPhrase: SignInIdentifierPhrase = Object.freeze({
+export const signInIdentifierPhrase = Object.freeze({
   [SignInIdentifier.Email]: 'sign_in_exp.sign_up_and_sign_in.identifiers_email',
   [SignInIdentifier.Phone]: 'sign_in_exp.sign_up_and_sign_in.identifiers_phone',
   [SignInIdentifier.Username]: 'sign_in_exp.sign_up_and_sign_in.identifiers_username',
-} as const);
+}) satisfies SignInIdentifierPhrase;
 
 type SignUpIdentifierPhrase = {
   [key in SignUpIdentifier]: AdminConsoleKey;
 };
 
-export const signUpIdentifierPhrase: SignUpIdentifierPhrase = Object.freeze({
+export const signUpIdentifierPhrase = Object.freeze({
   [SignUpIdentifier.Email]: 'sign_in_exp.sign_up_and_sign_in.identifiers_email',
   [SignUpIdentifier.Phone]: 'sign_in_exp.sign_up_and_sign_in.identifiers_phone',
   [SignUpIdentifier.Username]: 'sign_in_exp.sign_up_and_sign_in.identifiers_username',
   [SignUpIdentifier.EmailOrSms]: 'sign_in_exp.sign_up_and_sign_in.identifiers_email_or_sms',
   [SignUpIdentifier.None]: 'sign_in_exp.sign_up_and_sign_in.identifiers_none',
-} as const);
+}) satisfies SignUpIdentifierPhrase;
 
 type NoConnectorWarningPhrase = {
   [key in ConnectorType]: AdminConsoleKey;
 };
 
-export const noConnectorWarningPhrase: NoConnectorWarningPhrase = Object.freeze({
+export const noConnectorWarningPhrase = Object.freeze({
   [ConnectorType.Email]: 'sign_in_exp.setup_warning.no_connector_email',
   [ConnectorType.Sms]: 'sign_in_exp.setup_warning.no_connector_sms',
   [ConnectorType.Social]: 'sign_in_exp.setup_warning.no_connector_social',
-} as const);
+}) satisfies NoConnectorWarningPhrase;