I am trying to put in a role-based drop-down menu / NavBar into my React project and I am having trouble getting it to display the correct options. At the minute it just says ‘SignUp’ but it should have Messages, Notifications, Profile, ScubaSchoolAccess, SiteAdminAccess and Logout.
The drop-down is also displaying halfway down the page and it doesn’t toggle on and off. The json object with the user properties is in my web console so it is not a problem with that. I take it is a problem with the values in my constructor for the toggle part?
I am new to JavaScript and have tried to modify this from a function with hooks.
The error messages on the console are as below.
Warning: Failed prop type: Invalid prop `in` of type `function` supplied to `Transition`, expected `boolean`.
Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `Unstable_TrapFocus`, expected `boolean`.
Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `ForwardRef(SimpleBackdrop)`, expected `boolean`.
Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `ForwardRef(Modal)`, expected `boolean`.
Warning: Failed prop type: Invalid prop `in` of type `function` supplied to `ForwardRef(Grow)`, expected `boolean`.
NavBar.component.js
class ScubaNavbar extends Component {
constructor(props) {
super(props);
this.logOut = this.logOut.bind(this);
this.state = {
showUserLevelAccess: false,
showSchoolLevelAccess: false,
showAdminLevelAccess: false,
currentUser: undefined,
anchorEl: null,
isMenuOpen: Boolean,
};
history.listen((location) => {
props.dispatch(clearMessage());
});
}
componentDidMount() {
const user = this.props.user;
console.log(user)
if (user) {
this.setState({
currentUser: user,
showUserLevelAccess: user.userRoles === 1,
showSchoolLevelAccess: user.userRoles === 2,
showSiteAdminLevelAccess: user.userRoles === 3,
});
}
}
logOut() {
this.props.dispatch(logout());
}
render() {
const {
// current user gives specific user details
currentUser,
// levels give role access
showUserLevelAccess,
showSchoolLevelAccess,
showSiteAdminLevelAccess,
} = this.state;
const { classes } = this.props;
const handleProfileMenuOpen =() => {
this.setState({anchorEl: this.currentTarget, open: Boolean(this.currentTarget)});
};
const handleMenuClose = () => {
this.setState({anchorEl: this.currentTarget === null});
};
const menuId = 'dark-search-account-menu';
const renderMenu = (
<Menu
anchorEl={this.state.anchorEl}
anchorOrigin={{vertical: 'top', horizontal: 'right'}}
id={menuId}
keepMounted
transformOrigin={{vertical: 'top', horizontal: 'right'}}
open={this.state.isMenuOpen}
onClose={handleMenuClose}>
{showUserLevelAccess && (
<MenuItem>
<IconButton aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon/>
</Badge>
</IconButton>
<p>Messages</p>
</MenuItem>
)}
{showUserLevelAccess && (
<MenuItem>
<IconButton aria-label="show 11 new notifications" color="inherit">
<Badge badgeContent={11} color="secondary">
<NotificationsIcon/>
</Badge>
</IconButton>
<p>Notifications</p>
</MenuItem>
)}
{showUserLevelAccess && (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle/>
</IconButton>
<p>Profile</p>
</MenuItem>
)}
{showSchoolLevelAccess && (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle/>
</IconButton>
<p>Scuba School Access</p>
</MenuItem>
)}
{showSiteAdminLevelAccess && (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle/>
</IconButton>
<p>Site Admin Access</p>
</MenuItem>
)}
{currentUser ? (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit">
<Link href="/login" className="nav-link" onClick={this.logOut}/>
<ExitToAppIcon/>
</IconButton>
<p>LogOut</p>
</MenuItem>
) : (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit">
<Link href="/registration" className="nav-link"/>
<AccountCircle/>
</IconButton>
<p>SignUp</p>
</MenuItem>
)}
</Menu>
);
return (
<div className={classes.grow}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon/>
</IconButton>
<Typography className={classes.title} variant="h6" noWrap>
Sustainable Scuba
</Typography>
<div className={classes.grow}/>
<div className={classes.sectionDesktop}>
<IconButton
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle/>
</IconButton>
</div>
<div className={classes.sectionMobile}>
<IconButton
aria-label="show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="inherit"
>
<MoreIcon/>
</IconButton>
</div>
</Toolbar>
</AppBar>
{renderMobileMenu}
{renderMenu}
</div>
);
}
}
export default withStyles(useStyles)(ScubaNavbar);