From 0f3fe5494f5e976f539f1ea3683e826be012fc1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Wed, 14 Dec 2022 09:48:45 -0300 Subject: [PATCH] Add professor class grades placeholder screen --- .../professor/Classroom/GradesTab/index.js | 34 +++++++++++++++++++ .../professor/Classroom/GradesTab/styles.js | 0 src/screens/professor/Classroom/View.js | 3 ++ src/screens/professor/Classroom/index.js | 18 ++++++++++ src/services/professor.js | 2 ++ src/utils/mocks/api.js | 8 +++++ src/utils/mocks/responses.js | 8 +++++ 7 files changed, 73 insertions(+) create mode 100644 src/screens/professor/Classroom/GradesTab/index.js create mode 100644 src/screens/professor/Classroom/GradesTab/styles.js diff --git a/src/screens/professor/Classroom/GradesTab/index.js b/src/screens/professor/Classroom/GradesTab/index.js new file mode 100644 index 0000000..785bd50 --- /dev/null +++ b/src/screens/professor/Classroom/GradesTab/index.js @@ -0,0 +1,34 @@ +function GradesTab({ gradesTabData, layoutType }) { + const layoutResolver = (state, grades, layoutType) => { + if (layoutType === 'desktop') { + switch (state) { + case 'loading': + return

Loading...

; + case 'idle': + return

Grades Tab

; + case 'gone': + return null; + default: + return null; + } + } else if (layoutType === 'mobile') { + switch (state) { + case 'loading': + return

Loading...

; + case 'idle': + return

Grades Tab

; + case 'gone': + return null; + default: + return null; + } + } + }; + return layoutResolver( + gradesTabData && gradesTabData.state, + gradesTabData && gradesTabData.grades, + layoutType + ); +} + +export default GradesTab; diff --git a/src/screens/professor/Classroom/GradesTab/styles.js b/src/screens/professor/Classroom/GradesTab/styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/screens/professor/Classroom/View.js b/src/screens/professor/Classroom/View.js index 42c700f..66bdadb 100644 --- a/src/screens/professor/Classroom/View.js +++ b/src/screens/professor/Classroom/View.js @@ -1,6 +1,7 @@ import { Container } from '@mui/system'; import AnnouncementsTab from './AnnouncementsTab'; import AssignmentsTab from './AssignmentsTab'; +import GradesTab from './GradesTab'; import Header from './Header'; import PeopleTab from './PeopleTab'; import styles from './styles'; @@ -13,6 +14,7 @@ function View({ announcementsTabData, assignmentsTabData, peopleTabData, + gradesTabData, isLoading, }) { const { container } = styles[layoutType]; @@ -35,6 +37,7 @@ function View({ assignmentsTabData={assignmentsTabData} /> + ); } diff --git a/src/screens/professor/Classroom/index.js b/src/screens/professor/Classroom/index.js index 4613427..94e11f0 100644 --- a/src/screens/professor/Classroom/index.js +++ b/src/screens/professor/Classroom/index.js @@ -68,6 +68,17 @@ function Classroom() { }); }, [userService, params.id]); + const fetchAndPopulateGradesTabData = useCallback(async () => { + setTabData({ tab: 'people', state: 'loading' }); + const grades = await userService.fetchPeopleByClassId(params.id); + + setTabData({ + tab: 'grades', + state: 'idle', + grades: [...grades.data], + }); + }, [userService, params.id]); + useEffect(() => { async function getSelectedTabData() { switch (selectedTabOption) { @@ -80,6 +91,9 @@ function Classroom() { case TAB_OPTIONS.people.value: fetchAndPopulatePeopleTabData(); break; + case TAB_OPTIONS.grades.value: + fetchAndPopulateGradesTabData(); + break; default: console.log('Invalid tab option'); } @@ -91,6 +105,7 @@ function Classroom() { fetchAndPopulateAnnouncementsTabData, fetchAndPopulateAssignmentsTabData, fetchAndPopulatePeopleTabData, + fetchAndPopulateGradesTabData, ]); return ( @@ -108,6 +123,9 @@ function Classroom() { peopleTabData={ tabData && tabData.tab === 'people' ? tabData : { state: 'gone' } } + gradesTabData={ + tabData && tabData.tab === 'grades' ? tabData : { state: 'gone' } + } isLoading={tabData && tabData.state === 'loading'} /> ); diff --git a/src/services/professor.js b/src/services/professor.js index 28e54af..e36f268 100644 --- a/src/services/professor.js +++ b/src/services/professor.js @@ -19,4 +19,6 @@ export default class ProfessorService { ProfessorApi.getClassroomAnnouncementsById(classId); fetchPeopleByClassId = classId => ProfessorApi.getPeopleByClassId(classId); + + fetchGradesByClassId = classId => ProfessorApi.getGradesByClassId(classId); } diff --git a/src/utils/mocks/api.js b/src/utils/mocks/api.js index 4e1bdd7..2a2b66b 100644 --- a/src/utils/mocks/api.js +++ b/src/utils/mocks/api.js @@ -11,6 +11,7 @@ import { allPeople, professorClassrooms, assignmentsToReview, + grades, } from './responses'; const CommonApi = { @@ -134,6 +135,13 @@ const ProfessorApi = { data: assignmentsToReview, }; }), + getGradesByClassId: classId => + sleep(400).then(() => { + console.log('Getting grades' + classId); + return { + data: grades, + }; + }), }; export { StudentApi, ProfessorApi, CommonApi }; diff --git a/src/utils/mocks/responses.js b/src/utils/mocks/responses.js index 25eadd3..b3644af 100644 --- a/src/utils/mocks/responses.js +++ b/src/utils/mocks/responses.js @@ -643,6 +643,13 @@ const allPeople = [ }, ]; +// TODO: Mock correct data +const grades = [ + { + id: 'Some grade', + }, +]; + const studentUser = { id: '123', ra: '0021123', @@ -693,4 +700,5 @@ export { allUpcomingAssignments, professorClassrooms, assignmentsToReview, + grades, };