Skip to content

Commit

Permalink
Disable drawer nav links, #116
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabkuah
sabkuah committed Apr 16, 2021
1 parent ee0567d commit 5fa2e7a
Showing 1 changed file with 97 additions and 97 deletions.
194 changes: 97 additions & 97 deletions client/src/components/DrawerNav.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from "react"
import { Link } from "react-router-dom"
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import {
Divider,
CssBaseline,
Expand All @@ -21,100 +21,100 @@ import {
TextField,
DialogActions,
Button,
} from "@material-ui/core"
import { makeStyles, useTheme } from "@material-ui/core/styles"
import MenuIcon from "@material-ui/icons/Menu"
import DashboardIcon from "@material-ui/icons/Dashboard"
import QuestionAnswerIcon from "@material-ui/icons/QuestionAnswer"
import ChatIcon from "@material-ui/icons/Chat"
import WarningIcon from "@material-ui/icons/Warning"
import SettingsIcon from "@material-ui/icons/Settings"
import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive"
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
import ExitToAppIcon from "@material-ui/icons/ExitToApp"
import DeleteIcon from "@material-ui/icons/Delete"
import Dashboard from "../views/dashboard/Dashboard"
import { logoutUser, updateAvatar } from "../network/user"
import { useHistory } from "react-router-dom"
import useLocalStorage from "react-use-localstorage"
import toastr from "toastr"
} from '@material-ui/core';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
import DashboardIcon from '@material-ui/icons/Dashboard';
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
import ChatIcon from '@material-ui/icons/Chat';
import WarningIcon from '@material-ui/icons/Warning';
import SettingsIcon from '@material-ui/icons/Settings';
import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import DeleteIcon from '@material-ui/icons/Delete';
import Dashboard from '../views/dashboard/Dashboard';
import { logoutUser, updateAvatar } from '../network/user';
import { useHistory } from 'react-router-dom';
import useLocalStorage from 'react-use-localstorage';
import toastr from 'toastr';

const drawerWidth = 240
const drawerWidth = 240;

function DrawerNav({ window, user, children }) {
const classes = useStyles()
const theme = useTheme()
const [mobileOpen, setMobileOpen] = useState(false)
const [avatarOpen, setAvatarOpen] = useState(false)
const [avatarUrl, setAvatarUrl] = useState(user?.avatar ? user.avatar : "")
const history = useHistory()
const [token, setToken] = useLocalStorage("token", "")
const classes = useStyles();
const theme = useTheme();
const [mobileOpen, setMobileOpen] = useState(false);
const [avatarOpen, setAvatarOpen] = useState(false);
const [avatarUrl, setAvatarUrl] = useState(user?.avatar ? user.avatar : '');
const history = useHistory();
const [token, setToken] = useLocalStorage('token', '');

const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen)
}
setMobileOpen(!mobileOpen);
};

const handleLogout = async () => {
const response = await logoutUser()
toastr["success"](response.data.message)
const response = await logoutUser();
toastr['success'](response.data.message);
// alert(response.data.message);
setToken("")
setToken('');
//should setUser(null)
history.replace("/")
}
history.replace('/');
};

const handleAvatarSave = async () => {
const avatar = {
avatar: avatarUrl,
}
const response = await updateAvatar({ token, avatar })
};
const response = await updateAvatar({ token, avatar });
response.message
? toastr["success"](response.message)
: toastr["error"](response.error)
? toastr['success'](response.message)
: toastr['error'](response.error);
//call getUser here
setAvatarOpen(false)
}
setAvatarOpen(false);
};

const drawer = (
<div>
{/* <div className={classes.toolbar} /> */}
<div id="dNav-user" className="d-flex flex-column justify-content-end">
<div className="mb-3">
<div id='dNav-user' className='d-flex flex-column justify-content-end'>
<div className='mb-3'>
<Avatar
src={user?.avatar}
className="avatar-shadow"
className='avatar-shadow'
onClick={() => {
setAvatarOpen(true)
setAvatarOpen(true);
}}
/>
</div>
<div className="d-flex justify-content-between align-items-center">
<div className='d-flex justify-content-between align-items-center'>
<div>
<h5 className="mb-0">
<h5 className='mb-0'>
{user?.firstName} {user?.lastName}
</h5>
<p className="text-muted">{user?.email}</p>
<p className='text-muted'>{user?.email}</p>
</div>
<Tooltip title="Update Image">
<Tooltip title='Update Image'>
<IconButton onClick={() => setAvatarOpen(true)}>
<ExpandMoreIcon
style={{ color: "white", backgroundColor: "#0acf83" }}
style={{ color: 'white', backgroundColor: '#0acf83' }}
/>
</IconButton>
</Tooltip>
</div>
</div>
<Divider />
<List>
<Link to="/user/communities">
<Link to='/user/communities'>
<ListItem button>
<ListItemIcon>
<DashboardIcon className="dNav-icon" />
<DashboardIcon className='dNav-icon' />
</ListItemIcon>
<ListItemText primary="Communities" />
<ListItemText primary='Communities' />
</ListItem>
</Link>
<ListItem button>
{/* <ListItem button>
<ListItemIcon>
<QuestionAnswerIcon className="dNav-icon" />
</ListItemIcon>
Expand All @@ -131,60 +131,60 @@ function DrawerNav({ window, user, children }) {
<ChatIcon className="dNav-icon" />
</ListItemIcon>
<ListItemText primary="Messages" />
</ListItem>
</ListItem> */}
</List>
<Divider />
<List>
<ListItem button>
<ListItem button onClick={() => setAvatarOpen(true)}>
<ListItemIcon>
<SettingsIcon className="dNav-icon" />
<SettingsIcon className='dNav-icon' />
</ListItemIcon>
<ListItemText primary="Settings" />
<ListItemText primary='Settings' />
</ListItem>
<ListItem button>
<ListItemIcon>
<NotificationsActiveIcon className="dNav-icon" />
<NotificationsActiveIcon className='dNav-icon' />
</ListItemIcon>
<ListItemText primary="Notifications" />
<ListItemText primary='Notifications' />
</ListItem>
<ListItem button onClick={handleLogout}>
<ListItemIcon>
<ExitToAppIcon className="dNav-icon" />
<ExitToAppIcon className='dNav-icon' />
</ListItemIcon>
<ListItemText primary="Logout" />
<ListItemText primary='Logout' />
</ListItem>
</List>
</div>
)
);

const container =
window !== undefined ? () => window().document.body : undefined
window !== undefined ? () => window().document.body : undefined;

return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<AppBar position='fixed' className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
color='inherit'
aria-label='open drawer'
edge='start'
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap id="dNav-logo">
<Typography variant='h6' noWrap id='dNav-logo'>
blockwatch
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer} aria-label="mailbox folders">
<Hidden smUp implementation="css">
<nav className={classes.drawer} aria-label='mailbox folders'>
<Hidden smUp implementation='css'>
<Drawer
container={container}
variant="temporary"
anchor={theme.direction === "rtl" ? "right" : "left"}
variant='temporary'
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
Expand All @@ -197,12 +197,12 @@ function DrawerNav({ window, user, children }) {
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Hidden xsDown implementation='css'>
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
variant='permanent'
open
>
{drawer}
Expand All @@ -212,15 +212,15 @@ function DrawerNav({ window, user, children }) {
<Dialog
open={avatarOpen}
// onClose={handleAvatarSave}
aria-labelledby="form-dialog-title"
aria-labelledby='form-dialog-title'
>
<DialogTitle id="form-dialog-title">
<div className="row align-items-center justify-content-between">
<DialogTitle id='form-dialog-title'>
<div className='row align-items-center justify-content-between'>
<div>Update Your Avatar</div>
<IconButton
aria-label="delete"
aria-label='delete'
onClick={() => {
setAvatarUrl("")
setAvatarUrl('');
}}
>
<DeleteIcon />
Expand All @@ -231,23 +231,23 @@ function DrawerNav({ window, user, children }) {
<DialogContent>
<TextField
autoFocus
margin="dense"
id="avatar"
label="Image URL"
margin='dense'
id='avatar'
label='Image URL'
value={avatarUrl}
type="url"
type='url'
onChange={(e) => {
setAvatarUrl(e.target.value)
setAvatarUrl(e.target.value);
}}
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setAvatarOpen(false)} color="primary">
<Button onClick={() => setAvatarOpen(false)} color='primary'>
Cancel
</Button>

<Button onClick={handleAvatarSave} color="primary">
<Button onClick={handleAvatarSave} color='primary'>
Update
</Button>
</DialogActions>
Expand All @@ -259,42 +259,42 @@ function DrawerNav({ window, user, children }) {
<Dashboard>{children}</Dashboard>
</main>
</div>
)
);
}

const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
display: 'flex',
},
drawer: {
[theme.breakpoints.up("sm")]: {
[theme.breakpoints.up('sm')]: {
width: drawerWidth,
flexShrink: 0,
},
},
appBar: {
[theme.breakpoints.up("sm")]: {
[theme.breakpoints.up('sm')]: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
backgroundColor: "#192935",
backgroundColor: '#192935',
},
menuButton: {
marginRight: theme.spacing(2),
[theme.breakpoints.up("sm")]: {
display: "none",
[theme.breakpoints.up('sm')]: {
display: 'none',
},
},
toolbar: theme.mixins.toolbar,
drawerPaper: {
width: drawerWidth,
backgroundColor: "#192935",
color: "white",
backgroundColor: '#192935',
color: 'white',
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
}))
}));

export default DrawerNav
export default DrawerNav;

0 comments on commit 5fa2e7a

Please sign in to comment.