Refactor AnnouncementsTab to use switch case
This commit is contained in:
parent
c9a099dd88
commit
87e7dba5a0
1 changed files with 246 additions and 212 deletions
|
|
@ -16,225 +16,259 @@ import jitsiLogo from '../../../assets/jitsi.svg';
|
||||||
|
|
||||||
function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
||||||
const { container } = styles[layoutType];
|
const { container } = styles[layoutType];
|
||||||
if (layoutType === 'desktop') {
|
|
||||||
return announcementsTabData && announcementsTabData.state === 'loading' ? (
|
|
||||||
<Grid sx={container} container spacing={2}>
|
|
||||||
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
|
||||||
{createArrayFrom1ToN(3).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={200}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
|
||||||
{createArrayFrom1ToN(4).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={250}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
) : announcementsTabData.state === 'gone' ? null : (
|
|
||||||
<Grid sx={container} container spacing={2}>
|
|
||||||
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
|
||||||
<Stack gap="30px">
|
|
||||||
<Card
|
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
|
||||||
<Container
|
|
||||||
disableGutters
|
|
||||||
sx={{ display: 'flex', justifyContent: 'row' }}
|
|
||||||
>
|
|
||||||
<img src={jitsiLogo} alt="Jitsi Meet" />
|
|
||||||
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Button
|
const layoutResolver = (state, layoutType) => {
|
||||||
variant="contained"
|
if (layoutType === 'desktop') {
|
||||||
href="https://google.com"
|
switch (state) {
|
||||||
target="__blank"
|
case 'loading':
|
||||||
>
|
return (
|
||||||
Entrar
|
<Grid sx={container} container spacing={2}>
|
||||||
</Button>
|
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
||||||
</Stack>
|
{createArrayFrom1ToN(3).map(i => (
|
||||||
</Card>
|
<Skeleton
|
||||||
<Card
|
key={i}
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
variant="rectangular"
|
||||||
elevation={4}
|
width="100%"
|
||||||
variant="elevation"
|
height={200}
|
||||||
>
|
sx={{ marginBottom: '30px' }}
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
/>
|
||||||
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
))}
|
||||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
</Grid>
|
||||||
<Link
|
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
||||||
href={`/assignment/${ua.id}`}
|
{createArrayFrom1ToN(4).map(i => (
|
||||||
sx={{ fontSize: '15px' }}
|
<Skeleton
|
||||||
key={ua.id}
|
key={i}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={250}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'idle':
|
||||||
|
return (
|
||||||
|
<Grid sx={container} container spacing={2}>
|
||||||
|
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
||||||
|
<Stack gap="30px">
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
>
|
>
|
||||||
{ua.title}
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
</Link>
|
<Container
|
||||||
))}
|
disableGutters
|
||||||
</Stack>
|
sx={{ display: 'flex', justifyContent: 'row' }}
|
||||||
</Card>
|
>
|
||||||
<Card
|
<img src={jitsiLogo} alt="Jitsi Meet" />
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
||||||
elevation={4}
|
</Container>
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
|
||||||
<h3 style={{ fontWeight: 500 }}>Horários de Atendimento</h3>
|
|
||||||
{classroom.appointmentSlots.map((appts, index) => (
|
|
||||||
<Typography key={index} variant="body1">
|
|
||||||
{appts.weekDay}, {appts.start}h - {appts.end}h
|
|
||||||
</Typography>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
|
||||||
<Stack
|
|
||||||
sx={{ width: '100%', paddingTop: 0 }}
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
>
|
|
||||||
{announcementsTabData.announcements.map(announcement => (
|
|
||||||
<AnnouncementCard
|
|
||||||
key={announcement.id}
|
|
||||||
announcement={announcement}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
} else if (layoutType === 'mobile') {
|
|
||||||
return announcementsTabData && announcementsTabData.state === 'loading' ? (
|
|
||||||
<Stack
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
sx={{ marginTop: '30px' }}
|
|
||||||
>
|
|
||||||
{createArrayFrom1ToN(3).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={200}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{createArrayFrom1ToN(4).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={250}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
) : announcementsTabData.state === 'gone' ? null : (
|
|
||||||
<Stack
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
sx={{ marginTop: '30px' }}
|
|
||||||
>
|
|
||||||
<Stack gap="30px">
|
|
||||||
<Card
|
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
|
||||||
<Container
|
|
||||||
disableGutters
|
|
||||||
sx={{ display: 'flex', justifyContent: 'row' }}
|
|
||||||
>
|
|
||||||
<img src={jitsiLogo} alt="Jitsi Meet" />
|
|
||||||
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
href="https://google.com"
|
href="https://google.com"
|
||||||
target="__blank"
|
target="__blank"
|
||||||
>
|
>
|
||||||
Entrar
|
Entrar
|
||||||
</Button>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Card>
|
</Card>
|
||||||
<Card
|
<Card
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
elevation={4}
|
elevation={4}
|
||||||
variant="elevation"
|
variant="elevation"
|
||||||
>
|
>
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
||||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||||
<Link
|
<Link
|
||||||
href={`/assignment/${ua.id}`}
|
href={`/assignment/${ua.id}`}
|
||||||
sx={{ fontSize: '15px' }}
|
sx={{ fontSize: '15px' }}
|
||||||
key={ua.id}
|
key={ua.id}
|
||||||
|
>
|
||||||
|
{ua.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<h3 style={{ fontWeight: 500 }}>
|
||||||
|
Horários de Atendimento
|
||||||
|
</h3>
|
||||||
|
{classroom.appointmentSlots.map((appts, index) => (
|
||||||
|
<Typography key={index} variant="body1">
|
||||||
|
{appts.weekDay}, {appts.start}h - {appts.end}h
|
||||||
|
</Typography>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
||||||
|
<Stack
|
||||||
|
sx={{ width: '100%', paddingTop: 0 }}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
>
|
>
|
||||||
{ua.title}
|
{announcementsTabData.announcements.map(announcement => (
|
||||||
</Link>
|
<AnnouncementCard
|
||||||
|
key={announcement.id}
|
||||||
|
announcement={announcement}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'gone':
|
||||||
|
return null;
|
||||||
|
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
} else if (layoutType === 'mobile') {
|
||||||
|
switch (state) {
|
||||||
|
case 'loading':
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
|
sx={{ marginTop: '30px' }}
|
||||||
|
>
|
||||||
|
{createArrayFrom1ToN(3).map(i => (
|
||||||
|
<Skeleton
|
||||||
|
key={i}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={200}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{createArrayFrom1ToN(4).map(i => (
|
||||||
|
<Skeleton
|
||||||
|
key={i}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={250}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
</Card>
|
);
|
||||||
<Card
|
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
case 'idle':
|
||||||
elevation={4}
|
return (
|
||||||
variant="elevation"
|
<Stack
|
||||||
>
|
alignItems="center"
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
justifyContent="center"
|
||||||
<h3 style={{ fontWeight: 500 }}>Horários de Atendimento</h3>
|
flexWrap="wrap"
|
||||||
{classroom.appointmentSlots.map((appts, index) => (
|
direction="row"
|
||||||
<Typography key={index} variant="body1">
|
gap="30px"
|
||||||
{appts.weekDay}, {appts.start}h - {appts.end}h
|
sx={{ marginTop: '30px' }}
|
||||||
</Typography>
|
>
|
||||||
))}
|
<Stack gap="30px">
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<Container
|
||||||
|
disableGutters
|
||||||
|
sx={{ display: 'flex', justifyContent: 'row' }}
|
||||||
|
>
|
||||||
|
<img src={jitsiLogo} alt="Jitsi Meet" />
|
||||||
|
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
href="https://google.com"
|
||||||
|
target="__blank"
|
||||||
|
>
|
||||||
|
Entrar
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
||||||
|
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||||
|
<Link
|
||||||
|
href={`/assignment/${ua.id}`}
|
||||||
|
sx={{ fontSize: '15px' }}
|
||||||
|
key={ua.id}
|
||||||
|
>
|
||||||
|
{ua.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<h3 style={{ fontWeight: 500 }}>Horários de Atendimento</h3>
|
||||||
|
{classroom.appointmentSlots.map((appts, index) => (
|
||||||
|
<Typography key={index} variant="body1">
|
||||||
|
{appts.weekDay}, {appts.start}h - {appts.end}h
|
||||||
|
</Typography>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
sx={{ width: '100%' }}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
|
>
|
||||||
|
{announcementsTabData.announcements.map(announcement => (
|
||||||
|
<AnnouncementCard
|
||||||
|
key={announcement.id}
|
||||||
|
announcement={announcement}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Card>
|
);
|
||||||
</Stack>
|
|
||||||
<Stack
|
case 'gone':
|
||||||
sx={{ width: '100%' }}
|
return null;
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
default:
|
||||||
flexWrap="wrap"
|
return null;
|
||||||
direction="row"
|
}
|
||||||
gap="30px"
|
}
|
||||||
>
|
};
|
||||||
{announcementsTabData.announcements.map(announcement => (
|
|
||||||
<AnnouncementCard
|
return layoutResolver(
|
||||||
key={announcement.id}
|
announcementsTabData && announcementsTabData.state,
|
||||||
announcement={announcement}
|
layoutType
|
||||||
/>
|
);
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default AnnouncementsTab;
|
export default AnnouncementsTab;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue