Add professor class grades placeholder screen

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 <h1>Loading...</h1>;
+        case 'idle':
+          return <h1>Grades Tab</h1>;
+        case 'gone':
+          return null;
+        default:
+          return null;
+      }
+    } else if (layoutType === 'mobile') {
+      switch (state) {
+        case 'loading':
+          return <h1>Loading...</h1>;
+        case 'idle':
+          return <h1>Grades Tab</h1>;
+        case 'gone':
+          return null;
+        default:
+          return null;
+      }
+    }
+  };
+  return layoutResolver(
+    gradesTabData && gradesTabData.state,
+    gradesTabData && gradesTabData.grades,
+    layoutType
+  );
+}
+
+export default GradesTab;

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}
       />
       <PeopleTab layoutType={layoutType} peopleTabData={peopleTabData} />
+      <GradesTab layoutType={layoutType} gradesTabData={gradesTabData} />
     </Container>
   );
 }

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'}
     />
   );

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);
 }

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

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,
 };