Move user addon of navbar into separate file

This commit is contained in:
Ceda EI 2021-04-10 08:40:28 +05:30
parent f9bbb2c07d
commit d7c3aa61a5
2 changed files with 66 additions and 50 deletions

View File

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

View File

@ -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;