Add upcoming assignments card and fetch

src/context/user.js

@@ -7,6 +7,7 @@ import {
   getClassroomById,
   getClassrooms,
   getFaq,
+  getUpcomingAssignmentsById,
 } from '../services/user-service';
 
 const UserContext = createContext();
@@ -35,6 +36,9 @@ function UserProvider(props) {
   const fetchClassroomAnnouncements = classId =>
     getClassroomAnnouncementsById(classId);
 
+  const fetchUpcomingAssignments = classId =>
+    getUpcomingAssignmentsById(classId);
+
   return (
     <UserContext.Provider
       value={{
@@ -44,6 +48,7 @@ function UserProvider(props) {
         fetchClassroomById,
         fetchFAQ,
         fetchClassroomAnnouncements,
+        fetchUpcomingAssignments,
       }}
       {...props}
     />
@@ -58,6 +63,7 @@ function useUser() {
     fetchClassroomById,
     fetchFAQ,
     fetchClassroomAnnouncements,
+    fetchUpcomingAssignments,
   } = useContext(UserContext);
 
   return {
@@ -67,6 +73,7 @@ function useUser() {
     fetchClassroomById,
     fetchFAQ,
     fetchClassroomAnnouncements,
+    fetchUpcomingAssignments,
   };
 }
 

src/screens/Classroom/View.js

@@ -1,8 +1,10 @@
 import {
   Avatar,
   AvatarGroup,
+  Card,
   Container,
   Grid,
+  Link,
   Paper,
   Stack,
   Tab,
@@ -19,10 +21,9 @@ function View({
   classroom,
   selectedTabOption,
   onSelectTabOption,
-  announcements,
+  announcementsTabData,
 }) {
   const { title, container, paper, tabs, avatar, tooltip } = styles[layoutType];
-
   if (layoutType === 'desktop') {
     return (
       <Container disableGutters sx={container}>
@@ -71,20 +72,26 @@ function View({
             </Paper>
           </Container>
         )}
-        {announcements === null ? (
+        {announcementsTabData === null ? (
           <h1>Loading...</h1>
         ) : (
           <Grid sx={container} container spacing={2}>
             <Grid item xs={4}>
-              <Container
-                disableGutters
-                sx={{
-                  backgroundColor: 'tomato',
-                  height: '100vh',
-                  textAlign: 'center',
-                }}
-              >
-                Left
+              <Container disableGutters>
+                <Card
+                  sx={{ width: '100%', padding: '20px' }}
+                  elevation={4}
+                  variant="elevation"
+                >
+                  <Stack justifyContent="flex-start" spacing={1}>
+                    <h3>Próximas Atividades</h3>
+                    {announcementsTabData.upcomingAssignments.map(ua => (
+                      <Link sx={{ fontSize: '15px' }} key={ua.id}>
+                        {ua.title}
+                      </Link>
+                    ))}
+                  </Stack>
+                </Card>
               </Container>
             </Grid>
             <Grid item xs={8}>
@@ -96,7 +103,7 @@ function View({
                 direction="row"
                 gap="30px"
               >
-                {announcements.data.map(announcement => (
+                {announcementsTabData.announcements.map(announcement => (
                   <AnnouncementCard
                     key={announcement.id}
                     announcement={announcement}
@@ -156,7 +163,7 @@ function View({
             </Paper>
           </Container>
         )}
-        {announcements === null ? (
+        {announcementsTabData === null ? (
           <h1>Loading...</h1>
         ) : (
           <Stack
@@ -167,15 +174,21 @@ function View({
             gap="30px"
             sx={{ marginTop: '30px' }}
           >
-            <Container
-              disableGutters
-              sx={{
-                backgroundColor: 'tomato',
-                height: '400px',
-                textAlign: 'center',
-              }}
-            >
-              Left
+            <Container disableGutters>
+              <Card
+                sx={{ width: '100%', padding: '20px' }}
+                elevation={4}
+                variant="elevation"
+              >
+                <Stack justifyContent="flex-start" spacing={1}>
+                  <h3>Próximas Atividades</h3>
+                  {announcementsTabData.upcomingAssignments.map(ua => (
+                    <Link sx={{ fontSize: '15px' }} key={ua.id}>
+                      {ua.title}
+                    </Link>
+                  ))}
+                </Stack>
+              </Card>
             </Container>
             <Stack
               sx={{ width: '100%' }}
@@ -185,7 +198,7 @@ function View({
               direction="row"
               gap="30px"
             >
-              {announcements.data.map(announcement => (
+              {announcementsTabData.announcements.map(announcement => (
                 <AnnouncementCard
                   key={announcement.id}
                   announcement={announcement}

src/screens/Classroom/index.js

@@ -8,7 +8,11 @@ import View from './View';
 function Classroom() {
   const params = useParams();
   const layoutType = useLayoutType();
-  const { fetchClassroomById, fetchClassroomAnnouncements } = useUser();
+  const {
+    fetchClassroomById,
+    fetchClassroomAnnouncements,
+    fetchUpcomingAssignments,
+  } = useUser();
   const [classroom, setClassroom] = useState(null);
   const [selectedTabOption, setSelectedTabOption] = useState(
     TAB_OPTIONS.map(o => o.value).indexOf('announcements')
@@ -40,11 +44,13 @@ function Classroom() {
     async function getSelectedTabData() {
       setTabData(null);
       if (selectedTabOption === 0) {
-        console.log('Fetch announcements');
-        const result = await fetchClassroomAnnouncements(params.id);
+        const announcements = await fetchClassroomAnnouncements(params.id);
+        const upcomingAssignments = await fetchUpcomingAssignments(params.id);
+
         setTabData({
           tab: TAB_OPTIONS[selectedTabOption].value,
-          data: [...result.data],
+          announcements: [...announcements.data],
+          upcomingAssignments: [...upcomingAssignments.data],
         });
       } else if (selectedTabOption === 1) {
         console.log('Fetch assignments');
@@ -53,7 +59,12 @@ function Classroom() {
       }
     }
     getSelectedTabData();
-  }, [fetchClassroomAnnouncements, selectedTabOption, params]);
+  }, [
+    fetchClassroomAnnouncements,
+    fetchUpcomingAssignments,
+    selectedTabOption,
+    params,
+  ]);
 
   return (
     <View
@@ -61,10 +72,9 @@ function Classroom() {
       classroom={classroom}
       selectedTabOption={selectedTabOption}
       onSelectTabOption={onSelectTabOption}
-      announcements={
+      announcementsTabData={
         tabData && tabData.tab === 'announcements' ? tabData : null
       }
-      people={tabData && tabData.tab === 'people' ? tabData : null}
     />
   );
 }

src/services/mocks.js

@@ -89,6 +89,19 @@ const allAssignments = [
     ],
     classrooms: allClassrooms.filter(c => c.id === '321'),
   },
+  {
+    id: '0128',
+    title:
+      'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
+    dueDate: '2022-09-01 23:59',
+    scores: [
+      {
+        classroomId: '321',
+        value: 30,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '321'),
+  },
   {
     id: '1234',
     title: 'Trabalho NoSQL',
@@ -197,6 +210,35 @@ const allClassroomAnnouncements = [
   },
 ];
 
+const allUpcomingAssignments = [
+  {
+    id: '5435',
+    title:
+      'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
+    dueDate: '2022-07-01 23:59',
+    scores: [
+      {
+        classroomId: '321',
+        value: 30,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '321'),
+  },
+  {
+    id: '0128',
+    title:
+      'Prova 2 - Visualização de Dados. Matemática e Estatística em CD. Análise de Dados',
+    dueDate: '2022-09-01 23:59',
+    scores: [
+      {
+        classroomId: '321',
+        value: 30,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '321'),
+  },
+];
+
 const faq = [
   {
     question: 'Como faço para acessar a biblicoteca virtual?',
@@ -244,4 +286,5 @@ export {
   faq,
   user,
   authFailure,
+  allUpcomingAssignments,
 };

src/services/user-service.js

@@ -6,6 +6,7 @@ import {
   user,
   authFailure,
   allClassroomAnnouncements,
+  allUpcomingAssignments,
 } from './mocks';
 
 const getClassrooms = userId =>
@@ -32,6 +33,16 @@ const getClassroomAnnouncementsById = classId =>
     };
   });
 
+const getUpcomingAssignmentsById = classId =>
+  sleep(3000).then(() => {
+    console.log('classId ' + classId);
+    return {
+      data: allUpcomingAssignments.filter(a =>
+        a.classrooms.filter(c => c.id === classId)
+      ),
+    };
+  });
+
 const getAssignments = userId =>
   sleep(4000).then(() => {
     console.log('userId: ' + userId);
@@ -63,6 +74,7 @@ export {
   getClassroomById,
   getAssignments,
   getClassroomAnnouncementsById,
+  getUpcomingAssignmentsById,
   getFaq,
   getUser,
 };