Merge pull request #20 from leomurca/feature/professor_classroomHEADmain

Feature/professor classroom

1 files changed, 118 insertions, 0 deletions

diff --git a/src/screens/student/Classroom/index.js b/src/screens/student/Classroom/index.js
new file mode 100644
index 0000000..5201b49
--- /dev/null
+++ b/src/screens/student/Classroom/index.js
@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useUser } from '../../../context/user';
+import useLayoutType from '../../../hooks/useLayoutType';
+import { TAB_OPTIONS } from './tabOptions';
+import View from './View';
+
+function Classroom() {
+  const params = useParams();
+  const layoutType = useLayoutType();
+  const { userService } = useUser();
+  const [classroom, setClassroom] = useState(null);
+  const [tabData, setTabData] = useState(null);
+  const [selectedTabOption, setSelectedTabOption] = useState(
+    TAB_OPTIONS.announcements.value
+  );
+
+  const fetchAndPopulateAnnouncementsTabData = useCallback(async () => {
+    setTabData({ tab: 'announcements', state: 'loading' });
+    const announcements = await userService.fetchClassroomAnnouncements(
+      params.id
+    );
+    const upcomingAssignments =
+      await userService.fetchUpcomingAssignmentsByClassId(params.id);
+
+    setTabData({
+      tab: 'announcements',
+      state: 'idle',
+      announcements: [...announcements.data],
+      upcomingAssignments: [...upcomingAssignments.data],
+    });
+  }, [userService, params.id]);
+
+  const fetchAndPopulateAssignmentsTabData = useCallback(async () => {
+    setTabData({ tab: 'assignments', state: 'loading' });
+    const assignments = await userService.fetchAssignmentsByClassId(params.id);
+
+    setTabData({
+      tab: 'assignments',
+      state: 'idle',
+      assignments: [...assignments.data],
+    });
+  }, [userService, params.id]);
+
+  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) {
+        case TAB_OPTIONS.announcements.value:
+          fetchAndPopulateAnnouncementsTabData();
+          break;
+        case TAB_OPTIONS.assignments.value:
+          fetchAndPopulateAssignmentsTabData();
+          break;
+        case TAB_OPTIONS.people.value:
+          fetchAndPopulatePeopleTabData();
+          break;
+        default:
+          console.log('Invalid tab option');
+      }
+    }
+    getSelectedTabData();
+  }, [
+    selectedTabOption,
+    params,
+    fetchAndPopulateAnnouncementsTabData,
+    fetchAndPopulateAssignmentsTabData,
+    fetchAndPopulatePeopleTabData,
+  ]);
+
+  useEffect(() => {
+    async function getClassroomById(classId) {
+      document.title = 'Carregando...';
+      const result = await userService.fetchClassroomById(classId);
+      setClassroom(result.data);
+    }
+
+    function updateDocumentTitle() {
+      if (classroom !== null) {
+        document.title = classroom.name;
+      }
+    }
+
+    getClassroomById(params.id);
+    updateDocumentTitle();
+  }, [userService, userService.fetchClassroomById, params, classroom]);
+
+  return (
+    <View
+      layoutType={layoutType}
+      classroom={classroom}
+      selectedTabOption={selectedTabOption}
+      onSelectTabOption={(_, value) => setSelectedTabOption(value)}
+      announcementsTabData={
+        tabData && tabData.tab === 'announcements' ? tabData : { state: 'gone' }
+      }
+      assignmentsTabData={
+        tabData && tabData.tab === 'assignments' ? tabData : { state: 'gone' }
+      }
+      peopleTabData={
+        tabData && tabData.tab === 'people' ? tabData : { state: 'gone' }
+      }
+      isLoading={tabData && tabData.state === 'loading'}
+    />
+  );
+}
+
+export default Classroom;