Refactor AnnouncementsTab to use switch case

src/screens/Classroom/AnnouncementsTab/index.js

@@ -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;