From 6fb5af6ea5eddb3bf6ce22964e478f6a4a4a7365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Sun, 28 Aug 2022 17:57:42 -0300 Subject: [PATCH] Add empty state --- .../Classroom/AnnouncementsTab/index.js | 86 ++++++++++++------- .../Classroom/AnnouncementsTab/styles.js | 14 +++ src/screens/Classroom/AssignmentsTab/index.js | 55 ++++++++---- .../Classroom/AssignmentsTab/styles.js | 14 +++ src/screens/Classroom/PeopleTab/index.js | 55 ++++++++---- src/screens/Classroom/PeopleTab/styles.js | 14 +++ 6 files changed, 175 insertions(+), 63 deletions(-) diff --git a/src/screens/Classroom/AnnouncementsTab/index.js b/src/screens/Classroom/AnnouncementsTab/index.js index 73ce02b..f0bac16 100644 --- a/src/screens/Classroom/AnnouncementsTab/index.js +++ b/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 }) { >

Próximas Atividades

- {announcementsTabData.upcomingAssignments.map(ua => ( - - {ua.title} - - ))} + {announcementsTabData.upcomingAssignments.length !== 0 ? ( + announcementsTabData.upcomingAssignments.map(ua => ( + + {ua.title} + + )) + ) : ( + +

Nenhuma atividade encontrada!

+ + )} - {announcementsTabData.announcements.map(announcement => ( - - ))} + {announcementsTabData.announcements.length !== 0 ? ( + announcementsTabData.announcements.map(announcement => ( + + )) + ) : ( + +

Nenhum comunicado encontrado!

+ + )} @@ -212,15 +224,21 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) { >

Próximas Atividades

- {announcementsTabData.upcomingAssignments.map(ua => ( - - {ua.title} - - ))} + {announcementsTabData.upcomingAssignments.length !== 0 ? ( + announcementsTabData.upcomingAssignments.map(ua => ( + + {ua.title} + + )) + ) : ( + +

Nenhuma atividade encontrada!

+ + )} - {announcementsTabData.announcements.map(announcement => ( - - ))} + {announcementsTabData.announcements.length !== 0 ? ( + announcementsTabData.announcements.map(announcement => ( + + )) + ) : ( + +

Nenhum comunicado encontrado!

+ + )} ); diff --git a/src/screens/Classroom/AnnouncementsTab/styles.js b/src/screens/Classroom/AnnouncementsTab/styles.js index fe6018c..d7d218a 100644 --- a/src/screens/Classroom/AnnouncementsTab/styles.js +++ b/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 ========== diff --git a/src/screens/Classroom/AssignmentsTab/index.js b/src/screens/Classroom/AssignmentsTab/index.js index 0c39a13..bc089fe 100644 --- a/src/screens/Classroom/AssignmentsTab/index.js +++ b/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 ( @@ -96,9 +100,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) { Provas - {assignments - .filter(a => a.type === 'assessment') - .map(a => ( + {assesments.length !== 0 ? ( + assesments.map(a => ( s.value).join(', ')} pts - ))} + )) + ) : ( + +

Nenhuma prova encontrada!

+ + )} @@ -140,9 +148,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) { Trabalhos - {assignments - .filter(a => a.type === 'project') - .map(a => ( + {projects.length !== 0 ? ( + projects.map(a => ( s.value).join(', ')} pts - ))} + )) + ) : ( + +

Nenhum trabalho encontrado!

+ + )} @@ -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 ( @@ -257,9 +272,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) { Provas - {assignments - .filter(a => a.type === 'assessment') - .map(a => ( + {assesments.length !== 0 ? ( + assesments.map(a => ( s.value).join(', ')} pts - ))} + )) + ) : ( + +

Nenhuma prova encontrada!

+ + )} @@ -301,9 +320,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) { Trabalhos - {assignments - .filter(a => a.type === 'project') - .map(a => ( + {projects.length !== 0 ? ( + projects.map(a => ( s.value).join(', ')} pts - ))} + )) + ) : ( + +

Nenhum trabalho encontrado!

+ + )} diff --git a/src/screens/Classroom/AssignmentsTab/styles.js b/src/screens/Classroom/AssignmentsTab/styles.js index d23a456..8c97bd3 100644 --- a/src/screens/Classroom/AssignmentsTab/styles.js +++ b/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 ========== diff --git a/src/screens/Classroom/PeopleTab/index.js b/src/screens/Classroom/PeopleTab/index.js index 7db1559..3080ee3 100644 --- a/src/screens/Classroom/PeopleTab/index.js +++ b/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 }) { ); case 'idle': + const professors = people.filter(p => p.role === 'PROFESSOR'); + const students = people.filter(p => p.role === 'STUDENT'); + return ( @@ -73,16 +77,20 @@ function PeopleTab({ layoutType, peopleTabData }) { Docentes - {people - .filter(p => p.role === 'PROFESSOR') - .map(p => ( + {professors.length !== 0 ? ( + professors.map(p => ( {p.name} - ))} + )) + ) : ( + +

Nenhum professor encontrado!

+ + )} @@ -91,16 +99,20 @@ function PeopleTab({ layoutType, peopleTabData }) { Discentes - {people - .filter(p => p.role === 'STUDENT') - .map(p => ( + {students.length !== 0 ? ( + students.map(p => ( {p.name} - ))} + )) + ) : ( + +

Nenhum estudante encontrado!

+ + )} @@ -164,6 +176,9 @@ function PeopleTab({ layoutType, peopleTabData }) { ); case 'idle': + const professors = people.filter(p => p.role === 'PROFESSOR'); + const students = people.filter(p => p.role === 'STUDENT'); + return ( @@ -171,16 +186,20 @@ function PeopleTab({ layoutType, peopleTabData }) { Docentes - {people - .filter(p => p.role === 'PROFESSOR') - .map(p => ( + {professors.length !== 0 ? ( + professors.map(p => ( {p.name} - ))} + )) + ) : ( + +

Nenhum professor encontrado!

+ + )} @@ -189,16 +208,20 @@ function PeopleTab({ layoutType, peopleTabData }) { Discentes - {people - .filter(p => p.role === 'STUDENT') - .map(p => ( + {students.length !== 0 ? ( + students.map(p => ( {p.name} - ))} + )) + ) : ( + +

Nenhum estudante encontrado!

+ + )} diff --git a/src/screens/Classroom/PeopleTab/styles.js b/src/screens/Classroom/PeopleTab/styles.js index 2541b85..30668db 100644 --- a/src/screens/Classroom/PeopleTab/styles.js +++ b/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 ==========