Commit 52fdbc64 authored by TJHeeringa's avatar TJHeeringa

Made notifications

parent 4df853b2
import React, {Component} from 'react';
import { Link, withRouter } from 'react-router-dom'
import IconButton from '@material-ui/core/IconButton';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import 'App/Components/Header/Header.css';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
export default function AvatarMenu(props){
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleClick}
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}
>
{props.avatar_menu_items.map((avatar_menu_item, id)=>{
return <MenuItem
component={Link}
key={"list_link_menu_item"+id}
to={avatar_menu_item.to}
primary={avatar_menu_item.primary}
>
<ListItemIcon>{avatar_menu_item.icon}</ListItemIcon>
<ListItemText primary={avatar_menu_item.primary} />
</MenuItem>
})}
</Menu>
</div>
)
}
\ No newline at end of file
import React, { Component } from 'react';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import 'App/Components/Header/Header.css';
import ListItemText from '@material-ui/core/ListItemText';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import NotificationsIcon from '@material-ui/icons/Notifications';
import PropTypes from "prop-types";
const useStyles = makeStyles(theme => ({
content: {
width: 200,
flexGrow: 1,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
}));
function Notification(props) {
const { date, message } = props;
const classes = useStyles();
return (
<div className={classes.content}>
<Typography variant={'caption'}>{date}</Typography>
<ListItemText primary={message} />
</div>
)
}
Notification.propTypes = {
date: PropTypes.string.isRequired,
message: PropTypes.string.isRequired,
};
export default function NotificationMenu(props){
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleClick}
color="inherit"
>
<NotificationsIcon/>
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={open}
onClose={handleClose}
>
{props.notifications.map((notification, id)=>{return (
<MenuItem
key={"list_link_menu_item"+id}
>
<Notification {...notification}/>
</MenuItem>
)})}
</Menu>
</div>
)
}
NotificationMenu.propTypes = {
notifications: PropTypes.array.isRequired,
};
\ No newline at end of file
......@@ -24,6 +24,8 @@ import Sidebar from "App/Components/PageLayout/SideBar/SideBar";
import {AlertHandler, AlertHandlerContext} from "../AlertHandler";
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import AvatarMenu from "./Menu/AvatarMenu";
import NotificationMenu from "./Menu/NotificationMenu";
const drawerWidth = 240;
......@@ -135,18 +137,20 @@ class PageLayout extends Component {
const { classes } = this.props;
const openAccount = Boolean(this.state.anchorEl);
let list_link_menu_items = [];
let avatar_menu_items = [];
if (localStorage.getItem("authenticated") === 'true') {
list_link_menu_items.push(
avatar_menu_items.push(
{to: "/protected/v/settings", icon: <FaUser/>, primary: 'Profile'},
{to: "/account/logout", icon: <FaSignOutAlt/>, primary: 'Logout'},
)
} else {
list_link_menu_items.push(
avatar_menu_items.push(
{to: "/account/login", icon: <FaSignInAlt/>, primary: 'Login'},
{to: "/account/register", icon: <FaRegistered/>, primary: 'Register'},
)
}
// let notifications = [{date: new Date().toLocaleDateString(), message: "Hoi"}];
let notifications = [];
return (
<div className={classes.root}>
......@@ -177,44 +181,10 @@ class PageLayout extends Component {
<div className="HeaderBar">
<Header {...this.props} component={this.props.header}/>
{this.props.avatar &&
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={this.handleMenu}
color="inherit"
>
<AccountCircle/>
</IconButton>
<Menu
id="menu-appbar"
anchorEl={this.state.anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={openAccount}
onClose={this.handleClose}
>
{list_link_menu_items.map((list_link_menu_item, id)=>{
return <MenuItem
component={Link}
key={"list_link_menu_item"+id}
to={list_link_menu_item.to}
primary={list_link_menu_item.primary}
>
<ListItemIcon>{list_link_menu_item.icon}</ListItemIcon>
<ListItemText primary={list_link_menu_item.primary} />
</MenuItem>
})}
</Menu>
</div>
<>
<NotificationMenu notifications={notifications}/>
<AvatarMenu avatar_menu_items={avatar_menu_items}/>
</>
}
</div>
</Toolbar>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment