Add empty state

src/screens/Classroom/AnnouncementsTab/index.js

@@ -15,7 +15,7 @@ import styles from './styles';
 import jitsiLogo from '../../../assets/jitsi.svg';
 
 function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
-  const { container } = styles[layoutType];
+  const { container, emptyStateContainer } = styles[layoutType];
 
   const layoutResolver = (state, layoutType) => {
     if (layoutType === 'desktop') {
@@ -83,15 +83,21 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
                   >
                     <Stack justifyContent="flex-start" spacing={1}>
                       <h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
-                      {announcementsTabData.upcomingAssignments.map(ua => (
+                      {announcementsTabData.upcomingAssignments.length !== 0 ? (
-                        <Link
+                        announcementsTabData.upcomingAssignments.map(ua => (
-                          href={`/assignment/${ua.id}`}
+                          <Link
-                          sx={{ fontSize: '15px' }}
+                            href={`/assignment/${ua.id}`}
-                          key={ua.id}
+                            sx={{ fontSize: '15px' }}
-                        >
+                            key={ua.id}
-                          {ua.title}
+                          >
-                        </Link>
+                            {ua.title}
-                      ))}
+                          </Link>
+                        ))
+                      ) : (
+                        <Container disableGutters>
+                          <p>Nenhuma atividade encontrada!</p>
+                        </Container>
+                      )}
                     </Stack>
                   </Card>
                   <Card
@@ -121,12 +127,18 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
                   direction="row"
                   gap="30px"
                 >
-                  {announcementsTabData.announcements.map(announcement => (
+                  {announcementsTabData.announcements.length !== 0 ? (
-                    <AnnouncementCard
+                    announcementsTabData.announcements.map(announcement => (
-                      key={announcement.id}
+                      <AnnouncementCard
-                      announcement={announcement}
+                        key={announcement.id}
-                    />
+                        announcement={announcement}
-                  ))}
+                      />
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum comunicado encontrado!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Grid>
             </Grid>
@@ -212,15 +224,21 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
                 >
                   <Stack justifyContent="flex-start" spacing={1}>
                     <h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
-                    {announcementsTabData.upcomingAssignments.map(ua => (
+                    {announcementsTabData.upcomingAssignments.length !== 0 ? (
-                      <Link
+                      announcementsTabData.upcomingAssignments.map(ua => (
-                        href={`/assignment/${ua.id}`}
+                        <Link
-                        sx={{ fontSize: '15px' }}
+                          href={`/assignment/${ua.id}`}
-                        key={ua.id}
+                          sx={{ fontSize: '15px' }}
-                      >
+                          key={ua.id}
-                        {ua.title}
+                        >
-                      </Link>
+                          {ua.title}
-                    ))}
+                        </Link>
+                      ))
+                    ) : (
+                      <Container disableGutters>
+                        <p>Nenhuma atividade encontrada!</p>
+                      </Container>
+                    )}
                   </Stack>
                 </Card>
                 <Card
@@ -246,12 +264,18 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
                 direction="row"
                 gap="30px"
               >
-                {announcementsTabData.announcements.map(announcement => (
+                {announcementsTabData.announcements.length !== 0 ? (
-                  <AnnouncementCard
+                  announcementsTabData.announcements.map(announcement => (
-                    key={announcement.id}
+                    <AnnouncementCard
-                    announcement={announcement}
+                      key={announcement.id}
-                  />
+                      announcement={announcement}
-                ))}
+                    />
+                  ))
+                ) : (
+                  <Container sx={emptyStateContainer} disableGutters>
+                    <p>Nenhum comunicado encontrado!</p>
+                  </Container>
+                )}
               </Stack>
             </Stack>
           );

src/screens/Classroom/AnnouncementsTab/styles.js

@@ -8,8 +8,15 @@ const desktopContainer = {
   marginTop: '50px',
 };
 
+const desktopEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
 const desktop = {
   container: desktopContainer,
+  emptyStateContainer: desktopEmptyStateContainer,
 };
 
 // ========== Mobile ==========
@@ -21,8 +28,15 @@ const mobileContainer = {
   paddingBottom: '100px',
 };
 
+const mobileEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
 const mobile = {
   container: mobileContainer,
+  emptyStateContainer: mobileEmptyStateContainer,
 };
 
 // ========== Unset ==========

src/screens/Classroom/AssignmentsTab/index.js

@@ -14,6 +14,7 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
       assignmentLink,
       assignmentDueDate,
       assignmentScores,
+      emptyStateContainer,
     } = styles[layoutType];
     if (layoutType === 'desktop') {
       switch (state) {
@@ -89,6 +90,9 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
           );
 
         case 'idle':
+          const assesments = assignments.filter(a => a.type === 'assessment');
+          const projects = assignments.filter(a => a.type === 'project');
+
           return (
             <Container sx={externalContainer} disableGutters>
               <Container sx={innerContainer} disableGutters>
@@ -96,9 +100,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                   Provas
                 </Typography>
                 <Stack alignItems="center">
-                  {assignments
+                  {assesments.length !== 0 ? (
-                    .filter(a => a.type === 'assessment')
+                    assesments.map(a => (
-                    .map(a => (
                       <Container
                         key={a.id}
                         sx={assignmentContainer}
@@ -131,7 +134,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           {a.scores.map(s => s.value).join(', ')} pts
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhuma prova encontrada!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
 
@@ -140,9 +148,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                   Trabalhos
                 </Typography>
                 <Stack alignItems="center">
-                  {assignments
+                  {projects.length !== 0 ? (
-                    .filter(a => a.type === 'project')
+                    projects.map(a => (
-                    .map(a => (
                       <Container
                         key={a.id}
                         sx={assignmentContainer}
@@ -175,7 +182,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           {a.scores.map(s => s.value).join(', ')} pts
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum trabalho encontrado!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
             </Container>
@@ -250,6 +262,9 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
           );
 
         case 'idle':
+          const assesments = assignments.filter(a => a.type === 'assessment');
+          const projects = assignments.filter(a => a.type === 'project');
+
           return (
             <Container sx={externalContainer} disableGutters>
               <Container sx={innerContainer} disableGutters>
@@ -257,9 +272,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                   Provas
                 </Typography>
                 <Stack alignItems="center">
-                  {assignments
+                  {assesments.length !== 0 ? (
-                    .filter(a => a.type === 'assessment')
+                    assesments.map(a => (
-                    .map(a => (
                       <Container
                         key={a.id}
                         sx={assignmentContainer}
@@ -292,7 +306,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           {a.scores.map(s => s.value).join(', ')} pts
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhuma prova encontrada!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
 
@@ -301,9 +320,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                   Trabalhos
                 </Typography>
                 <Stack alignItems="center">
-                  {assignments
+                  {projects.length !== 0 ? (
-                    .filter(a => a.type === 'project')
+                    projects.map(a => (
-                    .map(a => (
                       <Container
                         key={a.id}
                         sx={assignmentContainer}
@@ -336,7 +354,12 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           {a.scores.map(s => s.value).join(', ')} pts
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum trabalho encontrado!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
             </Container>

src/screens/Classroom/AssignmentsTab/styles.js

@@ -37,6 +37,12 @@ const desktopAssignmentScores = {
   fontSize: '15px',
 };
 
+const desktopEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
 const desktop = {
   externalContainer: desktopExternalContainer,
   innerContainer: desktopInnerContainer,
@@ -46,6 +52,7 @@ const desktop = {
   assignmentLink: desktopAssignmentLink,
   assignmentDueDate: desktopAssignmentDueDate,
   assignmentScores: desktopAssignmentScores,
+  emptyStateContainer: desktopEmptyStateContainer,
 };
 
 // ========== Mobile ==========
@@ -93,6 +100,12 @@ const mobileAssignmentScores = {
   fontSize: '12px',
 };
 
+const mobileEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
 const mobile = {
   externalContainer: mobileExternalContainer,
   innerContainer: mobileInnerContainer,
@@ -102,6 +115,7 @@ const mobile = {
   assignmentLink: mobileAssignmentLink,
   assignmentDueDate: mobileAssignmentDueDate,
   assignmentScores: mobileAssignmentScores,
+  emptyStateContainer: mobileEmptyStateContainer,
 };
 
 // ========== Unset ==========

src/screens/Classroom/PeopleTab/index.js

@@ -11,6 +11,7 @@ function PeopleTab({ layoutType, peopleTabData }) {
       personContainer,
       personAvatar,
       personName,
+      emptyStateContainer,
     } = styles[layoutType];
     if (layoutType === 'desktop') {
       switch (state) {
@@ -66,6 +67,9 @@ function PeopleTab({ layoutType, peopleTabData }) {
             </Container>
           );
         case 'idle':
+          const professors = people.filter(p => p.role === 'PROFESSOR');
+          const students = people.filter(p => p.role === 'STUDENT');
+
           return (
             <Container sx={externalContainer} disableGutters>
               <Container sx={sectionContainer} disableGutters>
@@ -73,16 +77,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
                   Docentes
                 </Typography>
                 <Stack alignItems="center">
-                  {people
+                  {professors.length !== 0 ? (
-                    .filter(p => p.role === 'PROFESSOR')
+                    professors.map(p => (
-                    .map(p => (
                       <Container key={p.id} sx={personContainer} disableGutters>
                         <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
                         <Typography sx={personName} variant="h5">
                           {p.name}
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum professor encontrado!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
 
@@ -91,16 +99,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
                   Discentes
                 </Typography>
                 <Stack alignItems="center">
-                  {people
+                  {students.length !== 0 ? (
-                    .filter(p => p.role === 'STUDENT')
+                    students.map(p => (
-                    .map(p => (
                       <Container key={p.id} sx={personContainer} disableGutters>
                         <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
                         <Typography sx={personName} variant="h5">
                           {p.name}
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum estudante encontrado!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
             </Container>
@@ -164,6 +176,9 @@ function PeopleTab({ layoutType, peopleTabData }) {
             </Container>
           );
         case 'idle':
+          const professors = people.filter(p => p.role === 'PROFESSOR');
+          const students = people.filter(p => p.role === 'STUDENT');
+
           return (
             <Container sx={externalContainer} disableGutters>
               <Container sx={sectionContainer} disableGutters>
@@ -171,16 +186,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
                   Docentes
                 </Typography>
                 <Stack alignItems="center">
-                  {people
+                  {professors.length !== 0 ? (
-                    .filter(p => p.role === 'PROFESSOR')
+                    professors.map(p => (
-                    .map(p => (
                       <Container key={p.id} sx={personContainer} disableGutters>
                         <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
                         <Typography sx={personName} variant="body1">
                           {p.name}
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum professor encontrado!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
 
@@ -189,16 +208,20 @@ function PeopleTab({ layoutType, peopleTabData }) {
                   Discentes
                 </Typography>
                 <Stack alignItems="center">
-                  {people
+                  {students.length !== 0 ? (
-                    .filter(p => p.role === 'STUDENT')
+                    students.map(p => (
-                    .map(p => (
                       <Container key={p.id} sx={personContainer} disableGutters>
                         <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
                         <Typography sx={personName} variant="body1">
                           {p.name}
                         </Typography>
                       </Container>
-                    ))}
+                    ))
+                  ) : (
+                    <Container sx={emptyStateContainer} disableGutters>
+                      <p>Nenhum estudante encontrado!</p>
+                    </Container>
+                  )}
                 </Stack>
               </Container>
             </Container>

src/screens/Classroom/PeopleTab/styles.js

@@ -31,6 +31,12 @@ const desktopPersonAvatar = {
 
 const desktopPersonName = {};
 
+const desktopEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
 const desktop = {
   externalContainer: desktopExternalContainer,
   sectionContainer: desktopSectionContainer,
@@ -38,6 +44,7 @@ const desktop = {
   personContainer: desktopPersonContainer,
   personAvatar: desktopPersonAvatar,
   personName: desktopPersonName,
+  emptyStateContainer: desktopEmptyStateContainer,
 };
 
 // ========== Mobile ==========
@@ -79,6 +86,12 @@ const mobilePersonName = {
   WebkitBoxOrient: 'vertical',
 };
 
+const mobileEmptyStateContainer = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: '30px',
+};
+
 const mobile = {
   externalContainer: mobileExternalContainer,
   sectionContainer: mobileSectionContainer,
@@ -86,6 +99,7 @@ const mobile = {
   personContainer: mobilePersonContainer,
   personAvatar: mobilePersonAvatar,
   personName: mobilePersonName,
+  emptyStateContainer: mobileEmptyStateContainer,
 };
 
 // ========== Unset ==========