From 4e3b41332d16cf0ec70cf5813989c74955d49d5a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 15:52:39 +0100
Subject: [PATCH] :zap: Language now managed in VueX store

---
 src/App.vue                                  |  2 ++
 src/components/Settings/LanguageSwitcher.vue | 24 ++++++++++++++++----
 src/store.js                                 |  7 +++++-
 src/utils/StoreMutations.js                  |  1 +
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 014a0652..d9619e04 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@ import Footer from '@/components/PageStrcture/Footer.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
+import Keys from '@/utils/StoreMutations';
 import {
   localStorageKeys,
   splashScreenTime,
@@ -107,6 +108,7 @@ export default {
     /* Fetch or detect users language, then apply it */
     applyLanguage() {
       const language = this.getLanguage();
+      this.$store.commit(Keys.SET_LANGUAGE, language);
       this.$i18n.locale = language;
       document.getElementsByTagName('html')[0].setAttribute('lang', language);
     },
diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue
index 26925772..7705cef0 100644
--- a/src/components/Settings/LanguageSwitcher.vue
+++ b/src/components/Settings/LanguageSwitcher.vue
@@ -28,6 +28,7 @@
 import Button from '@/components/FormElements/Button';
 import SaveConfigIcon from '@/assets/interface-icons/save-config.svg';
 import ErrorHandler from '@/utils/ErrorHandler';
+import Keys from '@/utils/StoreMutations';
 import { languages } from '@/utils/languages';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 
@@ -39,15 +40,28 @@ export default {
   },
   data() {
     return {
-      language: this.getCurrentLanguage(), // The currently selected language
+      language: '', // The currently selected language
       modalName: modalNames.LANG_SWITCHER, // Key for modal
     };
   },
+  created() {
+    // Initiate the current language, with VueX state
+    this.language = this.savedLanguage;
+  },
   computed: {
     /* Get appConfig from store */
     appConfig() {
       return this.$store.getters.appConfig;
     },
+    /* The ISO code for the users language, synced with VueX store */
+    savedLanguage: {
+      get() {
+        return this.getIsoFromLangObj(this.$store.state.lang);
+      },
+      set(newLang) {
+        this.$store.commit(Keys.SET_LANGUAGE, newLang.code);
+      },
+    },
     /* Return the array of language objects, plus a friends name */
     languageList: () => languages.map((lang) => {
       const newLang = lang;
@@ -76,6 +90,7 @@ export default {
       if (this.checkLocale(selectedLanguage)) {
         localStorage.setItem(localStorageKeys.LANGUAGE, selectedLanguage.code);
         this.applyLanguageLocally();
+        this.savedLanguage = selectedLanguage;
         const successMsg = `${selectedLanguage.flag} `
           + `${this.$t('language-switcher.success-msg')} ${selectedLanguage.name}`;
         this.$toasted.show(successMsg, { className: 'toast-success' });
@@ -85,11 +100,10 @@ export default {
         ErrorHandler('Unable to apply language');
       }
     },
-    /* Gets the users current language from local storage */
-    getCurrentLanguage() {
+    /* Gets the ISO code for a given language object */
+    getIsoFromLangObj(langObj) {
       const getLanguageFromIso = (iso) => languages.find((lang) => lang.code === iso);
-      const current = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language;
-      return getLanguageFromIso(current);
+      return getLanguageFromIso(langObj);
     },
   },
 };
diff --git a/src/store.js b/src/store.js
index 8e260a9f..306c80ef 100644
--- a/src/store.js
+++ b/src/store.js
@@ -8,11 +8,12 @@ import filterUserSections from '@/utils/CheckSectionVisibility';
 
 Vue.use(Vuex);
 
-const { UPDATE_CONFIG, SET_MODAL_OPEN } = Keys;
+const { UPDATE_CONFIG, SET_MODAL_OPEN, SET_LANGUAGE } = Keys;
 
 const store = new Vuex.Store({
   state: {
     config: {},
+    lang: '', // The users language, auto-detected or read from local storage / config
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
   },
   getters: {
@@ -39,11 +40,15 @@ const store = new Vuex.Store({
     [UPDATE_CONFIG](state, config) {
       state.config = config;
     },
+    [SET_LANGUAGE](state, lang) {
+      state.lang = lang;
+    },
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
     },
   },
   actions: {
+    /* Called when app first loaded. Reads config and sets state */
     initializeConfig({ commit }) {
       const Accumulator = new ConfigAccumulator();
       const config = Accumulator.config();
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 4e220880..f5ab815f 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -2,6 +2,7 @@
 const KEY_NAMES = [
   'UPDATE_CONFIG',
   'SET_MODAL_OPEN',
+  'SET_LANGUAGE',
 ];
 
 // Convert array of key names into an object, and export