Merge pull request #32 from AAISS/feat/add-log-out

feat: add logout
AAISS · Nov 28, 2023 · d845973 · d845973
2 parents 7947495 + 42dc739
commit d845973
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 130 deletions.
diff --git a/frontend/src/components/app-bar/AppBar.jsx b/frontend/src/components/app-bar/AppBar.jsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState } from 'react';
 import MenuIcon from '@mui/icons-material/Menu';
+import { Link } from '@mui/material';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -15,7 +15,7 @@ import Toolbar from '@mui/material/Toolbar';
 import AAISS from '../../assets/AAISS.png';
 import { useConfig } from '../../providers/config-provider/ConfigProvider.jsx';
 import Image from '../image/Image.jsx';
-import useNavItem from './useNavItem.js';
+import LogoutModal from '../logout-modal/logout-modal.jsx';
 
 const drawerWidth = 240;
 
@@ -32,10 +32,13 @@ const NavBarImage = () => (
 );
 
 export default function DrawerAppBar() {
-  const { ROUTES, currentRoute, setCurrentRoute, accessToken, refreshToken } = useConfig();
-  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const { ROUTES, accessToken, refreshToken } = useConfig();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [logoutModalVisibility, setLogoutModalVisibility] = useState(false);
 
-  const { getVariant } = useNavItem();
+  const handleLogout = () => {
+    setLogoutModalVisibility(true);
+  };
 
   const appBarPaths = Object.keys(ROUTES).filter((route) => !ROUTES[route]?.hideFromAppBar);
 
@@ -61,17 +64,19 @@ export default function DrawerAppBar() {
     return true;
   };
 
+  const shouldShowLogoutButton = Boolean(accessToken);
+
   const drawer = (
     <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
-      <Link to={ROUTES.home.path} className="logo-item" onClick={() => setCurrentRoute(ROUTES.home)}>
+      <Link href={ROUTES.home.path} className="logo-item">
         <NavBarImage />
       </Link>
-      <Divider style={{ backgroundColor: 'var(--dark-text-color)' }} />
+      <Divider />
       <List>
         {appBarPaths.map((name, index) => {
           return (
             shouldShowRoute(ROUTES[name]) && (
-              <Link to={ROUTES[name].path} style={{ color: 'white', textDecoration: 'none' }} key={index}>
+              <Link href={ROUTES[name].path} style={{ color: 'white', textDecoration: 'none' }} key={index}>
                 <ListItem disablePadding>
                   <ListItemButton sx={{ textAlign: 'center' }}>
                     <ListItemText primary={name} />
@@ -81,12 +86,18 @@ export default function DrawerAppBar() {
             )
           );
         })}
+        <ListItem disablePadding>
+          <ListItemButton sx={{ textAlign: 'center' }} onClick={handleLogout}>
+            <ListItemText primary="log out" sx={{ color: 'var(--error-color)' }} />
+          </ListItemButton>
+        </ListItem>
       </List>
     </Box>
   );
 
   return (
     <Box sx={{ display: 'flex' }} className="nav">
+      <LogoutModal visibility={logoutModalVisibility} onVisibilityChange={() => setLogoutModalVisibility(false)} />
       <AppBar component="nav" className="backdrop-color">
         <Toolbar>
           <IconButton
@@ -98,18 +109,19 @@ export default function DrawerAppBar() {
           >
             <MenuIcon />
           </IconButton>
-          <Link to={ROUTES.home.path} className="logo-item" onClick={() => setCurrentRoute(ROUTES.home)}>
+          <Link href={ROUTES.home.path} className="logo-item">
             <NavBarImage />
           </Link>
           <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
             {appBarPaths.map((name, index) => {
               return (
                 shouldShowRoute(ROUTES[name]) && (
                   <Button
-                    href={ROUTES[name].path}
                     key={index}
-                    variant={getVariant(ROUTES[name].path, currentRoute.path)}
-                    onClick={() => setCurrentRoute(ROUTES[name])}
+                    href={ROUTES[name].path}
+                    // TODO: below lines will break the app on production :))
+                    // variant={ROUTES[name].path === currentRoute.path ? 'contained' : 'text'}
+                    // onClick={() => setCurrentRoute(ROUTES[name])}
                     sx={{
                       color: '#fff',
                       paddingRight: 2,
@@ -121,28 +133,31 @@ export default function DrawerAppBar() {
               );
             })}
           </Box>
+          {shouldShowLogoutButton && (
+            <Button color="error" variant="contained" sx={{ marginLeft: 'auto' }} onClick={handleLogout}>
+              logout
+            </Button>
+          )}
         </Toolbar>
       </AppBar>
-      <nav className="nav">
-        <Drawer
-          variant="temporary"
-          open={mobileOpen}
-          onClose={handleDrawerToggle}
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
-          sx={{
-            display: { xs: 'block', sm: 'none' },
-            '& .MuiDrawer-paper': {
-              boxSizing: 'border-box',
-              width: drawerWidth,
-              background: 'var(--background-color-lighter-20)',
-            },
-          }}
-        >
-          {drawer}
-        </Drawer>
-      </nav>
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={handleDrawerToggle}
+        ModalProps={{
+          keepMounted: true, // Better open performance on mobile.
+        }}
+        sx={{
+          display: { xs: 'block', sm: 'none' },
+          '& .MuiDrawer-paper': {
+            boxSizing: 'border-box',
+            width: drawerWidth,
+            background: 'var(--background-color)',
+          },
+        }}
+      >
+        {drawer}
+      </Drawer>
     </Box>
   );
 }
diff --git a/frontend/src/components/item-card/more-info-modal.jsx b/frontend/src/components/item-card/more-info-modal.jsx
@@ -63,7 +63,6 @@ const MoreInfoModal = ({
     <Dialog
       onClose={onVisibilityChange}
       open={visibility}
-      backgroundColor="var(--background-color)"
       PaperProps={{
         style: {
           backgroundColor: 'var(--background-color-lighter-20)',

diff --git a/frontend/src/components/logout-modal/logout-modal.jsx b/frontend/src/components/logout-modal/logout-modal.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
+import PropTypes from 'prop-types';
+import ROUTES from '../../providers/config-provider/ROUTES';
+
+const LogoutModal = ({ visibility, onVisibilityChange }) => {
+  const handleLogout = () => {
+    localStorage.removeItem('user');
+    onVisibilityChange();
+
+    window.location.reload();
+    window.location.replace(ROUTES.signup.path);
+  };
+
+  return (
+    <Dialog
+      onClose={onVisibilityChange}
+      open={visibility}
+      PaperProps={{
+        style: {
+          backgroundColor: 'var(--background-color-lighter-20)',
+        },
+      }}
+    >
+      <DialogTitle variant="h5">Logout</DialogTitle>
+      <DialogContent>
+        <DialogContentText>Are you sure you want to logout?</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onVisibilityChange}>Cancel</Button>
+        <Button onClick={handleLogout} color="error" variant="contained">
+          Logout
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+LogoutModal.propTypes = {
+  visibility: PropTypes.bool,
+  onVisibilityChange: PropTypes.func,
+};
+
+export default LogoutModal;