From 55c64b546f26670dde64f2dca029d04b856f278f Mon Sep 17 00:00:00 2001 From: Oliver Date: Wed, 21 Feb 2024 08:38:47 +1100 Subject: [PATCH] Locales fix (#6528) * Fix for language select translation - Function rather than const variable - Allows for recalculation * Hide pseudo language if not in dev mode --- .../src/components/items/LanguageSelect.tsx | 8 +- src/frontend/src/contexts/LanguageContext.tsx | 75 ++++++++++--------- .../AccountSettings/DisplaySettingsPanel.tsx | 9 ++- src/frontend/src/states/LocalState.tsx | 5 +- 4 files changed, 52 insertions(+), 45 deletions(-) diff --git a/src/frontend/src/components/items/LanguageSelect.tsx b/src/frontend/src/components/items/LanguageSelect.tsx index 90fb22ebf3..201a65e1e9 100644 --- a/src/frontend/src/components/items/LanguageSelect.tsx +++ b/src/frontend/src/components/items/LanguageSelect.tsx @@ -1,7 +1,7 @@ import { Select, SelectItem } from '@mantine/core'; import { useEffect, useState } from 'react'; -import { Locales, languages } from '../../contexts/LanguageContext'; +import { getSupportedLanguages } from '../../contexts/LanguageContext'; import { useLocalState } from '../../states/LocalState'; export function LanguageSelect({ width = 80 }: { width?: number }) { @@ -15,14 +15,16 @@ export function LanguageSelect({ width = 80 }: { width?: number }) { // change global language on change useEffect(() => { if (value === null) return; - setLanguage(value as Locales); + setLanguage(value as string); }, [value]); // set language on component load useEffect(() => { + const languages = getSupportedLanguages(); + const newLangOptions = Object.keys(languages).map((key) => ({ value: key, - label: languages[key as Locales] + label: languages[key as string] })); setLangOptions(newLangOptions); setValue(locale); diff --git a/src/frontend/src/contexts/LanguageContext.tsx b/src/frontend/src/contexts/LanguageContext.tsx index 2c926e8ea8..9bf739893c 100644 --- a/src/frontend/src/contexts/LanguageContext.tsx +++ b/src/frontend/src/contexts/LanguageContext.tsx @@ -9,43 +9,46 @@ import { useServerApiState } from '../states/ApiState'; import { useLocalState } from '../states/LocalState'; import { fetchGlobalStates } from '../states/states'; -// Definitions -export type Locales = keyof typeof languages | 'pseudo-LOCALE'; - export const defaultLocale = 'en'; -export const languages: Record = { - bg: t`Bulgarian`, - cs: t`Czech`, - da: t`Danish`, - de: t`German`, - el: t`Greek`, - en: t`English`, - es: t`Spanish`, - 'es-mx': t`Spanish (Mexican)`, - fa: t`Farsi / Persian`, - fi: t`Finnish`, - fr: t`French`, - he: t`Hebrew`, - hi: t`Hindi`, - hu: t`Hungarian`, - it: t`Italian`, - ja: t`Japanese`, - ko: t`Korean`, - nl: t`Dutch`, - no: t`Norwegian`, - pl: t`Polish`, - pt: t`Portuguese`, - 'pt-br': t`Portuguese (Brazilian)`, - ru: t`Russian`, - sk: t`Slovak`, - sl: t`Slovenian`, - sv: t`Swedish`, - th: t`Thai`, - tr: t`Turkish`, - vi: t`Vietnamese`, - 'zh-hans': t`Chinese (Simplified)`, - 'zh-hant': t`Chinese (Traditional)` +/* + * Function which returns a record of supported languages. + * Note that this is not a constant, as it is used in the LanguageSelect component + */ +export const getSupportedLanguages = (): Record => { + return { + bg: t`Bulgarian`, + cs: t`Czech`, + da: t`Danish`, + de: t`German`, + el: t`Greek`, + en: t`English`, + es: t`Spanish`, + 'es-mx': t`Spanish (Mexican)`, + fa: t`Farsi / Persian`, + fi: t`Finnish`, + fr: t`French`, + he: t`Hebrew`, + hi: t`Hindi`, + hu: t`Hungarian`, + it: t`Italian`, + ja: t`Japanese`, + ko: t`Korean`, + nl: t`Dutch`, + no: t`Norwegian`, + pl: t`Polish`, + pt: t`Portuguese`, + 'pt-br': t`Portuguese (Brazilian)`, + ru: t`Russian`, + sk: t`Slovak`, + sl: t`Slovenian`, + sv: t`Swedish`, + th: t`Thai`, + tr: t`Turkish`, + vi: t`Vietnamese`, + 'zh-hans': t`Chinese (Simplified)`, + 'zh-hant': t`Chinese (Traditional)` + }; }; export function LanguageContext({ children }: { children: JSX.Element }) { @@ -125,7 +128,7 @@ export function LanguageContext({ children }: { children: JSX.Element }) { return {children}; } -export async function activateLocale(locale: Locales) { +export async function activateLocale(locale: string) { const { messages } = await import(`../locales/${locale}/messages.ts`); i18n.load(locale, messages); i18n.activate(locale); diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/DisplaySettingsPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/DisplaySettingsPanel.tsx index 7194b63c0b..03ed13a417 100644 --- a/src/frontend/src/pages/Index/Settings/AccountSettings/DisplaySettingsPanel.tsx +++ b/src/frontend/src/pages/Index/Settings/AccountSettings/DisplaySettingsPanel.tsx @@ -3,6 +3,7 @@ import { Button, Container, Group, Table, Title } from '@mantine/core'; import { ColorToggle } from '../../../../components/items/ColorToggle'; import { LanguageSelect } from '../../../../components/items/LanguageSelect'; +import { IS_DEV } from '../../../../main'; import { useLocalState } from '../../../../states/LocalState'; export function DisplaySettingsPanel({ height }: { height: number }) { @@ -35,9 +36,11 @@ export function DisplaySettingsPanel({ height }: { height: number }) { {' '} - + {IS_DEV && ( + + )} diff --git a/src/frontend/src/states/LocalState.tsx b/src/frontend/src/states/LocalState.tsx index bc82d5a18a..3198adc5f2 100644 --- a/src/frontend/src/states/LocalState.tsx +++ b/src/frontend/src/states/LocalState.tsx @@ -3,7 +3,6 @@ import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme'; import { create } from 'zustand'; import { persist } from 'zustand/middleware'; -import { Locales } from '../contexts/LanguageContext'; import { HostList } from './states'; interface LocalStateProps { @@ -14,8 +13,8 @@ interface LocalStateProps { hostKey: string; hostList: HostList; setHostList: (newHostList: HostList) => void; - language: Locales; - setLanguage: (newLanguage: Locales) => void; + language: string; + setLanguage: (newLanguage: string) => void; // theme primaryColor: string; whiteColor: string;