review fixes

src/client/index.tsx

@@ -1,12 +1,12 @@
 import { hydrate } from "inferno-hydrate";
 import { BrowserRouter } from "inferno-router";
 import { App } from "../shared/components/app";
-import { i18n } from "../shared/i18next";
+import { getLanguageFromCookie, i18n } from "../shared/i18next";
 
 // Setting the language for js browsers
 // If query param is set, server updates cookie automatically,
 // so no need to check the query here
-const languageCookie = document.cookie.split("=")[1];
+const languageCookie = getLanguageFromCookie(document.cookie);
 if (languageCookie != null) {
   i18n.changeLanguage(languageCookie);
 } else {

src/server/index.tsx

@@ -7,7 +7,7 @@ import { App } from "../shared/components/app";
 // import { routes } from "../shared/routes";
 import process from "process";
 import { Helmet } from "inferno-helmet";
-import { i18n } from "../shared/i18next";
+import { getLanguageFromCookie, i18n } from "../shared/i18next";
 
 const server = express();
 const port = 1234;
@@ -23,21 +23,21 @@ server.get("/*", async (req, res) => {
   const context = {} as any;
 
   // Setting the language for non-js browsers
-  const cookieLang = req.headers.cookie?.split("=")[1];
+  const cookieLang = getLanguageFromCookie(req.headers.cookie);
+  var language: string;
   if (req.query["lang"] != null) {
-    const lang = req.query["lang"].toString();
-    res.cookie("lang", lang, {
+    language = req.query["lang"].toString();
+    res.cookie("lang", language, {
       expires: new Date(Date.now() + 60 * 60 * 24 * 7),
     });
-    i18n.changeLanguage(lang);
   } else if (cookieLang != null) {
-    i18n.changeLanguage(cookieLang);
+    language = cookieLang;
   } else {
-    const lang = req.headers["accept-language"]
+    language = req.headers["accept-language"]
       ? req.headers["accept-language"].split(",")[0]
       : "en";
-    i18n.changeLanguage(lang);
   }
+  i18n.changeLanguage(language);
 
   const wrapper = (
     <StaticRouter location={req.url} context={context}>

src/shared/components/navbar.tsx

@@ -1,4 +1,4 @@
-import { Component, ChangeEvent } from "inferno";
+import { Component, ChangeEvent, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import { LinkLine } from "./link-line";
 import { Icon } from "./icon";
@@ -9,7 +9,7 @@ export class Navbar extends Component<any, any> {
     super(props, context);
   }
 
-  handleLanguageChange(event: ChangeEvent<HTMLSelectElement>) {
+  handleLanguageChange(_: any, event: ChangeEvent<HTMLSelectElement>) {
     location.href = `/?lang=${event.target.value}`;
   }
 
@@ -34,7 +34,7 @@ export class Navbar extends Component<any, any> {
           <div class="nav-right">
             <div>
               <select
-                onChange={this.handleLanguageChange}
+                onChange={linkEvent(this, this.handleLanguageChange)}
                 class="text-light bd-dark language-selector"
               >
                 {this.languageList().map((language, i) => (

src/shared/i18next.ts

@@ -110,3 +110,19 @@ export { resources };
 export function getLanguageName(key: string): string {
   return languageNames[key];
 }
+
+// https://gist.github.com/hunan-rostomyan/28e8702c1cecff41f7fe64345b76f2ca
+export function getLanguageFromCookie(cookies?: string): string | null {
+  if (cookies == null) {
+    return null;
+  }
+
+  const key = "lang=";
+  return (
+    cookies
+      .split(";")
+      .map(c => c.trim())
+      .filter(cookie => cookie.substring(0, key.length) === key)
+      .map(cookie => cookie.substring(key.length))[0] || null
+  );
+}