<LangToggle/> works. Needs unit tests

webpack/i18n.ts

@@ -1,4 +1,6 @@
 import axios from "axios";
+import { Session } from "./session";
+import { BooleanSetting } from "./session_keys";
 
 function generateUrl(langCode: string) {
   let lang = langCode.slice(0, 2);
@@ -15,8 +17,10 @@ function getUserLang(langCode = "en_us") {
 
 export function detectLanguage() {
   return getUserLang(navigator.language).then(function (lang) {
-    // TODO: Possibly requires optimization using Webpack chunking.
-    let langi = require("../public/app-resources/languages/" + lang + ".js");
+    // NOTE: Some international users prefer using the app in English.
+    //       This preference is stored in `DISABLE_I18N`.
+    let choice = Session.getBool(BooleanSetting.DISABLE_I18N) ? "en" : lang;
+    let langi = require("../public/app-resources/languages/" + choice + ".js");
     return {
       nsSeparator: "",
       keySeparator: "",

webpack/nav/additional_menu.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router";
 import { t } from "i18next";
+import { LangToggle } from "./lang_toggle";
 
 export const AdditionalMenu = (logout: () => void) => {
   return <div className="nav-additional-menu">
@@ -8,6 +9,7 @@ export const AdditionalMenu = (logout: () => void) => {
       <i className="fa fa-cog"></i>
       {t("Account Settings")}
     </Link>
+    <LangToggle />
     <div>
       <a
         href="https://software.farmbot.io/docs/the-farmbot-web-app"

webpack/session.ts

@@ -3,7 +3,17 @@ import { box } from "boxed_value";
 import { get, isNumber } from "lodash";
 import { BooleanSetting, NumericSetting } from "./session_keys";
 
+/** The `Session` namespace is a wrapper for `localStorage`.
+ * Use this to avoid direct access of `localStorage` where possible.
+ *
+ * Problems this namespace aims to solve:
+ *   - Avoid duplication of localStorage key names.
+ *   - Avoid duplication of de-serialization logic.
+ *   - Avoid type errors by explicitly naming keys as (Boolean|Numeric)Setting
+ *   - Create an upgrade path for the eventual server side storage
+ */
 export namespace Session {
+  /** Key that holds the user's JWT */
   const KEY = "session";
 
   /** Replace the contents of session storage. */
@@ -32,20 +42,24 @@ export namespace Session {
     window.location.href = window.location.origin;
   }
 
+  /** Fetch a *boolean* value from localstorage. */
   export function getBool(key: BooleanSetting): boolean {
-    let output = JSON.parse(get(localStorage, key, "false"));
-    return !output;
+    return JSON.parse(localStorage.getItem(key) || "false");
   }
 
+  /** Store a boolean value in `localStorage` */
   export function setBool(key: BooleanSetting, val: boolean): void {
     localStorage.setItem(key, JSON.stringify(val));
   }
 
+  /** Extract numeric settings from `localStorage`. Returns `undefined` when
+   * none are found. */
   export function getNum(key: NumericSetting): number | undefined {
     let output = JSON.parse(get(localStorage, key, "null"));
     return (isNumber(output)) ? output : undefined;
   }
 
+  /** Set a numeric value in `localStorage`. */
   export function setNum(key: NumericSetting, val: number): void {
     localStorage.setItem(key, JSON.stringify(val));
   }

webpack/session_keys.ts

@@ -3,7 +3,8 @@ export enum BooleanSetting {
   Y_AXIS_INVERTED = "y_axis_inverted",
   Z_AXIS_INVERTED = "z_axis_inverted",
   RAW_ENCODERS = "raw_encoders",
-  SCALED_ENCODERS = "scaled_encoders"
+  SCALED_ENCODERS = "scaled_encoders",
+  DISABLE_I18N = "disable_i18n"
 }
 
 export enum NumericSetting {