From 5fa2e7a473180def1bfcc529fb528e9555a133bb Mon Sep 17 00:00:00 2001
From: Sabrina Kuah <swkuah@gmail.com>
Date: Fri, 16 Apr 2021 02:17:49 -0700
Subject: [PATCH] Disable drawer nav links, #116

---
 client/src/components/DrawerNav.js | 194 ++++++++++++++---------------
 1 file changed, 97 insertions(+), 97 deletions(-)

diff --git a/client/src/components/DrawerNav.js b/client/src/components/DrawerNav.js
index 39c52c6..a3afc1e 100644
--- a/client/src/components/DrawerNav.js
+++ b/client/src/components/DrawerNav.js
@@ -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,
@@ -21,84 +21,84 @@ 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>
@@ -106,15 +106,15 @@ function DrawerNav({ window, user, children }) {
       </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>
@@ -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={{
@@ -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}
@@ -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 />
@@ -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>
@@ -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;