diff --git a/packages/ui/src/components/SettingsModal/SettingsModal.tsx b/packages/ui/src/components/SettingsModal/SettingsModal.tsx index 61595406..85cafd3b 100644 --- a/packages/ui/src/components/SettingsModal/SettingsModal.tsx +++ b/packages/ui/src/components/SettingsModal/SettingsModal.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; +import { languages } from '../../constants/languages'; import { useSettingsStore } from '../../hooks/useSettings'; import { useUIConfig } from '../../hooks/useUIConfig'; import { InputField } from '../Form/InputField/InputField'; @@ -15,7 +16,6 @@ export interface SettingsModalProps { } const pollingIntervals = [-1, 3, 5, 10, 20, 60, 60 * 5, 60 * 15]; -const languages = ['en-US', 'es-ES', 'fr-FR', 'pt-BR', 'zh-CN']; const maxJobsPerPage = 300; export const SettingsModal = ({ open, onClose }: SettingsModalProps) => { diff --git a/packages/ui/src/constants/languages.ts b/packages/ui/src/constants/languages.ts new file mode 100644 index 00000000..d976c1b2 --- /dev/null +++ b/packages/ui/src/constants/languages.ts @@ -0,0 +1 @@ +export const languages = ['en-US', 'es-ES', 'fr-FR', 'pt-BR', 'zh-CN'] as const; diff --git a/packages/ui/src/services/i18n.ts b/packages/ui/src/services/i18n.ts index 75020eb7..866487a9 100644 --- a/packages/ui/src/services/i18n.ts +++ b/packages/ui/src/services/i18n.ts @@ -2,6 +2,7 @@ import i18n from 'i18next'; import HttpBackend from 'i18next-http-backend'; import { initReactI18next } from 'react-i18next'; import enLocale from 'date-fns/locale/en-US'; +import { languages } from '../constants/languages'; export let dateFnsLocale = enLocale; const dateFnsLocaleMap = { @@ -22,6 +23,9 @@ async function setDateFnsLocale(lng: string) { } export async function initI18n({ lng, basePath }: { lng: string; basePath: string }) { + const fallbackLng = 'en-US'; + const supportedLanguage = languages.find((language) => language === lng) || fallbackLng; + const i18nextInstance = i18n .use(initReactI18next) // passes i18n down to react-i18next .use(HttpBackend); @@ -33,12 +37,12 @@ export async function initI18n({ lng, basePath }: { lng: string; basePath: strin (window as any).testI18n = (lng = 'cimode') => i18nextInstance.changeLanguage(lng); } - i18nextInstance.on('languageChanged', (lng) => setDateFnsLocale(lng)); - await setDateFnsLocale(lng); + i18nextInstance.on('languageChanged', (newLanguage) => setDateFnsLocale(newLanguage)); + await setDateFnsLocale(supportedLanguage); return i18nextInstance.init({ - lng, - fallbackLng: 'en-US', + lng: supportedLanguage, + fallbackLng, defaultNS: 'messages', ns: 'messages', load: 'currentOnly',