Rename existing methods and add assignments tab

src/context/user.js

@@ -2,12 +2,13 @@ import { createContext, useContext, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAuthState } from './auth';
 import {
-  getAssignments,
+  getAllAssignments,
+  getAssignmentsByClassId,
   getClassroomAnnouncementsById,
   getClassroomById,
   getClassrooms,
   getFaq,
-  getUpcomingAssignmentsById,
+  getUpcomingAssignmentsByClassId,
 } from '../services/user-service';
 
 const UserContext = createContext();
@@ -27,7 +28,9 @@ function UserProvider(props) {
 
   const fetchClassrooms = () => getClassrooms(user.id);
 
-  const fetchAssignments = () => getAssignments(user.id);
+  const fetchAllAssignments = () => getAllAssignments(user.id);
+
+  const fetchAssignmentsByClassId = classId => getAssignmentsByClassId(classId);
 
   const fetchClassroomById = classId => getClassroomById(classId);
 
@@ -36,19 +39,20 @@ function UserProvider(props) {
   const fetchClassroomAnnouncements = classId =>
     getClassroomAnnouncementsById(classId);
 
-  const fetchUpcomingAssignments = classId =>
+  const fetchUpcomingAssignmentsByClassId = classId =>
-    getUpcomingAssignmentsById(classId);
+    getUpcomingAssignmentsByClassId(classId);
 
   return (
     <UserContext.Provider
       value={{
         state,
         fetchClassrooms,
-        fetchAssignments,
+        fetchAllAssignments,
+        fetchAssignmentsByClassId,
         fetchClassroomById,
         fetchFAQ,
         fetchClassroomAnnouncements,
-        fetchUpcomingAssignments,
+        fetchUpcomingAssignmentsByClassId,
       }}
       {...props}
     />
@@ -59,21 +63,23 @@ function useUser() {
   const {
     state,
     fetchClassrooms,
-    fetchAssignments,
+    fetchAllAssignments,
+    fetchAssignmentsByClassId,
     fetchClassroomById,
     fetchFAQ,
     fetchClassroomAnnouncements,
-    fetchUpcomingAssignments,
+    fetchUpcomingAssignmentsByClassId,
   } = useContext(UserContext);
 
   return {
     state,
     fetchClassrooms,
-    fetchAssignments,
+    fetchAllAssignments,
+    fetchAssignmentsByClassId,
     fetchClassroomById,
     fetchFAQ,
     fetchClassroomAnnouncements,
-    fetchUpcomingAssignments,
+    fetchUpcomingAssignmentsByClassId,
   };
 }
 

src/screens/Classroom/AnnouncementsTab/index.js

@@ -17,7 +17,7 @@ import jitsiLogo from '../../../assets/jitsi.svg';
 function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
   const { container } = styles[layoutType];
   if (layoutType === 'desktop') {
-    return announcementsTabData === null ? (
+    return announcementsTabData && announcementsTabData.state === 'loading' ? (
       <Grid sx={container} container spacing={2}>
         <Grid sx={{ padding: '0 !important' }} item xs={4}>
           {createArrayFrom1ToN(3).map(i => (
@@ -42,7 +42,7 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
           ))}
         </Grid>
       </Grid>
-    ) : (
+    ) : announcementsTabData.state === 'gone' ? null : (
       <Grid sx={container} container spacing={2}>
         <Grid sx={{ padding: '0 !important' }} item xs={4}>
           <Stack gap="30px">
@@ -123,7 +123,7 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
       </Grid>
     );
   } else if (layoutType === 'mobile') {
-    return announcementsTabData === null ? (
+    return announcementsTabData && announcementsTabData.state === 'loading' ? (
       <Stack
         alignItems="center"
         justifyContent="center"
@@ -151,7 +151,7 @@ function AnnouncementsTab({ layoutType, announcementsTabData, classroom }) {
           />
         ))}
       </Stack>
-    ) : (
+    ) : announcementsTabData.state === 'gone' ? null : (
       <Stack
         alignItems="center"
         justifyContent="center"

src/screens/Classroom/AssignmentsTab/index.js

@@ -0,0 +1,9 @@
+function AssignmentsTab({ assignmentsTabData }) {
+  return assignmentsTabData && assignmentsTabData.state === 'loading' ? (
+    <h1>Loading..</h1>
+  ) : assignmentsTabData.state === 'gone' ? null : (
+    <h1>Assignments Tab</h1>
+  );
+}
+
+export default AssignmentsTab;

src/screens/Classroom/View.js

@@ -2,6 +2,7 @@ import { Container } from '@mui/material';
 
 import Header from './Header';
 import AnnouncementsTab from './AnnouncementsTab';
+import AssignmentsTab from './AssignmentsTab';
 
 import styles from './styles';
 
@@ -11,6 +12,7 @@ function View({
   selectedTabOption,
   onSelectTabOption,
   announcementsTabData,
+  assignmentsTabData,
 }) {
   const { container } = styles[layoutType];
   return (
@@ -26,6 +28,7 @@ function View({
         announcementsTabData={announcementsTabData}
         classroom={classroom && classroom}
       />
+      <AssignmentsTab assignmentsTabData={assignmentsTabData} />
     </Container>
   );
 }

src/screens/Classroom/index.js

@@ -11,29 +11,45 @@ function Classroom() {
   const {
     fetchClassroomById,
     fetchClassroomAnnouncements,
-    fetchUpcomingAssignments,
+    fetchUpcomingAssignmentsByClassId,
+    fetchAssignmentsByClassId,
   } = useUser();
   const [classroom, setClassroom] = useState(null);
   const [selectedTabOption, setSelectedTabOption] = useState(
     TAB_OPTIONS.announcements.value
   );
 
-  const [tabData, setTabData] = useState(TAB_OPTIONS.announcements);
+  const [tabData, setTabData] = useState(null);
 
   const fetchAndPopulateAnnouncementsTabData = useCallback(async () => {
+    setTabData({ tab: 'announcements', state: 'loading' });
     const announcements = await fetchClassroomAnnouncements(params.id);
-    const upcomingAssignments = await fetchUpcomingAssignments(params.id);
+    const upcomingAssignments = await fetchUpcomingAssignmentsByClassId(
+      params.id
+    );
 
     setTabData({
       tab: 'announcements',
+      state: 'idle',
       announcements: [...announcements.data],
       upcomingAssignments: [...upcomingAssignments.data],
     });
-  }, [fetchClassroomAnnouncements, fetchUpcomingAssignments, params.id]);
+  }, [
+    fetchClassroomAnnouncements,
+    fetchUpcomingAssignmentsByClassId,
+    params.id,
+  ]);
 
   const fetchAndPopulateAssignmentsTabData = useCallback(async () => {
-    console.log('Fetch assignments');
+    setTabData({ tab: 'assignments', state: 'loading' });
-  }, []);
+    const assignments = await fetchAssignmentsByClassId(params.id);
+
+    setTabData({
+      tab: 'assignments',
+      state: 'idle',
+      assignments: [...assignments.data],
+    });
+  }, [fetchAssignmentsByClassId, params.id]);
 
   const fetchAndPopulatePoepleTabData = useCallback(async () => {
     console.log('Fetch assignments');
@@ -41,7 +57,6 @@ function Classroom() {
 
   useEffect(() => {
     async function getSelectedTabData() {
-      setTabData(null);
       switch (selectedTabOption) {
         case TAB_OPTIONS.announcements.value:
           fetchAndPopulateAnnouncementsTabData();
@@ -89,7 +104,10 @@ function Classroom() {
       selectedTabOption={selectedTabOption}
       onSelectTabOption={(_, value) => setSelectedTabOption(value)}
       announcementsTabData={
-        tabData && tabData.tab === 'announcements' ? tabData : null
+        tabData && tabData.tab === 'announcements' ? tabData : { state: 'gone' }
+      }
+      assignmentsTabData={
+        tabData && tabData.tab === 'assignments' ? tabData : { state: 'gone' }
       }
     />
   );

src/screens/Home/index.js

@@ -9,7 +9,7 @@ function Home() {
   useDocumentTitle('Página Inicial');
   const navigate = useNavigate();
   const layoutType = useLayoutType();
-  const { fetchClassrooms, fetchAssignments } = useUser();
+  const { fetchClassrooms, fetchAllAssignments } = useUser();
   const [classrooms, setClassrooms] = useState(null);
   const [assignments, setAssignments] = useState(null);
 
@@ -23,11 +23,11 @@ function Home() {
 
   useEffect(() => {
     async function getAssignments() {
-      const result = await fetchAssignments();
+      const result = await fetchAllAssignments();
       setAssignments(result.data);
     }
     getAssignments();
-  }, [fetchAssignments]);
+  }, [fetchAllAssignments]);
 
   const onClickClassCard = id => {
     navigate(`/class/${id}`, { replace: true });

src/services/mocks.js

@@ -318,6 +318,18 @@ const allUpcomingAssignments = [
     ],
     classrooms: allClassrooms.filter(c => c.id === '321'),
   },
+  {
+    id: '1234',
+    title: 'Trabalho NoSQL',
+    dueDate: '2022-06-29 22:00',
+    scores: [
+      {
+        classroomId: '666',
+        value: 35,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '666'),
+  },
 ];
 
 const faq = [

src/services/user-service.js

@@ -11,7 +11,7 @@ import {
 
 const getClassrooms = userId =>
   sleep(3000).then(() => {
-    console.log('userId: ' + userId);
+    console.log('Get classrooms ' + userId);
     return {
       data: allClassrooms,
     };
@@ -19,7 +19,7 @@ const getClassrooms = userId =>
 
 const getClassroomById = classId =>
   sleep(3000).then(() => {
-    console.log('classId ' + classId);
+    console.log('Get classroom by id ' + classId);
     return {
       data: allClassrooms.filter(c => c.id === classId)[0],
     };
@@ -27,30 +27,38 @@ const getClassroomById = classId =>
 
 const getClassroomAnnouncementsById = classId =>
   sleep(3000).then(() => {
-    console.log('classId ' + classId);
+    console.log('Get classroon announcements by id ' + classId);
     return {
       data: allClassroomAnnouncements.filter(c => c.classroom.id === classId),
     };
   });
 
-const getUpcomingAssignmentsById = classId =>
+const getUpcomingAssignmentsByClassId = classId =>
   sleep(3000).then(() => {
-    console.log('classId ' + classId);
+    console.log('Getting upcoming assignments by class id ' + classId);
     return {
-      data: allUpcomingAssignments.filter(a =>
+      data: allUpcomingAssignments.filter(
-        a.classrooms.filter(c => c.id === classId)
+        a => a.classrooms.filter(c => c.id === classId)[0]
       ),
     };
   });
 
-const getAssignments = userId =>
+const getAllAssignments = userId =>
   sleep(4000).then(() => {
-    console.log('userId: ' + userId);
+    console.log('Getting all assignments ' + userId);
     return {
       data: allAssignments,
     };
   });
 
+const getAssignmentsByClassId = classId =>
+  sleep(4000).then(() => {
+    console.log('Getting assignments by class id ' + classId);
+    return {
+      data: allAssignments.filter(a => a.classrooms[0].id === classId),
+    };
+  });
+
 const getFaq = () =>
   sleep(2000).then(() => {
     console.log('Fetching FAQ...');
@@ -72,9 +80,10 @@ const getUser = shouldFail =>
 export {
   getClassrooms,
   getClassroomById,
-  getAssignments,
+  getAllAssignments,
+  getAssignmentsByClassId,
   getClassroomAnnouncementsById,
-  getUpcomingAssignmentsById,
+  getUpcomingAssignmentsByClassId,
   getFaq,
   getUser,
 };