refactor: i18n SupportedLngs

Magickbase · Nov 3, 2023 · d301b30 · d301b30
1 parent 3af30f7
commit d301b30
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 26 deletions.
diff --git a/src/pages/StatisticsChart/activities/BalanceDistribution.tsx b/src/pages/StatisticsChart/activities/BalanceDistribution.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
-import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
 import {
   DATA_ZOOM_CONFIG,
   assertIsArray,
@@ -21,7 +21,7 @@ const parseTooltip = ({
   data,
   color,
   currentLanguage,
-}: SeriesItem & { data: string; currentLanguage: LanuageType }): string => {
+}: SeriesItem & { data: string; currentLanguage: SupportedLng }): string => {
   return `<div>${tooltipColor(color)}${widthSpan(seriesName, currentLanguage)} ${localeNumberString(data)}</div>`
 }
 

diff --git a/src/pages/StatisticsChart/activities/CellCount.tsx b/src/pages/StatisticsChart/activities/CellCount.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
-import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
 import {
   DATA_ZOOM_CONFIG,
   assertIsArray,
@@ -13,7 +13,7 @@ import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../commo
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartColorConfig } from '../../../constants/common'
 
-const widthSpan = (value: string, currentLanguage: LanuageType) =>
+const widthSpan = (value: string, currentLanguage: SupportedLng) =>
   tooltipWidth(value, currentLanguage === 'en' ? 125 : 80)
 
 const useTooltip = () => {

diff --git a/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx b/src/pages/StatisticsChart/mining/DifficultyUncleRateEpoch.tsx
@@ -5,10 +5,10 @@ import { assertSerialsDataIsString, assertIsArray, assertSerialsItem, handleAxis
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import { parseHourFromMillisecond } from '../../../utils/date'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
-import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
 import { ChartColorConfig } from '../../../constants/common'
 
-const widthSpan = (value: string, currentLanguage: LanuageType) =>
+const widthSpan = (value: string, currentLanguage: SupportedLng) =>
   tooltipWidth(value, currentLanguage === 'en' ? 90 : 80)
 
 const useTooltip = () => {

diff --git a/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx b/src/pages/StatisticsChart/monetary/SecondaryIssuance.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
 import { parseDateNoTime } from '../../../utils/date'
 import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../common'
 import {
@@ -11,7 +11,7 @@ import {
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartColorConfig } from '../../../constants/common'
 
-const widthSpan = (value: string, currentLanguage: LanuageType) =>
+const widthSpan = (value: string, currentLanguage: SupportedLng) =>
   tooltipWidth(value, currentLanguage === 'en' ? 155 : 70)
 
 const useTooltip = () => {

diff --git a/src/pages/StatisticsChart/monetary/TotalSupply.tsx b/src/pages/StatisticsChart/monetary/TotalSupply.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
-import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
 import {
   DATA_ZOOM_CONFIG,
   assertIsArray,
@@ -14,7 +14,7 @@ import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartColorConfig } from '../../../constants/common'
 
-const widthSpan = (value: string, currentLanguage: LanuageType) =>
+const widthSpan = (value: string, currentLanguage: SupportedLng) =>
   tooltipWidth(value, currentLanguage === 'en' ? 125 : 80)
 
 const useTooltip = () => {

diff --git a/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/NewDaoDeposit.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
-import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
 import {
   DATA_ZOOM_CONFIG,
   assertIsArray,
@@ -15,7 +15,7 @@ import { tooltipWidth, tooltipColor, SeriesItem, SmartChartPage } from '../commo
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartColorConfig } from '../../../constants/common'
 
-const widthSpan = (value: string, language: LanuageType) => tooltipWidth(value, language === 'en' ? 140 : 120)
+const widthSpan = (value: string, language: SupportedLng) => tooltipWidth(value, language === 'en' ? 140 : 120)
 
 const useTooltip = () => {
   const { t } = useTranslation()

diff --git a/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx b/src/pages/StatisticsChart/nervosDao/TotalDaoDeposit.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import { useTranslation } from 'react-i18next'
-import { LanuageType, useCurrentLanguage } from '../../../utils/i18n'
+import { SupportedLng, useCurrentLanguage } from '../../../utils/i18n'
 import {
   DATA_ZOOM_CONFIG,
   assertIsArray,
@@ -15,7 +15,7 @@ import { tooltipColor, tooltipWidth, SeriesItem, SmartChartPage } from '../commo
 import { ChartItem, explorerService } from '../../../services/ExplorerService'
 import { ChartColorConfig } from '../../../constants/common'
 
-const widthSpan = (value: string, language: LanuageType) => tooltipWidth(value, language === 'en' ? 168 : 110)
+const widthSpan = (value: string, language: SupportedLng) => tooltipWidth(value, language === 'en' ? 168 : 110)
 
 const useTooltip = () => {
   const { t } = useTranslation()

diff --git a/src/services/AppSettings/index.ts b/src/services/AppSettings/index.ts
@@ -1,16 +1,15 @@
 import { BehaviorSubject, Subscription, tap } from 'rxjs'
 import { PersistenceService, persistenceService } from '../PersistenceService'
 import CONFIG from '../../config'
+import { SupportedLng } from '../../utils/i18n'
 
 export const NAMESPACE_APP_SETTINGS = 'appSettings'
 
 export const KEY_DEFAULT_LANGUAGE = `${CONFIG.CHAIN_TYPE}_${NAMESPACE_APP_SETTINGS}_defaultLanguage`
 export const KEY_IS_DEPRECATED_ADDRESSES_DISPLAYED = `${NAMESPACE_APP_SETTINGS}_isDeprecatedAddressesDisplayed`
 
-export type LanuageType = 'en' | 'zh'
-
 export class AppSettings {
-  defaultLanguage$ = new BehaviorSubject(this.persistenceService.get<LanuageType>(KEY_DEFAULT_LANGUAGE, 'en'))
+  defaultLanguage$ = new BehaviorSubject(this.persistenceService.get<SupportedLng>(KEY_DEFAULT_LANGUAGE, 'en'))
 
   isDeprecatedAddressesDisplayed$ = new BehaviorSubject(
     this.persistenceService.get<boolean>(KEY_IS_DEPRECATED_ADDRESSES_DISPLAYED, false),

diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
@@ -2,10 +2,12 @@ import i18n from 'i18next'
 import { initReactI18next, useTranslation } from 'react-i18next'
 import en from '../locales/en.json'
 import zh from '../locales/zh.json'
-// TODO: utils should not import anything from services, this file may need to be refactored into services.
-import { LanuageType, appSettings } from '../services/AppSettings'
+import { appSettings } from '../services/AppSettings'
+import { includes } from './array'
 
-export type { LanuageType } from '../services/AppSettings'
+export const SupportedLngs = ['en', 'zh'] as const
+export type SupportedLng = (typeof SupportedLngs)[number]
+export const isSupportedLng = (value: unknown): value is SupportedLng => includes(SupportedLngs, value)
 
 const getDefaultLanguage = () => appSettings.defaultLanguage$.value
 const setDefaultLanguage = appSettings.defaultLanguage$.next.bind(appSettings.defaultLanguage$)
@@ -15,21 +17,19 @@ i18n.use(initReactI18next).init({
     en,
     zh,
   },
+  supportedLngs: SupportedLngs,
+  // Here, `fallbackLng` is used instead of `lng`, perhaps to continue using the results of automatic region checking?
   fallbackLng: getDefaultLanguage(),
   interpolation: {
     escapeValue: false,
   },
 })
 
 i18n.on('languageChanged', lng => {
-  if (lng === 'en' || lng === 'zh') {
-    setDefaultLanguage(lng)
-  } else {
-    setDefaultLanguage('en')
-  }
+  setDefaultLanguage(isSupportedLng(lng) ? lng : 'en')
 })
 
-export const useCurrentLanguage = (): LanuageType => {
+export const useCurrentLanguage = (): SupportedLng => {
   const { i18n } = useTranslation()
   const currentLanguage = i18n.language
   if (currentLanguage !== 'en' && currentLanguage !== 'zh') {