Add action to avatar menu dropdown

This commit is contained in:
Leonardo Murça 2022-06-15 15:03:12 -03:00
parent ab6252e67a
commit ff8c8073db
3 changed files with 53 additions and 42 deletions

View file

@ -1,4 +1,4 @@
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
import {
CalendarMonth,
CalendarMonthOutlined,
@ -15,37 +15,55 @@ import { Container } from '@mui/system';
import useLayoutType from './hooks/useLayoutType';
import Toolbar from './components/Toolbar';
import { useUser } from './context/user';
import { useAuthState } from './context/auth';
function AuthenticatedApp() {
const navigate = useNavigate();
const { state } = useUser();
const { logout } = useAuthState();
const layoutType = useLayoutType();
const avatarMenuOptions = [
{
text: 'Meu Perfil',
action: () => navigate('/profile', { replace: true }),
},
{
text: 'Sair',
action: logout,
},
];
return (
<>
<Toolbar
title={
<p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
Olá, <strong>{state.user.name}</strong> 👋
</p>
}
layoutType={layoutType}
/>
<Container
maxWidth="false"
sx={layoutType === 'desktop' ? container : mobileContainer}
>
<MainMenu
options={menuOptions(state.pathname)}
state &&
state.user && (
<>
<Toolbar
title={
<p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
Olá, <strong>{state.user.name}</strong> 👋
</p>
}
layoutType={layoutType}
avatarMenuOptions={avatarMenuOptions}
/>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/info" element={<Information />} />
<Route path="/calendar" element={<Calendar />} />
<Route path="/login" element={<Navigate to="/home" />} />
</Routes>
</Container>
</>
<Container
maxWidth="false"
sx={layoutType === 'desktop' ? container : mobileContainer}
>
<MainMenu
options={menuOptions(state.pathname)}
layoutType={layoutType}
/>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/info" element={<Information />} />
<Route path="/calendar" element={<Calendar />} />
<Route path="/login" element={<Navigate to="/home" />} />
</Routes>
</Container>
</>
)
);
}

View file

@ -11,12 +11,10 @@ import {
} from '@mui/material';
import { useState } from 'react';
function Toolbar({ title, layoutType }) {
function Toolbar({ title, layoutType, avatarMenuOptions }) {
const [anchorElUser, setAnchorElUser] = useState(null);
const [anchorElNotifications, setAnchorElNotifications] = useState(null);
console.log(layoutType);
switch (layoutType) {
case 'desktop':
return (
@ -87,12 +85,11 @@ function Toolbar({ title, layoutType }) {
open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)}
>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Meu perfil</Typography>
</MenuItem>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Sair</Typography>
</MenuItem>
{avatarMenuOptions.map(option => (
<MenuItem key={option.text} onClick={option.action}>
<Typography textAlign="center">{option.text}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Box>
@ -168,12 +165,11 @@ function Toolbar({ title, layoutType }) {
open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)}
>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Meu perfil</Typography>
</MenuItem>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Sair</Typography>
</MenuItem>
{avatarMenuOptions.map(option => (
<MenuItem key={option.text} onClick={option.action}>
<Typography textAlign="center">{option.text}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Box>

View file

@ -1,15 +1,12 @@
import { useAuthState } from '../../context/auth';
import { useUser } from '../../context/user';
function Home() {
const { isPending, classrooms } = useUser();
const { logout } = useAuthState();
return (
<div>
<h2>Página inicial</h2>
<button onClick={classrooms}>Get classrooms</button>
<button onClick={logout}>Logout</button>
{isPending && <h1>Loading...</h1>}
</div>
);