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 0000000..531836e Binary files /dev/null and b/public/flags/flags-iso/shiny/32/GB.png differ 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 0000000..5c68926 Binary files /dev/null and b/public/flags/flags-iso/shiny/32/RO.png differ 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 = () => {