Merged PR 13: change language

package-lock.json

@@ -7873,6 +7873,14 @@
         "scheduler": "^0.13.4"
       }
     },
+    "react-flags": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/react-flags/-/react-flags-0.1.18.tgz",
+      "integrity": "sha512-fa8D6DIZS6DWRqLcmKGIHVT13r4viHAfIRth9cFO7cDyxEPfTBbZei6p0Xeao6of4C/K4XU/j35aMjPC15ePIg==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-i18next": {
       "version": "11.4.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.4.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "prop-types": "15.7.2",
     "react": "16.8.4",
     "react-dom": "16.8.4",
+    "react-flags": "^0.1.18",
     "react-i18next": "^11.4.0",
     "react-redux": "6.0.1",
     "react-router-dom": "5.0.0",

public/locales/en/translations.json

@@ -8,5 +8,14 @@
   "NUMBER": "{{number,intlNumber}}",
   "DECIMAL": "{{number,intlDecimal}}",
   "DECIMAL2": "{{number,intlDecimal2}}",
+  "Language": {
+    "English": "English",
+    "Romanian": "Romanian"
+  },
+  "Menu": {
+    "Home": "Home",
+    "Sessions": "Sessions",
+    "About": "About"
+  },
   "Session": "Session"
 }

public/locales/ro/translations.json

@@ -1,3 +1,12 @@
 {
+  "Language": {
+    "English": "Engleză",
+    "Romanian": "Română"
+  },
+  "Menu": {
+    "Home": "Acasă",
+    "Sessions": "Sesiuni",
+    "About": "Despre"
+  },
   "Session": "Sesiune"
 }

src/components/App.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import HomePage from "./home/HomePage";
 import AboutPage from "./about/AboutPage";
-import Header from "./common/Header";
+import Header from "./layout/Header";
 import PageNotFound from "./PageNotFound";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
@@ -12,6 +12,7 @@ function App() {
   return (
     <div>
       <Header />
+      <br />
       <Switch>
         <Route exact path="/" component={HomePage} />
         <Route path="/about" component={AboutPage} />

src/components/layout/Header.js

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
+import { Container } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import Flag from "react-flags";
+import Navigation from "./Navigation";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1
+  },
+  menuButton: {
+    marginRight: theme.spacing(2)
+  },
+  title: {
+    flexGrow: 1
+  }
+}));
+
+const Header = () => {
+  const classes = useStyles();
+  const { t, i18n } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const [flag, setFlag] = useState({
+    name: "RO",
+    alt: "-"
+  });
+
+  useEffect(() => {
+    if (!i18n.language) return;
+    setFlag({
+      name: i18n.language === "en" ? "GB" : i18n.language.toUpperCase(),
+      alt: i18n.language
+    });
+  }, [i18n.language]);
+
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const changeLanguage = (language) => () => {
+    if (language != i18n.language) {
+      i18n.changeLanguage(language);
+    }
+    setAnchorEl(null);
+  };
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
+            <MenuIcon />
+          </IconButton>
+
+          <Container>
+            <Typography variant="h6" className={classes.title}>
+              Reverse proxy
+            </Typography>
+            <Navigation />
+          </Container>
+
+          <div>
+            <IconButton
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              {i18n.language && (
+                <Flag
+                  name={flag.name}
+                  format="png"
+                  pngSize={32}
+                  shiny={true}
+                  basePath="public/flags"
+                  alt={flag.alt}
+                />
+              )}
+            </IconButton>
+
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              open={open}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={changeLanguage("ro")}>
+                {t("Language.Romanian")}
+              </MenuItem>
+              <MenuItem onClick={changeLanguage("en")}>
+                {t("Language.English")}
+              </MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
+
+export default Header;

src/components/layout/Navigation.js

@@ -1,28 +1,28 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
-const Header = () => {
+const Navigation = () => {
+  const { t } = useTranslation();
   const activeStyle = { color: "#F15B2A" };
 
   return (
-    <nav>
+    <>
       <NavLink to="/" activeStyle={activeStyle} exact>
-        Home
+        {t("Menu.Home")}
-      </NavLink>
-      {" | "}
-      <NavLink to="/courses" activeStyle={activeStyle}>
-        Courses
       </NavLink>
       {" | "}
       <NavLink to="/sessions" activeStyle={activeStyle}>
-        Sessions
+        {t("Menu.Sessions")}
       </NavLink>
       {" | "}
       <NavLink to="/about" activeStyle={activeStyle}>
-        About
+        {t("Menu.About")}
       </NavLink>
-    </nav>
+    </>
   );
 };
 
-export default Header;
+Navigation.propTypes = {};
+
+export default Navigation;

src/features/session/components/SessionSummary.js

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
 
 const SessionSummary = ({ session }) => {
   const classes = useStyles();
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <>