fix(console): docs link doesn't work for en-US locale (#1594)

packages/console/src/components/AppContent/components/Sidebar/hook.tsx

@@ -1,7 +1,9 @@
+import { Language } from '@logto/phrases';
 import { conditionalString, Optional } from '@silverhand/essentials';
 import { FC, ReactNode } from 'react';
-import { TFuncKey, useTranslation } from 'react-i18next';
+import { TFuncKey } from 'react-i18next';
 
+import useLanguage from '@/hooks/use-language';
 import useUserPreferences from '@/hooks/use-user-preferences';
 
 import Contact from './components/Contact';
@@ -46,9 +48,7 @@ export const useSidebarMenuItems = (): {
   const {
     data: { getStartedHidden },
   } = useUserPreferences();
-  const {
-    i18n: { language },
-  } = useTranslation();
+  const language = useLanguage();
 
   const sections: SidebarSection[] = [
     {
@@ -111,7 +111,7 @@ export const useSidebarMenuItems = (): {
           Icon: Document,
           title: 'docs',
           externalLink: `https://docs.logto.io/${conditionalString(
-            language !== 'en' && language.toLowerCase()
+            language !== Language.English && language.toLowerCase()
           )}`,
         },
       ],

packages/console/src/hooks/use-language.ts

@@ -0,0 +1,12 @@
+import { Language } from '@logto/phrases';
+import { useTranslation } from 'react-i18next';
+
+const useLanguage = () => {
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  return Object.values<string>(Language).includes(language) ? language : Language.English;
+};
+
+export default useLanguage;

packages/console/src/pages/GetStarted/hook.ts

@@ -1,9 +1,8 @@
-import { AdminConsoleKey } from '@logto/phrases';
+import { AdminConsoleKey, Language } from '@logto/phrases';
 import { AppearanceMode, Application } from '@logto/schemas';
 import { demoAppApplicationId } from '@logto/schemas/lib/seeds';
 import { conditionalString } from '@silverhand/essentials';
 import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import useSWR from 'swr';
 
@@ -20,6 +19,7 @@ import OneClick from '@/assets/images/one-click.svg';
 import PasswordlessDark from '@/assets/images/passwordless-dark.svg';
 import Passwordless from '@/assets/images/passwordless.svg';
 import { RequestError } from '@/hooks/use-api';
+import useLanguage from '@/hooks/use-language';
 import useSettings from '@/hooks/use-settings';
 import { useTheme } from '@/hooks/use-theme';
 
@@ -35,9 +35,7 @@ type GetStartedMetadata = {
 };
 
 const useGetStartedMetadata = () => {
-  const {
-    i18n: { language },
-  } = useTranslation();
+  const language = useLanguage();
   const { settings, updateSettings } = useSettings();
   const theme = useTheme();
   const isLightMode = theme === AppearanceMode.LightMode;
@@ -127,7 +125,7 @@ const useGetStartedMetadata = () => {
           void updateSettings({ furtherReadingsChecked: true });
           window.open(
             `https://docs.logto.io/${conditionalString(
-              language !== 'en' && language.toLowerCase()
+              language !== Language.English && language.toLowerCase()
             )}/docs/tutorials/get-started/further-readings`,
             '_blank'
           );

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

@@ -12,6 +12,7 @@ import FormField from '@/components/FormField';
 import Select from '@/components/Select';
 import TabNav, { TabNavItem } from '@/components/TabNav';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
+import useLanguage from '@/hooks/use-language';
 import useUserPreferences, { UserPreferences } from '@/hooks/use-user-preferences';
 import * as detailsStyles from '@/scss/details.module.scss';
 
@@ -19,10 +20,8 @@ import ChangePassword from './components/ChangePassword';
 import * as styles from './index.module.scss';
 
 const Settings = () => {
-  const {
-    t,
-    i18n: { language },
-  } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const defaultLanguage = useLanguage();
   const { data, error, update, isLoading, isLoaded } = useUserPreferences();
   const {
     handleSubmit,
@@ -41,10 +40,6 @@ const Settings = () => {
     toast.success(t('general.saved'));
   });
 
-  const defaultLanguage = Object.values<string>(Language).includes(language)
-    ? language
-    : Language.English;
-
   return (
     <Card className={classNames(detailsStyles.container, styles.container)}>
       <CardTitle title="settings.title" subtitle="settings.description" />