From 7a59fbc8369d397067994a75a8d316266a726944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Tue, 13 Dec 2022 21:56:23 -0300
Subject: [PATCH] Add professor classroom people tab placeholder

---
 src/screens/Classroom/index.js                |  6 ++--
 .../professor/Classroom/PeopleTab/index.js    | 35 +++++++++++++++++++
 .../professor/Classroom/PeopleTab/styles.js   |  0
 src/screens/professor/Classroom/View.js       |  3 ++
 src/screens/professor/Classroom/index.js      | 17 ++++++++-
 src/services/professor.js                     |  2 ++
 src/utils/mocks/api.js                        | 16 ++++-----
 7 files changed, 67 insertions(+), 12 deletions(-)
 create mode 100644 src/screens/professor/Classroom/PeopleTab/index.js
 create mode 100644 src/screens/professor/Classroom/PeopleTab/styles.js

diff --git a/src/screens/Classroom/index.js b/src/screens/Classroom/index.js
index 10fc044..01eb4f3 100644
--- a/src/screens/Classroom/index.js
+++ b/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(() => {
diff --git a/src/screens/professor/Classroom/PeopleTab/index.js b/src/screens/professor/Classroom/PeopleTab/index.js
new file mode 100644
index 0000000..3d54f36
--- /dev/null
+++ b/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;
diff --git a/src/screens/professor/Classroom/PeopleTab/styles.js b/src/screens/professor/Classroom/PeopleTab/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 f15bdd7..42c700f 100644
--- a/src/screens/professor/Classroom/View.js
+++ b/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>
   );
 }
diff --git a/src/screens/professor/Classroom/index.js b/src/screens/professor/Classroom/index.js
index 9ada164..4613427 100644
--- a/src/screens/professor/Classroom/index.js
+++ b/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'}
     />
   );
diff --git a/src/services/professor.js b/src/services/professor.js
index 64da1f2..28e54af 100644
--- a/src/services/professor.js
+++ b/src/services/professor.js
@@ -17,4 +17,6 @@ export default class ProfessorService {
 
   fetchClassroomAnnouncements = classId =>
     ProfessorApi.getClassroomAnnouncementsById(classId);
+
+  fetchPeopleByClassId = classId => ProfessorApi.getPeopleByClassId(classId);
 }
diff --git a/src/utils/mocks/api.js b/src/utils/mocks/api.js
index 36c7407..4e1bdd7 100644
--- a/src/utils/mocks/api.js
+++ b/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...');