Skip to content
This repository has been archived by the owner on May 15, 2024. It is now read-only.

Commit

Permalink
feat(component): add component for rendering authenticated Drawer items
Browse files Browse the repository at this point in the history
  ## what
  - create a component used for render Drawer List Items that display
    links to the app IF the user is authenticated
  - Render the 'home' button
  - Render the 'logout' button

  ## how

  ## why
  - better to split the component for rendering drawer list items if
    the user is authenticated or not.
  - this component later will be used to render page links to the APP
    that will require the to be authenticated

  ## where

  ## usage
  • Loading branch information
Clumsy-Coder committed Sep 11, 2022
1 parent 46a8488 commit 8158168
Showing 1 changed file with 47 additions and 0 deletions.
47 changes: 47 additions & 0 deletions src/components/Drawer/authDrawerItems.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import { useRouter } from 'next/router';

import Link from '@components/Link';
import { IpageLinks, pageLinks } from '@components/Drawer/pageLinks';
import { useDeleteAuthSessionMutation } from '@redux/AuthSession';

/**
* Render Drawer list items IF the user is authenticated
*/
const AuthDrawerListItems: React.FC = () => {
const { home, logout } = pageLinks;
const [deleteAuthSession] = useDeleteAuthSessionMutation();
const router = useRouter();

const drawerLinks: IpageLinks[] = [home];

const handleLogoutOnclick = () => {
deleteAuthSession()
.then(() => {
router.push('/login').catch(console.error);
})
.catch(console.error);
};

return (
<>
{drawerLinks.map(({ linkName, url, icon }) => (
// using Material-UI ListItem as button to navigate NextJS pages
// https://dev.to/ivandotv/using-next-js-link-component-with-material-ui-buttons-and-menu-items-3m6a
<ListItem button component={Link} href={url} key={linkName} rel='noreferrer'>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={linkName} />
</ListItem>
))}
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
<ListItem button onClick={handleLogoutOnclick}>
<ListItemIcon>{logout.icon}</ListItemIcon>
<ListItemText primary={logout.linkName} />
</ListItem>
</>
);
};

export default AuthDrawerListItems;

0 comments on commit 8158168

Please sign in to comment.