From 3959f39de5a09b4d2b3d45ffe18b7104c423918c Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Fri, 9 Apr 2021 19:10:04 +0530
Subject: [PATCH] Move Navigation Bar into a separate file for shared usage

---
 src/pages/Home.js          | 74 +++++++++++++++++---------------------
 src/pages/shared/NavBar.js | 34 ++++++++++++++++++
 2 files changed, 67 insertions(+), 41 deletions(-)
 create mode 100644 src/pages/shared/NavBar.js

diff --git a/src/pages/Home.js b/src/pages/Home.js
index 82183a1..f712ade 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 
-import { AppBar, IconButton, Menu, MenuItem, Toolbar, Typography } from "@material-ui/core";
-import { Home as HomeIcon } from "@material-ui/icons";
+import { IconButton, Menu, MenuItem } from "@material-ui/core";
 import { AccountCircle } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
+import NavBar from "./shared/NavBar";
 
 
 function App() {
@@ -25,46 +25,38 @@ function App() {
 	};
 
 	return (
-		<AppBar position="static">
-			<Toolbar style={{ justifyContent: "space-between" }}>
-				<IconButton onClick={logout} color="inherit">
-					<HomeIcon />
+		<NavBar>
+			<div>
+				<IconButton
+					aria-label="account of current user"
+					aria-controls="menu-appbar"
+					aria-haspopup="true"
+					onClick={handleMenu}
+					color="inherit"
+				>
+					<AccountCircle />
 				</IconButton>
-				<Typography variant="h6">
-					Outreaching
-				</Typography>
-				<div>
-					<IconButton
-						aria-label="account of current user"
-						aria-controls="menu-appbar"
-						aria-haspopup="true"
-						onClick={handleMenu}
-						color="inherit"
-					>
-						<AccountCircle />
-					</IconButton>
-					<Menu
-						id="menu-appbar"
-						anchorEl={anchorEl}
-						anchorOrigin={{
-							vertical: "top",
-							horizontal: "right",
-						}}
-						keepMounted
-						transformOrigin={{
-							vertical: "top",
-							horizontal: "right",
-						}}
-						open={open}
-						onClose={handleClose}
-					>
-						<MenuItem onClick={handleClose}>Profile</MenuItem>
-						<MenuItem onClick={handleClose}>My account</MenuItem>
-						<MenuItem onClick={logout}>Logout</MenuItem>
-					</Menu>
-				</div>
-			</Toolbar>
-		</AppBar>
+				<Menu
+					id="menu-appbar"
+					anchorEl={anchorEl}
+					anchorOrigin={{
+						vertical: "top",
+						horizontal: "right",
+					}}
+					keepMounted
+					transformOrigin={{
+						vertical: "top",
+						horizontal: "right",
+					}}
+					open={open}
+					onClose={handleClose}
+				>
+					<MenuItem onClick={handleClose}>Profile</MenuItem>
+					<MenuItem onClick={handleClose}>My account</MenuItem>
+					<MenuItem onClick={logout}>Logout</MenuItem>
+				</Menu>
+			</div>
+		</NavBar>
 	);
 }
 
diff --git a/src/pages/shared/NavBar.js b/src/pages/shared/NavBar.js
new file mode 100644
index 0000000..bbfc3b4
--- /dev/null
+++ b/src/pages/shared/NavBar.js
@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { AppBar, IconButton, Toolbar, Typography } from "@material-ui/core";
+import { Home as HomeIcon } from "@material-ui/icons";
+import { useHistory } from "react-router-dom";
+
+
+function NavBar(props) {
+	const history = useHistory();
+
+	const homePage = () => {
+		history.push("/");
+	};
+
+	return (
+		<AppBar position="static">
+			<Toolbar style={{ justifyContent: "space-between" }}>
+				<IconButton onClick={homePage} color="inherit">
+					<HomeIcon />
+				</IconButton>
+				<Typography variant="h6">
+					Outreaching
+				</Typography>
+				{props.children}
+			</Toolbar>
+		</AppBar>
+	);
+}
+
+NavBar.propTypes = {
+	children: PropTypes.node
+};
+export default NavBar;