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,9 @@
   "NUMBER": "{{number,intlNumber}}",
   "DECIMAL": "{{number,intlDecimal}}",
   "DECIMAL2": "{{number,intlDecimal2}}",
+  "Language": {
+    "English": "English",
+    "Romanian": "Romanian"
+  },
   "Session": "Session"
 }

public/locales/ro/translations.json

@@ -1,3 +1,7 @@
 {
+  "Language": {
+    "English": "Engleză",
+    "Romanian": "Română"
+  },
   "Session": "Sesiune"
 }

src/components/common/Header.js

@@ -1,16 +1,16 @@
-import React, { useState } from "react";
+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 LanguageIcon from "@material-ui/icons/Language";
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
 import { NavLink } from "react-router-dom";
 import { Container } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
+import Flag from "react-flags";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -26,12 +26,25 @@ const useStyles = makeStyles((theme) => ({
 
 const Header = () => {
   const classes = useStyles();
+  const activeStyle = { color: "#F15B2A" };
+
   const { t, i18n } = useTranslation();
 
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
 
-  const activeStyle = { color: "#F15B2A" };
+  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);
@@ -42,7 +55,9 @@ const Header = () => {
   };
 
   const changeLanguage = (language) => () => {
+    if (language != i18n.language) {
       i18n.changeLanguage(language);
+    }
     setAnchorEl(null);
   };
 
@@ -83,13 +98,21 @@ const Header = () => {
 
           <div>
             <IconButton
-              aria-label="account of current user"
               aria-controls="menu-appbar"
               aria-haspopup="true"
               onClick={handleMenu}
               color="inherit"
             >
-              <LanguageIcon />
+              {i18n.language && (
+                <Flag
+                  name={flag.name}
+                  format="png"
+                  pngSize={32}
+                  shiny={true}
+                  basePath="public/flags"
+                  alt={flag.alt}
+                />
+              )}
             </IconButton>
 
             <Menu
@@ -107,8 +130,12 @@ const Header = () => {
               open={open}
               onClose={handleClose}
             >
-              <MenuItem onClick={changeLanguage("ro-RO")}>Romana</MenuItem>
-              <MenuItem onClick={changeLanguage("en-GB")}>English</MenuItem>
+              <MenuItem onClick={changeLanguage("ro")}>
+                {t("Language.Romanian")}
+              </MenuItem>
+              <MenuItem onClick={changeLanguage("en")}>
+                {t("Language.English")}
+              </MenuItem>
             </Menu>
           </div>
         </Toolbar>