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/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);

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<string, string> = {
+/*
-  bg: t`Bulgarian`,
+ * Function which returns a record of supported languages.
-  cs: t`Czech`,
+ * Note that this is not a constant, as it is used in the LanguageSelect component
-  da: t`Danish`,
+ */
-  de: t`German`,
+export const getSupportedLanguages = (): Record<string, string> => {
-  el: t`Greek`,
+  return {
-  en: t`English`,
+    bg: t`Bulgarian`,
-  es: t`Spanish`,
+    cs: t`Czech`,
-  'es-mx': t`Spanish (Mexican)`,
+    da: t`Danish`,
-  fa: t`Farsi / Persian`,
+    de: t`German`,
-  fi: t`Finnish`,
+    el: t`Greek`,
-  fr: t`French`,
+    en: t`English`,
-  he: t`Hebrew`,
+    es: t`Spanish`,
-  hi: t`Hindi`,
+    'es-mx': t`Spanish (Mexican)`,
-  hu: t`Hungarian`,
+    fa: t`Farsi / Persian`,
-  it: t`Italian`,
+    fi: t`Finnish`,
-  ja: t`Japanese`,
+    fr: t`French`,
-  ko: t`Korean`,
+    he: t`Hebrew`,
-  nl: t`Dutch`,
+    hi: t`Hindi`,
-  no: t`Norwegian`,
+    hu: t`Hungarian`,
-  pl: t`Polish`,
+    it: t`Italian`,
-  pt: t`Portuguese`,
+    ja: t`Japanese`,
-  'pt-br': t`Portuguese (Brazilian)`,
+    ko: t`Korean`,
-  ru: t`Russian`,
+    nl: t`Dutch`,
-  sk: t`Slovak`,
+    no: t`Norwegian`,
-  sl: t`Slovenian`,
+    pl: t`Polish`,
-  sv: t`Swedish`,
+    pt: t`Portuguese`,
-  th: t`Thai`,
+    'pt-br': t`Portuguese (Brazilian)`,
-  tr: t`Turkish`,
+    ru: t`Russian`,
-  vi: t`Vietnamese`,
+    sk: t`Slovak`,
-  'zh-hans': t`Chinese (Simplified)`,
+    sl: t`Slovenian`,
-  'zh-hant': t`Chinese (Traditional)`
+    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 <I18nProvider i18n={i18n}>{children}</I18nProvider>;
 }
 
-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);

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 }) {
               {' '}
               <Group>
                 <LanguageSelect width={200} />
-                <Button onClick={enablePseudoLang} variant="light">
+                {IS_DEV && (
-                  <Trans>Use pseudo language</Trans>
+                  <Button onClick={enablePseudoLang} variant="light">
-                </Button>
+                    <Trans>Use pseudo language</Trans>
+                  </Button>
+                )}
               </Group>
             </td>
           </tr>

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;
+  language: string;
-  setLanguage: (newLanguage: Locales) => void;
+  setLanguage: (newLanguage: string) => void;
   // theme
   primaryColor: string;
   whiteColor: string;