fix(striker-ui): add logout, simplify action buttons in AnvilDrawer

striker-ui/components/AnvilDrawer.tsx

@@ -1,29 +1,25 @@
-import { Dashboard as DashboardIcon } from '@mui/icons-material';
 import {
-  Box,
+  Dashboard as DashboardIcon,
-  Divider,
+  Logout as LogoutIcon,
-  Drawer,
+} from '@mui/icons-material';
-  List,
+import { Drawer, List, ListItem, ListItemButton, styled } from '@mui/material';
-  ListItem,
-  ListItemButton,
-  styled,
-} from '@mui/material';
 import { Dispatch, SetStateAction } from 'react';
 
-import { DIVIDER, GREY } from '../lib/consts/DEFAULT_THEME';
+import { OLD_ICON } from '../lib/consts/DEFAULT_THEME';
 import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
 
+import api from '../lib/api';
+import Divider from './Divider';
+import FlexBox from './FlexBox';
+import handleAPIError from '../lib/handleAPIError';
 import { BodyText } from './Text';
 import useCookieJar from '../hooks/useCookieJar';
 
 const PREFIX = 'AnvilDrawer';
 
 const classes = {
+  actionIcon: `${PREFIX}-actionIcon`,
   list: `${PREFIX}-list`,
-  divider: `${PREFIX}-divider`,
-  text: `${PREFIX}-text`,
-  dashboardButton: `${PREFIX}-dashboardButton`,
-  dashboardIcon: `${PREFIX}-dashboardIcon`,
 };
 
 const StyledDrawer = styled(Drawer)(() => ({
@@ -31,22 +27,9 @@ const StyledDrawer = styled(Drawer)(() => ({
     width: '200px',
   },
 
-  [`& .${classes.divider}`]: {
+  [`& .${classes.actionIcon}`]: {
-    backgroundColor: DIVIDER,
-  },
-
-  [`& .${classes.text}`]: {
-    paddingTop: '.5em',
-    paddingLeft: '1.5em',
-  },
-
-  [`& .${classes.dashboardButton}`]: {
-    paddingLeft: '.1em',
-  },
-
-  [`& .${classes.dashboardIcon}`]: {
     fontSize: '2.3em',
-    color: GREY,
+    color: OLD_ICON,
   },
 }));
 
@@ -74,31 +57,44 @@ const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
               {sessionUser ? <>Welcome, {sessionUser.name}</> : 'Unregistered'}
             </BodyText>
           </ListItem>
-          <Divider className={classes.divider} />
+          <Divider />
           <ListItemButton component="a" href="/index.html">
-            <Box display="flex" flexDirection="row" width="100%">
+            <FlexBox fullWidth row spacing="2em">
-              <Box className={classes.dashboardButton}>
+              <DashboardIcon className={classes.actionIcon} />
-                <DashboardIcon className={classes.dashboardIcon} />
+              <BodyText>Dashboard</BodyText>
-              </Box>
+            </FlexBox>
-              <Box flexGrow={1} className={classes.text}>
-                <BodyText text="Dashboard" />
-              </Box>
-            </Box>
           </ListItemButton>
           {ICONS.map(
             (icon): JSX.Element => (
-              <ListItemButton key={icon.image} component="a" href={icon.uri}>
+              <ListItemButton
-                <Box display="flex" flexDirection="row" width="100%">
+                key={`anvil-drawer-${icon.image}`}
-                  <Box>
+                component="a"
-                    <img alt="" key="icon" src={icon.image} {...ICON_SIZE} />
+                href={icon.uri}
-                  </Box>
+              >
-                  <Box flexGrow={1} className={classes.text}>
+                <FlexBox fullWidth row spacing="2em">
-                    <BodyText text={icon.text} />
+                  <img alt={icon.text} src={icon.image} {...ICON_SIZE} />
-                  </Box>
+                  <BodyText>{icon.text}</BodyText>
-                </Box>
+                </FlexBox>
               </ListItemButton>
             ),
           )}
+          <ListItemButton
+            onClick={() => {
+              api
+                .put('/auth/logout')
+                .then(() => {
+                  window.location.replace('/login');
+                })
+                .catch((error) => {
+                  handleAPIError(error);
+                });
+            }}
+          >
+            <FlexBox fullWidth row spacing="2em">
+              <LogoutIcon className={classes.actionIcon} />
+              <BodyText>Logout</BodyText>
+            </FlexBox>
+          </ListItemButton>
         </List>
       </div>
     </StyledDrawer>