fix: always set selected language on html tag

handball-referee · Jan 21, 2021 · 4bfd001 · 4bfd001
1 parent 2cfd792
commit 4bfd001
Show file tree

Hide file tree

Showing 5 changed files with 631 additions and 607 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "idb": "^5.0.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^11.0.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
@@ -51,6 +52,7 @@
     "@types/loadable__server": "^5.9.1",
     "@types/react": "^16.9.9",
     "@types/react-dom": "^16.9.2",
+    "@types/react-helmet": "^6.1.0",
     "@types/react-router": "^5.1.2",
     "@types/react-router-dom": "^5.1.2",
     "@types/webpack": "^4.39.5",

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { Helmet } from 'react-helmet';
 import { Route, useHistory } from "react-router";
 import loadable from "@loadable/component";
 import Menu from "./Menu";
@@ -29,7 +30,7 @@ const Stats = loadable(() => import("./stats/Stats"), {
 });
 
 const AppShell: FunctionComponent = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { listen } = useHistory();
   const { updateConfig } = useAnalytics();
 
@@ -42,6 +43,7 @@ const AppShell: FunctionComponent = () => {
 
   return (
     <div id="page-wrapper">
+      <Helmet htmlAttributes={{ lang: i18n.language }} />
       <Menu />
       <div id="page-body">
         <Tracking />

diff --git a/src/components/Info.tsx b/src/components/Info.tsx
@@ -29,7 +29,7 @@ const Info = () => {
   };
 
   return (
-    <div id="info-wrapper">
+    <div id="info-wrapper" lang="en">
       <div id="info" className="info-box">
         <div>Website built by</div>
         <div id="info-name">Christoph Kraemer</div>

diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">