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 />,
unselectedIcon: <HomeOutlined />,
pathname: '/home',
isActive: activePath === '/home' || activePath === '/login',
isActive:
activePath === '/home' || activePath === '/login' || activePath === '/',
},
{
id: 1,

277
src/components/AssignmentCard.js
View file

@ -12,14 +12,95 @@ import dayjs from 'dayjs';
import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
switch (layoutType) {
case 'desktop':
return (
<Card
if (layoutType === 'desktop') {
return (
<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={{
position: 'relative',
width: '100%',
borderLeft: `5px solid ${classrooms[0].color}`,
display: 'flex',
flexDirection: 'column',
}}
>
{classrooms.length > 1 &&
@ -30,144 +111,58 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
key={c.id}
style={{
position: 'absolute',
height: '100%',
borderLeft: `5px solid ${c.color}`,
left: 0,
width: '100%',
borderTop: `5px solid ${c.color}`,
top: 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>
);
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;
<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>
);
}
}

213
src/components/ClassCard.js
View file

@ -18,110 +18,54 @@ function ClassCard({
layoutType,
onClick,
}) {
switch (layoutType) {
case 'desktop':
return (
<Card sx={{ width: 390, height: 135 }}>
<CardActionArea
onClick={() => onClick()}
sx={{ display: 'flex', flexDirection: 'row' }}
if (layoutType === 'desktop') {
return (
<Card sx={{ width: 390, height: 135 }}>
<CardActionArea
onClick={() => onClick()}
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={{
backgroundColor: color,
width: '35%',
height: '145px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
fontSize: '17px',
}}
gutterBottom
variant="h6"
component="div"
>
<h1>{abbreviation}</h1>
</Container>
<CardContent sx={{ width: '70%' }}>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
fontSize: '17px',
}}
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>
<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>
{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',
@ -130,19 +74,70 @@ function ClassCard({
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
variant="body2"
variant="body3"
color="text.secondary"
>
{teachers.map(t => t.name).join(', ')}
</Typography>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
default:
return null;
</Tooltip>
</Stack>
</CardContent>
</CardActionArea>
</Card>
);
} else if (layoutType === '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
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)
);
switch (layoutType) {
case 'desktop':
return (
<Drawer sx={drawer} variant="permanent" anchor="left">
<Toolbar disableGutters sx={toolbar}>
<img src={logoImage} width="70" alt="Logotipo" />
</Toolbar>
<List>
{options.map(option => (
<ListItem key={option.text} sx={listItem} disablePadding>
<NavLink to={option.pathname}>
<ListItemButton selected={option.isActive}>
<ListItemIcon sx={listItemIcon}>
{option.unselectedIcon}
</ListItemIcon>
<ListItemText primary={option.text} />
</ListItemButton>
</NavLink>
</ListItem>
))}
</List>
</Drawer>
);
case 'mobile':
return (
<Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}>
<BottomNavigation
onChange={(_, newValue) => {
const newOption = options.find(option => option.id === newValue);
setSelectedOption(newOption);
navigate(newOption.pathname, { replace: true });
}}
showLabels
value={selectedOption.id}
>
{options.map(option => (
<BottomNavigationAction
key={option.text}
label={option.text}
icon={
option.id === selectedOption.id
? option.selectedIcon
: option.unselectedIcon
}
/>
))}
</BottomNavigation>
</Box>
);
default:
return null;
if (layoutType === 'desktop') {
return (
<Drawer sx={drawer} variant="permanent" anchor="left">
<Toolbar disableGutters sx={toolbar}>
<img src={logoImage} width="70" alt="Logotipo" />
</Toolbar>
<List>
{options.map(option => (
<ListItem key={option.text} sx={listItem} disablePadding>
<NavLink to={option.pathname}>
<ListItemButton selected={option.isActive}>
<ListItemIcon sx={listItemIcon}>
{option.unselectedIcon}
</ListItemIcon>
<ListItemText primary={option.text} />
</ListItemButton>
</NavLink>
</ListItem>
))}
</List>
</Drawer>
);
} else if (layoutType === 'mobile') {
return (
<Box sx={{ width: '100%', position: 'fixed', bottom: 0, zIndex: 2 }}>
<BottomNavigation
onChange={(_, newValue) => {
const newOption = options.find(option => option.id === newValue);
setSelectedOption(newOption);
navigate(newOption.pathname, { replace: true });
}}
showLabels
value={selectedOption.id}
>
{options.map(option => (
<BottomNavigationAction
key={option.text}
label={option.text}
icon={
option.id === selectedOption.id
? option.selectedIcon
: option.unselectedIcon
}
/>
))}
</BottomNavigation>
</Box>
);
}
}

297
src/components/Toolbar.js
View file

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

2
src/hooks/useLayoutType.js
View file

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

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

@ -9,99 +9,19 @@ import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
function View({ layoutType, classrooms, assignments, onClickClassCard }) {
const { container, divider, assignmentsStack } = styles[layoutType];
switch (layoutType) {
case 'desktop':
return (
<Grid sx={container} container spacing={2}>
<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}>
if (layoutType === 'desktop') {
return (
<Grid sx={container} container spacing={2}>
<Grid item xs={8}>
<h1>Turmas</h1>
<Stack
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
>
<Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
{classrooms === null ? (
createArrayFrom1ToN(6).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={245}
width={390}
height={145}
/>
))
) : classrooms.length !== 0 ? (
@ -120,12 +40,13 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
<h1>Nenhuma sala de aula encontrada!</h1>
)}
</Stack>
<h1 style={divider}>Atividades</h1>
</Grid>
<Grid sx={divider} item xs={4}>
<h1>Atividades</h1>
<h2>Atribuídas</h2>
<Stack
sx={assignmentsStack}
alignItems="center"
justifyContent="center"
alignItems="end"
flexWrap="wrap"
direction="row"
gap="30px"
@ -135,8 +56,8 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={245}
width={390}
height={145}
/>
))
) : 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>
</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>
);
default:
return null;
<h1 style={divider}>Atividades</h1>
<h2>Atribuídas</h2>
<Stack
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,
};
const styles = { desktop, mobile };
// ========== Unset ==========
const unset = {
container: null,
divider: null,
assignmentsStack: null,
};
const styles = { desktop, mobile, unset };
export default styles;

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

@ -77,5 +77,13 @@ const mobile = {
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;