From 5aeee0bc01369e5eeb73a12a97ff3d1695644bba Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Thu, 17 Oct 2019 22:15:31 -0600
Subject: [PATCH] Add language picker to footer

---
 app/appListeners.js      |  2 +-
 app/i18n/index.js        |  6 +++++-
 app/i18n/locales/en.json |  3 ++-
 app/views/global.js      | 32 ++++++++++++++++++++++++--------
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/app/appListeners.js b/app/appListeners.js
index 9dc9f5a..1b946e4 100644
--- a/app/appListeners.js
+++ b/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 => {
diff --git a/app/i18n/index.js b/app/i18n/index.js
index dd5ed5e..d4aa20f 100644
--- a/app/i18n/index.js
+++ b/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) {
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index 8037141..ae06199 100644
--- a/app/i18n/locales/en.json
+++ b/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",
diff --git a/app/views/global.js b/app/views/global.js
index e70e3bb..232ab3a 100644
--- a/app/views/global.js
+++ b/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>