From 60b14f4c9f538beab115107a36314c2ece936d2b Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Wed, 13 May 2020 19:16:13 +0300
Subject: [PATCH] change language

---
 package-lock.json                      |   8 +++++
 package.json                           |   1 +
 public/flags/flags-iso/shiny/32/GB.png | Bin 0 -> 1690 bytes
 public/flags/flags-iso/shiny/32/RO.png | Bin 0 -> 937 bytes
 public/locales/en/translations.json    |   4 +++
 public/locales/ro/translations.json    |   4 +++
 src/components/common/Header.js        |  43 ++++++++++++++++++++-----
 7 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 public/flags/flags-iso/shiny/32/GB.png
 create mode 100644 public/flags/flags-iso/shiny/32/RO.png

diff --git a/package-lock.json b/package-lock.json
index 19db94d..ca762cf 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 857335e..f6cb6b8 100644
--- a/package.json
+++ b/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",
diff --git a/public/flags/flags-iso/shiny/32/GB.png b/public/flags/flags-iso/shiny/32/GB.png
new file mode 100644
index 0000000000000000000000000000000000000000..531836ec058768fdbf91dd9909d73d4ef0fbad88
GIT binary patch
literal 1690
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

literal 0
HcmV?d00001

diff --git a/public/flags/flags-iso/shiny/32/RO.png b/public/flags/flags-iso/shiny/32/RO.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c689264f59c83b068fc0d37242d70755621a440
GIT binary patch
literal 937
zcmV;a16KTrP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000AUNkl<ZSi|j>
zF^?oQ5QV>Tckk>hw<0(pT~0twfcO<8g!}=-A0QwjL*)D%;?s!?q9cF|5F{{rJ3Vc?
z9)aEN?%BQ7MVH)KYK?p3cD;J_>e=u(9>=>r46~jOzl!f)@A>y|d~oqEKm7DYn@(Ro
zyid5k#t#QR{_W?X2QC4=`}%WU9j6s8V|URr^c};{0r1f$pJ8TL=<2F6H2-==68ZbG
zkEeuE#HR>STW9-AUVif}z-15gAYT6dH-G(eQ&$uKW}&_YF!<urU%^U1GXpCSBq6EJ
zA-y;ufy)u#65ara@boEOUiu#3q7NL$NKCn9Zy^A=g2*MHQUz2|%p6Eq1%iN-SN}N%
zm<v&WFpl`p7X&kj|J{tlGzT=yR6%$Nh%n2oL>ung5N2R0t$<Z_T;&4^-Mqr<7Y#s6
znV7r;o<Rhbj42E(+20jGV_^dT%nJ)hAjeZGOf&#;Qg%}ETK^i<XE162=BR5REpQV-
zS~#iHm-5snXENF{Fin{$W-NrNEyIGbO*et;{@&7R5>xxb1XfGIT#7EvB3u|aokosh
zBv`1mw?=*4it#uu1`^KV`!YWrM{32Z@W2t-h0DRX%fKmSQgVbaQ!Pc<_=4F&t?7=X
zEz^`rwr#BlwG|Da7|9zEN~A2N<QM^&6D**rRhxZ*6#zRc#X4Y0HGMDOs|HMk6U+Hb
zgg7xeQ_N*S2!#dgOmyk>{<>x)t{EuaU=@H#s844lkeFg-ie3Q-V|KcdeSs4j)y8W|
zAh0QJSg}<X7(k5VjR+}iIK^D)uGyPWpv;0yEsi}zMAd+4E@F)~o6*H^KLf>xZ1MUv
z{S*z@{Yh^D#aK<R7?9R%sI+N5*FZ6%T>EQbU|j|y-xF<{zEuWFmn?_WTnd*^&cv+~
zW@3!Q7{R*w*v1P=5(zVC&1u^P@OhpR^SPv1`4x~$q!_mVhTxbYeGt~wlhC?_=o-mF
z-zY7(mLf<EGuHRZ<)fB<wqtkaBysG*0^n*F*bmP2{(^pYMd)_r(y`V7hIJoQJjPl4
zb}ukNcs7<hLMvubf0pnVxgC!jFNOucdsjQc=?{AC7{Z=TLpu@I<HzTRH@cFgxed>{
z!zFIx#Nl*Hf3<HO`viCfJbBCa(Hr2;aw#qM!u~A-NWjSBc<0CeTDmo_9lBjY00000
LNkvXXu0mjf%ciPX

literal 0
HcmV?d00001

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index b2ab8d7..b57e979 100644
--- a/public/locales/en/translations.json
+++ b/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"
 }
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index ea92948..92ec1c9 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -1,3 +1,7 @@
 {
+  "Language": {
+    "English": "Engleză",
+    "Romanian": "Română"
+  },
   "Session": "Sesiune"
 }
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
index ed40f05..b4e7fff 100644
--- a/src/components/common/Header.js
+++ b/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) => () => {
-    i18n.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>