Add language picker to footer

app/appListeners.js

@@ -14,7 +14,7 @@ export const appListeners = (app, state, emitter) => {
     emitter.on('set-language', newLanguage => {
       app.setSettingsItem('lang', newLanguage);
       state.language = newLanguage;
-      emitter.emit('render', () => { });
+      emitter.emit('render');
     });
 
     app.checkIfLoggedIn(state).then(isLoggedIn => {

app/i18n/index.js

@@ -7,7 +7,11 @@ export class I18n {
       default: en,
       en,
     };
-    this.language = appState.language;
+    this.appState = appState;
+  }
+
+  get language () {
+    return this.appState.language;
   }
 
   translate (section, phrase) {

app/i18n/locales/en.json

@@ -8,7 +8,8 @@
     "menu_account": "My Profile",
     "menu_logout": "Log Out",
     "footer_repo": "Repo",
-    "footer_chat": "Chat"
+    "footer_chat": "Chat",
+    "change_language": "Change Language"
   },
   "home": {
     "logged_out_subtitle": "All the Book Buzz in Once Place",

app/views/global.js

@@ -40,14 +40,30 @@ export const globalView = (state, emit, view) => {
   </main>
 
   <footer>
-    <nav>
-      <div class="links">
-        <a href="https://gitlab.com/Alamantus/Readlebee" class="pseudo button">
-          ${i18n.__('global.footer_repo')}
-        </a>
-        <a href="https://gitter.im/Readlebee/community" class="pseudo button">
-          ${i18n.__('global.footer_chat')}
-        </a>
+    <nav class="flex one">
+      <div class="two-third-600">
+        <div class="links">
+          <a href="https://gitlab.com/Alamantus/Readlebee" class="pseudo button">
+            ${i18n.__('global.footer_repo')}
+          </a>
+          <a href="https://gitter.im/Readlebee/community" class="pseudo button">
+            ${i18n.__('global.footer_chat')}
+          </a>
+        </div>
+      </div>
+      <div class="third-600">
+        <label class="flex">
+          <span class="third">${i18n.__('global.change_language')}:</span>
+          <select class="two-third" onchange=${e => emit('set-language', e.target.value)}>
+            ${Object.keys(i18n.availableLanguages).map(languageKey => {
+              if (languageKey === 'default') return null;
+              const language = i18n.availableLanguages[languageKey];
+              return html`<option value=${language.locale} ${state.language === language.locale ? 'selected' : null}>
+                ${language.name}
+              </option>`;
+            })}
+          </select>
+        </label>
       </div>
     </nav>
   </footer>