From cfdbbc9cdb8069604a45616eb3d3c86053fd1625 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Wed, 13 May 2020 18:40:23 +0300 Subject: [PATCH 1/3] menu and change language button --- src/components/common/Header.js | 128 +++++++++++++++++++++++++++----- 1 file changed, 110 insertions(+), 18 deletions(-) diff --git a/src/components/common/Header.js b/src/components/common/Header.js index d66effd..ed40f05 100644 --- a/src/components/common/Header.js +++ b/src/components/common/Header.js @@ -1,27 +1,119 @@ -import React from "react"; +import React, { useState } 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"; + +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 activeStyle = { color: "#F15B2A" }; + const handleMenu = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const changeLanguage = (language) => () => { + i18n.changeLanguage(language); + setAnchorEl(null); + }; + return ( - +
+ + + + + + + + + Reverse proxy + + + + Home + + {" | "} + + Courses + + {" | "} + + Sessions + + {" | "} + + About + + + +
+ + + + + + Romana + English + +
+ + +
); }; From 60b14f4c9f538beab115107a36314c2ece936d2b Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Wed, 13 May 2020 19:16:13 +0300 Subject: [PATCH 2/3] 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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 ({ 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 = () => {
- + {i18n.language && ( + + )} { open={open} onClose={handleClose} > - Romana - English + + {t("Language.Romanian")} + + + {t("Language.English")} +
From 66835bfac62f242479ad61cfd7ad7a78925db2b5 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Wed, 13 May 2020 19:25:14 +0300 Subject: [PATCH 3/3] navigation --- public/locales/en/translations.json | 5 ++++ public/locales/ro/translations.json | 5 ++++ src/components/App.js | 3 +- src/components/{common => layout}/Header.js | 21 ++------------ src/components/layout/Navigation.js | 28 +++++++++++++++++++ .../session/components/SessionSummary.js | 2 +- 6 files changed, 43 insertions(+), 21 deletions(-) rename src/components/{common => layout}/Header.js (85%) create mode 100644 src/components/layout/Navigation.js diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index b57e979..a3723e7 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -12,5 +12,10 @@ "English": "English", "Romanian": "Romanian" }, + "Menu": { + "Home": "Home", + "Sessions": "Sessions", + "About": "About" + }, "Session": "Session" } diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 92ec1c9..4d18bed 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -3,5 +3,10 @@ "English": "Engleză", "Romanian": "Română" }, + "Menu": { + "Home": "Acasă", + "Sessions": "Sesiuni", + "About": "Despre" + }, "Session": "Sesiune" } diff --git a/src/components/App.js b/src/components/App.js index 5cf5ab7..2964252 100644 --- a/src/components/App.js +++ b/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 (
+
diff --git a/src/components/common/Header.js b/src/components/layout/Header.js similarity index 85% rename from src/components/common/Header.js rename to src/components/layout/Header.js index b4e7fff..fcd2911 100644 --- a/src/components/common/Header.js +++ b/src/components/layout/Header.js @@ -7,10 +7,10 @@ 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 { NavLink } from "react-router-dom"; 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: { @@ -26,8 +26,6 @@ const useStyles = makeStyles((theme) => ({ const Header = () => { const classes = useStyles(); - const activeStyle = { color: "#F15B2A" }; - const { t, i18n } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); @@ -78,22 +76,7 @@ const Header = () => { Reverse proxy - - - Home - - {" | "} - - Courses - - {" | "} - - Sessions - - {" | "} - - About - +
diff --git a/src/components/layout/Navigation.js b/src/components/layout/Navigation.js new file mode 100644 index 0000000..b9378ed --- /dev/null +++ b/src/components/layout/Navigation.js @@ -0,0 +1,28 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; +import { useTranslation } from "react-i18next"; + +const Navigation = () => { + const { t } = useTranslation(); + const activeStyle = { color: "#F15B2A" }; + + return ( + <> + + {t("Menu.Home")} + + {" | "} + + {t("Menu.Sessions")} + + {" | "} + + {t("Menu.About")} + + + ); +}; + +Navigation.propTypes = {}; + +export default Navigation; diff --git a/src/features/session/components/SessionSummary.js b/src/features/session/components/SessionSummary.js index 094cecf..701f56c 100644 --- a/src/features/session/components/SessionSummary.js +++ b/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 ( <>