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,12 +9,14 @@ 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> = {
+/*
+ * 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<string, string> => {
+  return {
     bg: t`Bulgarian`,
     cs: t`Czech`,
     da: t`Danish`,
@@ -47,6 +49,7 @@ export const languages: Record<string, string> = {
     'zh-hans': t`Chinese (Simplified)`,
     'zh-hant': t`Chinese (Traditional)`
   };
+};
 
 export function LanguageContext({ children }: { children: JSX.Element }) {
   const [language] = useLocalState((state) => [state.language]);
@@ -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} />
+                {IS_DEV && (
                   <Button onClick={enablePseudoLang} variant="light">
                     <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;