Add professor classroom people tab placeholder

src/screens/Classroom/index.js

@@ -42,7 +42,7 @@ function Classroom() {
     });
   }, [userService, params.id]);
 
-  const fetchAndPopulatePoepleTabData = useCallback(async () => {
+  const fetchAndPopulatePeopleTabData = useCallback(async () => {
     setTabData({ tab: 'people', state: 'loading' });
     const people = await userService.fetchPeopleByClassId(params.id);
 
@@ -63,7 +63,7 @@ function Classroom() {
           fetchAndPopulateAssignmentsTabData();
           break;
         case TAB_OPTIONS.people.value:
-          fetchAndPopulatePoepleTabData();
+          fetchAndPopulatePeopleTabData();
           break;
         default:
           console.log('Invalid tab option');
@@ -75,7 +75,7 @@ function Classroom() {
     params,
     fetchAndPopulateAnnouncementsTabData,
     fetchAndPopulateAssignmentsTabData,
-    fetchAndPopulatePoepleTabData,
+    fetchAndPopulatePeopleTabData,
   ]);
 
   useEffect(() => {

src/screens/professor/Classroom/PeopleTab/index.js

@@ -0,0 +1,35 @@
+function PeopleTab({ layoutType, peopleTabData }) {
+  const layoutResolver = (state, people, layoutType) => {
+    if (layoutType === 'desktop') {
+      switch (state) {
+        case 'loading':
+          return <h1>Loading...</h1>;
+        case 'idle':
+          return <h1>People 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>People Tab</h1>;
+        case 'gone':
+          return null;
+        default:
+          return null;
+      }
+    }
+  };
+
+  return layoutResolver(
+    peopleTabData && peopleTabData.state,
+    peopleTabData && peopleTabData.people,
+    layoutType
+  );
+}
+
+export default PeopleTab;

src/screens/professor/Classroom/View.js

@@ -2,6 +2,7 @@ import { Container } from '@mui/system';
 import AnnouncementsTab from './AnnouncementsTab';
 import AssignmentsTab from './AssignmentsTab';
 import Header from './Header';
+import PeopleTab from './PeopleTab';
 import styles from './styles';
 
 function View({
@@ -11,6 +12,7 @@ function View({
   onSelectTabOption,
   announcementsTabData,
   assignmentsTabData,
+  peopleTabData,
   isLoading,
 }) {
   const { container } = styles[layoutType];
@@ -32,6 +34,7 @@ function View({
         layoutType={layoutType}
         assignmentsTabData={assignmentsTabData}
       />
+      <PeopleTab layoutType={layoutType} peopleTabData={peopleTabData} />
     </Container>
   );
 }

src/screens/professor/Classroom/index.js

@@ -57,6 +57,17 @@ function Classroom() {
     updateDocumentTitle();
   }, [userService, userService.fetchClassroomById, params, classroom]);
 
+  const fetchAndPopulatePeopleTabData = useCallback(async () => {
+    setTabData({ tab: 'people', state: 'loading' });
+    const people = await userService.fetchPeopleByClassId(params.id);
+
+    setTabData({
+      tab: 'people',
+      state: 'idle',
+      people: [...people.data],
+    });
+  }, [userService, params.id]);
+
   useEffect(() => {
     async function getSelectedTabData() {
       switch (selectedTabOption) {
@@ -67,7 +78,7 @@ function Classroom() {
           fetchAndPopulateAssignmentsTabData();
           break;
         case TAB_OPTIONS.people.value:
-          // TODO
+          fetchAndPopulatePeopleTabData();
           break;
         default:
           console.log('Invalid tab option');
@@ -79,6 +90,7 @@ function Classroom() {
     params,
     fetchAndPopulateAnnouncementsTabData,
     fetchAndPopulateAssignmentsTabData,
+    fetchAndPopulatePeopleTabData,
   ]);
 
   return (
@@ -93,6 +105,9 @@ function Classroom() {
       assignmentsTabData={
         tabData && tabData.tab === 'assignments' ? tabData : { state: 'gone' }
       }
+      peopleTabData={
+        tabData && tabData.tab === 'people' ? tabData : { state: 'gone' }
+      }
       isLoading={tabData && tabData.state === 'loading'}
     />
   );

src/services/professor.js

@@ -17,4 +17,6 @@ export default class ProfessorService {
 
   fetchClassroomAnnouncements = classId =>
     ProfessorApi.getClassroomAnnouncementsById(classId);
+
+  fetchPeopleByClassId = classId => ProfessorApi.getPeopleByClassId(classId);
 }

src/utils/mocks/api.js

@@ -63,6 +63,14 @@ const CommonApi = {
         data: allAssignments.filter(a => a.classrooms[0].id === classId),
       };
     }),
+
+  getPeopleByClassId: classId =>
+    sleep(400).then(() => {
+      console.log('Getting people by class id ' + classId);
+      return {
+        data: allPeople.filter(p => p.classes[0].id === classId),
+      };
+    }),
 };
 
 const StudentApi = {
@@ -101,14 +109,6 @@ const StudentApi = {
       };
     }),
 
-  getPeopleByClassId: classId =>
-    sleep(400).then(() => {
-      console.log('Getting people by class id ' + classId);
-      return {
-        data: allPeople.filter(p => p.classes[0].id === classId),
-      };
-    }),
-
   getFaq: () =>
     sleep(300).then(() => {
       console.log('Fetching FAQ...');