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…
	
	Add table
		
		Reference in a new issue