From 66835bfac62f242479ad61cfd7ad7a78925db2b5 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Wed, 13 May 2020 19:25:14 +0300
Subject: [PATCH] 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 (
     <div>
       <Header />
+      <br />
       <Switch>
         <Route exact path="/" component={HomePage} />
         <Route path="/about" component={AboutPage} />
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 = () => {
             <Typography variant="h6" className={classes.title}>
               Reverse proxy
             </Typography>
-
-            <NavLink to="/" activeStyle={activeStyle} exact>
-              Home
-            </NavLink>
-            {" | "}
-            <NavLink to="/courses" activeStyle={activeStyle}>
-              Courses
-            </NavLink>
-            {" | "}
-            <NavLink to="/sessions" activeStyle={activeStyle}>
-              Sessions
-            </NavLink>
-            {" | "}
-            <NavLink to="/about" activeStyle={activeStyle}>
-              About
-            </NavLink>
+            <Navigation />
           </Container>
 
           <div>
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 (
+    <>
+      <NavLink to="/" activeStyle={activeStyle} exact>
+        {t("Menu.Home")}
+      </NavLink>
+      {" | "}
+      <NavLink to="/sessions" activeStyle={activeStyle}>
+        {t("Menu.Sessions")}
+      </NavLink>
+      {" | "}
+      <NavLink to="/about" activeStyle={activeStyle}>
+        {t("Menu.About")}
+      </NavLink>
+    </>
+  );
+};
+
+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 (
     <>