Move user addon of navbar into separate file

src/pages/Home.js

@@ -12,14 +12,12 @@ import {
 	FormControlLabel,
 	IconButton,
 	Link,
-	Menu,
-	MenuItem,
 	Typography
 } from "@material-ui/core";
 import { red } from "@material-ui/core/colors";
-import { AccountCircle, Favorite, Link as LinkIcon, Delete } from "@material-ui/icons";
+import { Favorite, Link as LinkIcon, Delete } from "@material-ui/icons";
-import { useHistory } from "react-router-dom";
 import NavBar from "./shared/NavBar";
+import NavBarUser from "./shared/NavBarUser";
 
 import config from "../config";
 // TODO: Replace with API accessed feeds
@@ -78,23 +76,7 @@ FeedCard.propTypes = {
 };
 
 function App() {
-	const history = useHistory();
-	const [anchorEl, setAnchorEl] = useState(null);
 	const [categories, setCategories] = useState(feedCategories);
-	const open = Boolean(anchorEl);
-
-	function handleMenu(event) {
-		setAnchorEl(event.currentTarget);
-	}
-
-	function handleClose() {
-		setAnchorEl(null);
-	}
-
-	function logout() {
-		handleClose();
-		history.push("/");
-	}
 
 	function toggleCategory(category) {
 		if (categories.includes(category))
@@ -115,36 +97,7 @@ function App() {
 
 	return (<>
 		<NavBar>
-			<div>
+			<NavBarUser />
-				<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>
 		</NavBar>
 		<div className="base">
 			<div className="feeds">

src/pages/shared/NavBarUser.js

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { AccountCircle } from "@material-ui/icons";
+
+import {
+	IconButton,
+	Menu,
+	MenuItem,
+} from "@material-ui/core";
+
+function NavBarUser() {
+	const history = useHistory();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+
+	function handleMenu(event) {
+		setAnchorEl(event.currentTarget);
+	}
+
+	function handleClose() {
+		setAnchorEl(null);
+	}
+
+	function logout() {
+		handleClose();
+		history.push("/");
+	}
+
+	return (
+		<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>
+	);
+}
+
+export default NavBarUser;