implement language setting

src/Model/Global/settingsModel.ts

@@ -30,7 +30,7 @@ export default class SettingsModel {
         this.storageModel.write(path, newValue);
     }
 
-    setLanguage(newValue: Languages): void {
+    setLanguage(newValue: string): void {
         this.language = newValue;
         const path = StorageModel.getPath(
             StorageModelSubPaths.SettingsModel,
@@ -40,7 +40,7 @@ export default class SettingsModel {
     }
 
     // load
-    loadUsernam(): void {
+    loadUsername(): void {
         const path = StorageModel.getPath(
             StorageModelSubPaths.SettingsModel,
             filePaths.settingsModel.username,
@@ -71,8 +71,9 @@ export default class SettingsModel {
     constructor(storageModel: StorageModel) {
         this.storageModel = storageModel;
 
-        this.loadUsernam();
+        this.loadUsername();
         this.loadFirstDayofWeek();
+        this.loadLanguage();
     }
 
     static getSystemLanguage(): Languages {

src/View/Modals/settingsModal.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { Languages } from "../translations";
+import { languageNames, Languages } from "../translations";
 import SettingsViewModel, {
     SettingsModalPages,
 } from "../../ViewModel/Global/settingsViewModel";
@@ -158,9 +158,9 @@ function SettingsRegionalPane(
                     <select bind:value={settingsViewModel.language}>
                         {...[...Object.values(Languages)].map((language, i) =>
                             Option(
+                                languageNames[language],
                                 language,
-                                i.toString(),
-                                i.toString() ==
+                                language ==
                                     settingsViewModel.language.value,
                             ),
                         )}

src/View/translations.ts

@@ -828,6 +828,12 @@ export const allTranslations: {
     },
 };
 
+export const languageNames = {
+    en: "English",
+    de: "Deutsch",
+    es: "Español",
+}
+
 export type Translations = typeof englishTranslations;
 export enum Languages {
     English = "en",

src/ViewModel/Global/settingsViewModel.ts

@@ -12,9 +12,10 @@ export default class SettingsViewModel {
     selectedModalPage: React.State<SettingsModalPages> = new React.State(
         SettingsModalPages.Appearance,
     );
+    requiresReload = new React.State<boolean>(false);
 
     firstDayOfWeek: React.State<string> = new React.State("0");
-    language: React.State<Languages> = new React.State(Languages.English);
+    language: React.State<Languages|string> = new React.State(Languages.English);
 
     // guards
     cannotSetName: React.State<boolean> = React.createProxyState(
@@ -44,6 +45,9 @@ export default class SettingsViewModel {
 
     hideSettingsModal = (): void => {
         this.isShowingSettingsModal.value = false;
+        if (this.requiresReload.value == true) {
+            window.location.reload();
+        }
     };
 
     showModalPage = (page: SettingsModalPages): void => {
@@ -55,9 +59,14 @@ export default class SettingsViewModel {
         this.username.value = coreViewModel.settingsModel.username;
         this.usernameInput.value = coreViewModel.settingsModel.username;
         this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
+        this.language.value = coreViewModel.settingsModel.language;
 
         // subscriptions
         this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
+        this.language.subscribeSilent((newValue) => {
+            this.coreViewModel.settingsModel.setLanguage(newValue);
+            this.requiresReload.value = true;
+        })
     }
 }