Remember selected language

core/src/components/language-selector.js

@@ -1,6 +1,4 @@
 import { LitElement, html, css } from 'lit'
-import { connect } from 'pwa-helpers'
-import { store } from '../store.js'
 import { use, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 
 registerTranslateConfig({
@@ -16,10 +14,9 @@ if (checkLanguage === null || checkLanguage.length === 0) {
     use(checkLanguage)
 }
 
-class LanguageSelector extends connect(store)(LitElement) {
+class LanguageSelector extends LitElement {
     static get properties() {
         return {
-            config: { type: Object },
             theme: { type: String, reflect: true }
         }
     }
@@ -57,8 +54,7 @@ class LanguageSelector extends connect(store)(LitElement) {
     render() {
         return html`
             <div style="display: inline;">
-                <select @change="${this.changeLanguage}">
-                    <option value="us">${translate("selectmenu.selectlanguage")}</option>
+                <select id="languageSelect" @change="${this.changeLanguage}">
                     <option value="us">US - ${translate("selectmenu.english")}</option>
                     <option value="de">DE - ${translate("selectmenu.german")}</option>
                     <option value="es">ES - ${translate("selectmenu.spanish")}</option>
@@ -83,17 +79,25 @@ class LanguageSelector extends connect(store)(LitElement) {
     }
 
     firstUpdated() {
-        // ...
+        const myElement = this.shadowRoot.getElementById('languageSelect')
+
+        myElement.addEventListener("change", () => {
+            this.selectElement()
+        })
+
+        this.selectElement()
+    }
+
+    selectElement() {
+        const selectedLanguage = localStorage.getItem('qortalLanguage')
+        let element = this.shadowRoot.getElementById('languageSelect')
+        element.value = selectedLanguage
     }
 
     changeLanguage(event) {
        use(event.target.value)
        localStorage.setItem('qortalLanguage', event.target.value)
     }
-
-    stateChanged(state) {
-        this.config = state.config
-    }
 }
 
 window.customElements.define('language-selector', LanguageSelector)

core/src/functional-components/settings-page.js

@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit'
 import { connect } from 'pwa-helpers'
 import { store } from '../store.js'
 import { doAddNode, doSetNode, doLoadNodeConfig } from '../redux/app/app-actions.js'
-import { get, translate, translateUnsafeHTML } from 'lit-translate'
+import { use, translate, translateUnsafeHTML, registerTranslateConfig } from 'lit-translate'
 import snackbar from './snackbar.js'
 import '../components/language-selector.js'
 import '../custom-elements/frag-file-input.js'
@@ -15,6 +15,19 @@ import '@material/mwc-textfield'
 import '@material/mwc-icon'
 import '@material/mwc-list/mwc-list-item.js'
 
+registerTranslateConfig({
+  loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())
+})
+
+const checkLanguage = localStorage.getItem('qortalLanguage')
+
+if (checkLanguage === null || checkLanguage.length === 0) {
+    localStorage.setItem('qortalLanguage', 'us')
+    use('us')
+} else {
+    use(checkLanguage)
+}
+
 let settingsDialog
 
 class SettingsPage extends connect(store)(LitElement) {