leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix bug when open screen from /

Browse source
This commit is contained in:
Leonardo Murça 2022-06-29 10:39:36 -03:00
parent d06352c719
commit 0ed97c74b0
9 changed files with 542 additions and 555 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/AuthenticatedApp.js
View file

@ -94,7 +94,8 @@ const menuOptions = activePath => [
selectedIcon: <HomeIcon />, selectedIcon: <HomeIcon />,
unselectedIcon: <HomeOutlined />, unselectedIcon: <HomeOutlined />,
pathname: '/home', pathname: '/home',
isActive: activePath === '/home' || activePath === '/login', isActive:
activePath === '/home' || activePath === '/login' || activePath === '/',
}, },
{ {
id: 1, id: 1,

277
src/components/AssignmentCard.js
View file

@ -12,14 +12,95 @@ import dayjs from 'dayjs';
import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter'; import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) { function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
switch (layoutType) { if (layoutType === 'desktop') {
case 'desktop': return (
return ( <Card
<Card sx={{
position: 'relative',
width: '100%',
borderLeft: `5px solid ${classrooms[0].color}`,
}}
>
{classrooms.length > 1 &&
classrooms
.filter((_, i) => i > 0)
.map(c => (
<div
key={c.id}
style={{
position: 'absolute',
height: '100%',
borderLeft: `5px solid ${c.color}`,
left: 0,
}}
></div>
))}
<CardActionArea
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'start',
}}
>
<CardContent sx={{ width: '100%' }}>
<Tooltip title={title}>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
fontSize: '17px',
}}
gutterBottom
variant="h6"
component="div"
>
{title}
</Typography>
</Tooltip>
<Stack sx={{ width: '100%' }}>
<Typography
sx={{ fontWeight: 'bold' }}
variant="p"
component="div"
>
{classrooms.map(c => c.name).join(', ')}
</Typography>
<Divider sx={{ marginTop: '10px' }} />
<Typography
sx={{ marginTop: '10px' }}
variant="p"
component="div"
>
<strong>Data de entrega: </strong>{' '}
{capitalizeFirstLetter(
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
)}
</Typography>
<Typography variant="p" component="div">
<strong>Valor: </strong>
{scores.map(s => s.value).join(', ')} pts
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
} else if (layoutType === 'mobile') {
return (
<Card
sx={{
width: 390,
borderTop: `5px solid ${classrooms[0].color}`,
}}
>
<CardActionArea
sx={{ sx={{
position: 'relative', position: 'relative',
width: '100%', display: 'flex',
borderLeft: `5px solid ${classrooms[0].color}`, flexDirection: 'column',
}} }}
> >
{classrooms.length > 1 && {classrooms.length > 1 &&
@ -30,144 +111,58 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
key={c.id} key={c.id}
style={{ style={{
position: 'absolute', position: 'absolute',
height: '100%', width: '100%',
borderLeft: `5px solid ${c.color}`, borderTop: `5px solid ${c.color}`,
left: 0, top: 0,
}} }}
></div> ></div>
))} ))}
<CardActionArea <CardContent sx={{ width: '100%' }}>
sx={{ <Tooltip title={title}>
display: 'flex', <Typography
flexDirection: 'row', sx={{
justifyContent: 'start', overflow: 'hidden',
}} textOverflow: 'ellipsis',
> display: '-webkit-box',
<CardContent sx={{ width: '100%' }}> WebkitLineClamp: 2,
<Tooltip title={title}> WebkitBoxOrient: 'vertical',
<Typography fontSize: '17px',
sx={{ }}
overflow: 'hidden', gutterBottom
textOverflow: 'ellipsis', variant="h6"
display: '-webkit-box', component="div"
WebkitLineClamp: 2, >
WebkitBoxOrient: 'vertical', {title}
fontSize: '17px', </Typography>
}} </Tooltip>
gutterBottom <Stack sx={{ width: '100%' }}>
variant="h6" <Typography
component="div" sx={{ fontWeight: 'bold' }}
> variant="p"
{title} component="div"
</Typography> >
</Tooltip> {classrooms.map(c => c.name).join(', ')}
<Stack sx={{ width: '100%' }}> </Typography>
<Typography <Divider sx={{ marginTop: '10px' }} />
sx={{ fontWeight: 'bold' }} <Typography
variant="p" sx={{ marginTop: '10px' }}
component="div" variant="p"
> component="div"
{classrooms.map(c => c.name).join(', ')} >
</Typography> <strong>Data de entrega: </strong>
<Divider sx={{ marginTop: '10px' }} /> {capitalizeFirstLetter(
<Typography dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
sx={{ marginTop: '10px' }} )}
variant="p" </Typography>
component="div" <Typography variant="p" component="div">
> <strong>Valor: </strong>
<strong>Data de entrega: </strong>{' '} {scores.map(s => s.value).join(', ')} pts
{capitalizeFirstLetter( </Typography>
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]') </Stack>
)} </CardContent>
</Typography> </CardActionArea>
<Typography variant="p" component="div"> </Card>
<strong>Valor: </strong> );
{scores.map(s => s.value).join(', ')} pts
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
case 'mobile':
return (
<Card
sx={{
width: 390,
borderTop: `5px solid ${classrooms[0].color}`,
}}
>
<CardActionArea
sx={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
}}
>
{classrooms.length > 1 &&
classrooms
.filter((_, i) => i > 0)
.map(c => (
<div
key={c.id}
style={{
position: 'absolute',
width: '100%',
borderTop: `5px solid ${c.color}`,
top: 0,
}}
></div>
))}
<CardContent sx={{ width: '100%' }}>
<Tooltip title={title}>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
fontSize: '17px',
}}
gutterBottom
variant="h6"
component="div"
>
{title}
</Typography>
</Tooltip>
<Stack sx={{ width: '100%' }}>
<Typography
sx={{ fontWeight: 'bold' }}
variant="p"
component="div"
>
{classrooms.map(c => c.name).join(', ')}
</Typography>
<Divider sx={{ marginTop: '10px' }} />
<Typography
sx={{ marginTop: '10px' }}
variant="p"
component="div"
>
<strong>Data de entrega: </strong>
{capitalizeFirstLetter(
dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
)}
</Typography>
<Typography variant="p" component="div">
<strong>Valor: </strong>
{scores.map(s => s.value).join(', ')} pts
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
default:
return null;
} }
} }

213
src/components/ClassCard.js
View file

@ -18,110 +18,54 @@ function ClassCard({
layoutType, layoutType,
onClick, onClick,
}) { }) {
switch (layoutType) { if (layoutType === 'desktop') {
case 'desktop': return (
return ( <Card sx={{ width: 390, height: 135 }}>
<Card sx={{ width: 390, height: 135 }}> <CardActionArea
<CardActionArea onClick={() => onClick()}
onClick={() => onClick()} sx={{ display: 'flex', flexDirection: 'row' }}
sx={{ display: 'flex', flexDirection: 'row' }} >
<Container
sx={{
backgroundColor: color,
width: '35%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
> >
<Container <h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '70%' }}>
<Typography
sx={{ sx={{
backgroundColor: color, overflow: 'hidden',
width: '35%', textOverflow: 'ellipsis',
height: '145px', display: '-webkit-box',
display: 'flex', WebkitLineClamp: 2,
alignItems: 'center', WebkitBoxOrient: 'vertical',
justifyContent: 'center', fontSize: '17px',
color: 'white',
}} }}
gutterBottom
variant="h6"
component="div"
> >
<h1>{abbreviation}</h1> {title}
</Container> </Typography>
<CardContent sx={{ width: '70%' }}> <Stack alignItems="center" direction="row" spacing={1}>
<Typography <AvatarGroup total={teachers.length}>
sx={{ {teachers.map(t => (
overflow: 'hidden', <Avatar
textOverflow: 'ellipsis', key={t.name}
display: '-webkit-box', alt={t.name}
WebkitLineClamp: 2, src={t.avatar}
WebkitBoxOrient: 'vertical', sx={{ width: 30, height: 30 }}
fontSize: '17px', />
}} ))}
gutterBottom </AvatarGroup>
variant="h6" <Tooltip title={teachers.map(t => t.name).join(', ')}>
component="div"
>
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Tooltip title={teachers.map(t => t.name).join(', ')}>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body3"
color="text.secondary"
>
{teachers.map(t => t.name).join(', ')}
</Typography>
</Tooltip>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
case 'mobile':
return (
<Card sx={{ width: '100%' }}>
<CardActionArea
onClick={() => onClick()}
sx={{ display: 'flex', flexDirection: 'column' }}
>
<Container
sx={{
backgroundColor: color,
width: '100%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '100%' }}>
<Typography gutterBottom variant="h6" component="div">
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Typography <Typography
sx={{ sx={{
overflow: 'hidden', overflow: 'hidden',
@ -130,19 +74,70 @@ function ClassCard({
WebkitLineClamp: 2, WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
}} }}
variant="body2" variant="body3"
color="text.secondary" color="text.secondary"
> >
{teachers.map(t => t.name).join(', ')} {teachers.map(t => t.name).join(', ')}
</Typography> </Typography>
</Stack> </Tooltip>
</CardContent> </Stack>
</CardActionArea> </CardContent>
</Card> </CardActionArea>
); </Card>
);
default: } else if (layoutType === 'mobile') {
return null; return (
<Card sx={{ width: '100%' }}>
<CardActionArea
onClick={() => onClick()}
sx={{ display: 'flex', flexDirection: 'column' }}
>
<Container
sx={{
backgroundColor: color,
width: '100%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '100%' }}>
<Typography gutterBottom variant="h6" component="div">
{title}
</Typography>
<Stack alignItems="center" direction="row" spacing={1}>
<AvatarGroup total={teachers.length}>
{teachers.map(t => (
<Avatar
key={t.name}
alt={t.name}
src={t.avatar}
sx={{ width: 30, height: 30 }}
/>
))}
</AvatarGroup>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body2"
color="text.secondary"
>
{teachers.map(t => t.name).join(', ')}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
} }
} }

101
src/components/MainMenu.js
View file

@ -20,59 +20,54 @@ function MainMenu({ options, layoutType }) {
options.find(option => option.isActive) options.find(option => option.isActive)
); );
switch (layoutType) { if (layoutType === 'desktop') {
case 'desktop': return (
return ( <Drawer sx={drawer} variant="permanent" anchor="left">
<Drawer sx={drawer} variant="permanent" anchor="left"> <Toolbar disableGutters sx={toolbar}>
<Toolbar disableGutters sx={toolbar}> <img src={logoImage} width="70" alt="Logotipo" />
<img src={logoImage} width="70" alt="Logotipo" /> </Toolbar>
</Toolbar> <List>
<List> {options.map(option => (
{options.map(option => ( <ListItem key={option.text} sx={listItem} disablePadding>
<ListItem key={option.text} sx={listItem} disablePadding> <NavLink to={option.pathname}>
<NavLink to={option.pathname}> <ListItemButton selected={option.isActive}>
<ListItemButton selected={option.isActive}> <ListItemIcon sx={listItemIcon}>
<ListItemIcon sx={listItemIcon}> {option.unselectedIcon}
{option.unselectedIcon} </ListItemIcon>
</ListItemIcon> <ListItemText primary={option.text} />
<ListItemText primary={option.text} /> </ListItemButton>
</ListItemButton> </NavLink>
</NavLink> </ListItem>
</ListItem> ))}
))} </List>
</List> </Drawer>
</Drawer> );
); } else if (layoutType === 'mobile') {
return (
case 'mobile': <Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}>
return ( <BottomNavigation
<Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}> onChange={(_, newValue) => {
<BottomNavigation const newOption = options.find(option => option.id === newValue);
onChange={(_, newValue) => { setSelectedOption(newOption);
const newOption = options.find(option => option.id === newValue); navigate(newOption.pathname, { replace: true });
setSelectedOption(newOption); }}
navigate(newOption.pathname, { replace: true }); showLabels
}} value={selectedOption.id}
showLabels >
value={selectedOption.id} {options.map(option => (
> <BottomNavigationAction
{options.map(option => ( key={option.text}
<BottomNavigationAction label={option.text}
key={option.text} icon={
label={option.text} option.id === selectedOption.id
icon={ ? option.selectedIcon
option.id === selectedOption.id : option.unselectedIcon
? option.selectedIcon }
: option.unselectedIcon />
} ))}
/> </BottomNavigation>
))} </Box>
</BottomNavigation> );
</Box>
);
default:
return null;
} }
} }

297
src/components/Toolbar.js
View file

@ -15,169 +15,164 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
const [anchorElUser, setAnchorElUser] = useState(null); const [anchorElUser, setAnchorElUser] = useState(null);
const [anchorElNotifications, setAnchorElNotifications] = useState(null); const [anchorElNotifications, setAnchorElNotifications] = useState(null);
switch (layoutType) { if (layoutType === 'desktop') {
case 'desktop': return (
return ( <Box sx={box}>
<Box sx={box}> {title}
{title} <Box sx={{ flexGrow: 0 }}>
<Box sx={{ flexGrow: 0 }}> <Box
<Box sx={{
sx={{ display: 'flex',
display: 'flex', gap: '20px',
gap: '20px', }}
>
<Tooltip title="Ver notificações">
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
onClick={e => setAnchorElNotifications(e.currentTarget)}
sx={{ p: 2 }}
>
<Badge badgeContent={17} color="success">
<NotificationsOutlined />
</Badge>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElNotifications}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}} }}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)}
> >
<Tooltip title="Ver notificações"> <MenuItem onClick={() => setAnchorElNotifications(null)}>
<IconButton <Typography textAlign="center">Notificacoes</Typography>
size="large" </MenuItem>
aria-label="show 17 new notifications" </Menu>
color="inherit" <Tooltip title="Ver opções">
onClick={e => setAnchorElNotifications(e.currentTarget)} <IconButton
sx={{ p: 2 }} onClick={e => setAnchorElUser(e.currentTarget)}
> sx={{ p: 0 }}
<Badge badgeContent={17} color="success">
<NotificationsOutlined />
</Badge>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElNotifications}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)}
> >
<MenuItem onClick={() => setAnchorElNotifications(null)}> <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
<Typography textAlign="center">Notificacoes</Typography> </IconButton>
</MenuItem> </Tooltip>
</Menu>
<Tooltip title="Ver opções">
<IconButton
onClick={e => setAnchorElUser(e.currentTarget)}
sx={{ p: 0 }}
>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu <Menu
sx={{ mt: '45px' }} sx={{ mt: '45px' }}
id="menu-appbar" id="menu-appbar"
anchorEl={anchorElUser} anchorEl={anchorElUser}
anchorOrigin={{ anchorOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'right', horizontal: 'right',
}} }}
keepMounted keepMounted
transformOrigin={{ transformOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'right', horizontal: 'right',
}} }}
open={Boolean(anchorElUser)} open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)} onClose={() => setAnchorElUser(null)}
> >
{avatarMenuOptions.map(option => ( {avatarMenuOptions.map(option => (
<MenuItem key={option.text} onClick={option.action}> <MenuItem key={option.text} onClick={option.action}>
<Typography textAlign="center">{option.text}</Typography> <Typography textAlign="center">{option.text}</Typography>
</MenuItem> </MenuItem>
))} ))}
</Menu> </Menu>
</Box>
</Box> </Box>
</Box> </Box>
); </Box>
);
case 'mobile': } else if (layoutType === 'mobile') {
return ( return (
<Box sx={mobileBox}> <Box sx={mobileBox}>
{title} {title}
<Box sx={{ flexGrow: 0 }}> <Box sx={{ flexGrow: 0 }}>
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
gap: '20px', gap: '20px',
}}
>
<Tooltip title="Ver notificações">
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
onClick={e => setAnchorElNotifications(e.currentTarget)}
sx={{ p: 2 }}
>
<Badge badgeContent={17} color="success">
<NotificationsOutlined />
</Badge>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElNotifications}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}} }}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)}
> >
<Tooltip title="Ver notificações"> <MenuItem onClick={() => setAnchorElNotifications(null)}>
<IconButton <Typography textAlign="center">Notificacoes</Typography>
size="large" </MenuItem>
aria-label="show 17 new notifications" </Menu>
color="inherit" <Tooltip title="Ver opções">
onClick={e => setAnchorElNotifications(e.currentTarget)} <IconButton
sx={{ p: 2 }} onClick={e => setAnchorElUser(e.currentTarget)}
> sx={{ p: 0 }}
<Badge badgeContent={17} color="success">
<NotificationsOutlined />
</Badge>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElNotifications}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)}
> >
<MenuItem onClick={() => setAnchorElNotifications(null)}> <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
<Typography textAlign="center">Notificacoes</Typography> </IconButton>
</MenuItem> </Tooltip>
</Menu>
<Tooltip title="Ver opções">
<IconButton
onClick={e => setAnchorElUser(e.currentTarget)}
sx={{ p: 0 }}
>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu <Menu
sx={{ mt: '45px' }} sx={{ mt: '45px' }}
id="menu-appbar" id="menu-appbar"
anchorEl={anchorElUser} anchorEl={anchorElUser}
anchorOrigin={{ anchorOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'right', horizontal: 'right',
}} }}
keepMounted keepMounted
transformOrigin={{ transformOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'right', horizontal: 'right',
}} }}
open={Boolean(anchorElUser)} open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)} onClose={() => setAnchorElUser(null)}
> >
{avatarMenuOptions.map(option => ( {avatarMenuOptions.map(option => (
<MenuItem key={option.text} onClick={option.action}> <MenuItem key={option.text} onClick={option.action}>
<Typography textAlign="center">{option.text}</Typography> <Typography textAlign="center">{option.text}</Typography>
</MenuItem> </MenuItem>
))} ))}
</Menu> </Menu>
</Box>
</Box> </Box>
</Box> </Box>
); </Box>
);
default:
return null;
} }
} }

2
src/hooks/useLayoutType.js
View file

@ -2,7 +2,7 @@ import { useMediaQuery } from '@mui/material';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
export default function useLayoutType() { export default function useLayoutType() {
const [layoutType, setLayoutType] = useState('desktop'); const [layoutType, setLayoutType] = useState('unset');
const isMediaQueryRuleActive = useMediaQuery('(max-width:800px)'); const isMediaQueryRuleActive = useMediaQuery('(max-width:800px)');
useEffect(() => { useEffect(() => {

185
src/screens/Home/View.js
View file

@ -9,99 +9,19 @@ import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
function View({ layoutType, classrooms, assignments, onClickClassCard }) { function View({ layoutType, classrooms, assignments, onClickClassCard }) {
const { container, divider, assignmentsStack } = styles[layoutType]; const { container, divider, assignmentsStack } = styles[layoutType];
switch (layoutType) { if (layoutType === 'desktop') {
case 'desktop': return (
return ( <Grid sx={container} container spacing={2}>
<Grid sx={container} container spacing={2}> <Grid item xs={8}>
<Grid item xs={8}>
<h1>Turmas</h1>
<Stack
alignItems="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
{classrooms === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width={390}
height={145}
/>
))
) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
layoutType={layoutType}
onClick={() => onClickClassCard(classroom.id)}
/>
))
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack>
</Grid>
<Grid sx={divider} item xs={4}>
<h1>Atividades</h1>
<h2>Atribuídas</h2>
<Stack
sx={assignmentsStack}
alignItems="end"
flexWrap="wrap"
direction="row"
gap="30px"
>
{assignments === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width={390}
height={145}
/>
))
) : assignments.length !== 0 ? (
assignments.map(assignment => (
<AssignmentCard
key={assignment.title}
title={assignment.title}
classrooms={assignment.classrooms}
dueDate={assignment.dueDate}
scores={assignment.scores}
layoutType={layoutType}
/>
))
) : (
<h1>Nenhuma atividade encontrada!</h1>
)}
</Stack>
</Grid>
</Grid>
);
case 'mobile':
return (
<Stack sx={container}>
<h1>Turmas</h1> <h1>Turmas</h1>
<Stack <Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
{classrooms === null ? ( {classrooms === null ? (
createArrayFrom1ToN(6).map(i => ( createArrayFrom1ToN(6).map(i => (
<Skeleton <Skeleton
key={i} key={i}
variant="rectangular" variant="rectangular"
width="100%" width={390}
height={245} height={145}
/> />
)) ))
) : classrooms.length !== 0 ? ( ) : classrooms.length !== 0 ? (
@ -120,12 +40,13 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
<h1>Nenhuma sala de aula encontrada!</h1> <h1>Nenhuma sala de aula encontrada!</h1>
)} )}
</Stack> </Stack>
<h1 style={divider}>Atividades</h1> </Grid>
<Grid sx={divider} item xs={4}>
<h1>Atividades</h1>
<h2>Atribuídas</h2> <h2>Atribuídas</h2>
<Stack <Stack
sx={assignmentsStack} sx={assignmentsStack}
alignItems="center" alignItems="end"
justifyContent="center"
flexWrap="wrap" flexWrap="wrap"
direction="row" direction="row"
gap="30px" gap="30px"
@ -135,8 +56,8 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
<Skeleton <Skeleton
key={i} key={i}
variant="rectangular" variant="rectangular"
width="100%" width={390}
height={245} height={145}
/> />
)) ))
) : assignments.length !== 0 ? ( ) : assignments.length !== 0 ? (
@ -151,14 +72,84 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
/> />
)) ))
) : ( ) : (
<h1>Nenhuma sala de aula encontrada!</h1> <h1>Nenhuma atividade encontrada!</h1>
)} )}
</Stack> </Stack>
</Grid>
</Grid>
);
} else if (layoutType === 'mobile') {
return (
<Stack sx={container}>
<h1>Turmas</h1>
<Stack
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
{classrooms === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={245}
/>
))
) : classrooms.length !== 0 ? (
classrooms.map(classroom => (
<ClassCard
key={classroom.name}
abbreviation={classroom.abbreviation}
title={classroom.name}
color={classroom.color}
teachers={classroom.teachers}
layoutType={layoutType}
onClick={() => onClickClassCard(classroom.id)}
/>
))
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack> </Stack>
); <h1 style={divider}>Atividades</h1>
<h2>Atribuídas</h2>
default: <Stack
return null; sx={assignmentsStack}
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
{assignments === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={245}
/>
))
) : assignments.length !== 0 ? (
assignments.map(assignment => (
<AssignmentCard
key={assignment.title}
title={assignment.title}
classrooms={assignment.classrooms}
dueDate={assignment.dueDate}
scores={assignment.scores}
layoutType={layoutType}
/>
))
) : (
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack>
</Stack>
);
} }
} }

9
src/screens/Home/styles.js
View file

@ -41,5 +41,12 @@ const mobile = {
assignmentsStack: mobileAssignmentsStack, assignmentsStack: mobileAssignmentsStack,
}; };
const styles = { desktop, mobile }; // ========== Unset ==========
const unset = {
container: null,
divider: null,
assignmentsStack: null,
};
const styles = { desktop, mobile, unset };
export default styles; export default styles;

10
src/screens/Login/styles.js
View file

@ -77,5 +77,13 @@ const mobile = {
logoContainer: logoContainerMobile, logoContainer: logoContainerMobile,
}; };
const styles = { desktop, mobile }; // ========== Unset ==========
const unset = {
paper: null,
boxLogo: null,
boxForm: null,
logoContainer: null,
};
const styles = { desktop, mobile, unset };
export default styles; export default styles;