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,8 +16,12 @@ import jitsiLogo from '../../../assets/jitsi.svg';
|
|||
|
||||
function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
||||
const { container } = styles[layoutType];
|
||||
|
||||
const layoutResolver = (state, layoutType) => {
|
||||
if (layoutType === 'desktop') {
|
||||
return announcementsTabData && announcementsTabData.state === 'loading' ? (
|
||||
switch (state) {
|
||||
case 'loading':
|
||||
return (
|
||||
<Grid sx={container} container spacing={2}>
|
||||
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
||||
{createArrayFrom1ToN(3).map(i => (
|
||||
|
@ -42,7 +46,10 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
|||
))}
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : announcementsTabData.state === 'gone' ? null : (
|
||||
);
|
||||
|
||||
case 'idle':
|
||||
return (
|
||||
<Grid sx={container} container spacing={2}>
|
||||
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
||||
<Stack gap="30px">
|
||||
|
@ -93,7 +100,9 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
|||
variant="elevation"
|
||||
>
|
||||
<Stack justifyContent="flex-start" spacing={1}>
|
||||
<h3 style={{ fontWeight: 500 }}>Horários de Atendimento</h3>
|
||||
<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
|
||||
|
@ -122,8 +131,17 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
|||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
case 'gone':
|
||||
return null;
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
} else if (layoutType === 'mobile') {
|
||||
return announcementsTabData && announcementsTabData.state === 'loading' ? (
|
||||
switch (state) {
|
||||
case 'loading':
|
||||
return (
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
|
@ -151,7 +169,10 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
|||
/>
|
||||
))}
|
||||
</Stack>
|
||||
) : announcementsTabData.state === 'gone' ? null : (
|
||||
);
|
||||
|
||||
case 'idle':
|
||||
return (
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
|
@ -234,7 +255,20 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
|
|||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
case 'gone':
|
||||
return null;
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return layoutResolver(
|
||||
announcementsTabData && announcementsTabData.state,
|
||||
layoutType
|
||||
);
|
||||
}
|
||||
|
||||
export default AnnouncementsTab;
|
||||
|
|
Loading…
Reference in a new issue