Add assignments to review card

src/components/AssignmentCard/index.js

@@ -18,6 +18,10 @@ function AssignmentCard({
   classrooms,
   dueDate,
   scores,
+  deliveredByStudents,
+  reviewed,
+  total,
+  isAssignmentToReview,
   layoutType,
   onClick,
 }) {
@@ -61,16 +65,30 @@ function AssignmentCard({
                 {classrooms.map(c => c.name).join(', ')}
               </Typography>
               <Divider sx={dividerMiddle} />
+
               <Typography sx={typographyDueDate} variant="p" component="div">
                 <strong>Data de entrega: </strong>{' '}
                 {capitalizeFirstLetter(
                   dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
                 )}
               </Typography>
-              <Typography variant="p" component="div">
+              {deliveredByStudents >= 0 && total && (
-                <strong>Valor: </strong>
+                <Typography variant="p" component="div">
-                {scores.map(s => s.value).join(', ')} pts
+                  <strong>Entregues: </strong>{' '}
-              </Typography>
+                  {`${deliveredByStudents} de ${total}`}
+                </Typography>
+              )}
+              {reviewed >= 0 && total && (
+                <Typography variant="p" component="div">
+                  <strong>Corrigidas: </strong> {`${reviewed} de ${total}`}
+                </Typography>
+              )}
+              {!isAssignmentToReview && (
+                <Typography variant="p" component="div">
+                  <strong>Valor: </strong>
+                  {scores.map(s => s.value).join(', ')} pts
+                </Typography>
+              )}
             </Stack>
           </CardContent>
         </CardActionArea>
@@ -110,10 +128,23 @@ function AssignmentCard({
                   dayjs(dueDate).format('dddd, DD/MM | HH:mm[h]')
                 )}
               </Typography>
-              <Typography variant="p" component="div">
+              {deliveredByStudents >= 0 && total && (
-                <strong>Valor: </strong>
+                <Typography variant="p" component="div">
-                {scores.map(s => s.value).join(', ')} pts
+                  <strong>Entregues: </strong>{' '}
-              </Typography>
+                  {`${deliveredByStudents} de ${total}`}
+                </Typography>
+              )}
+              {reviewed >= 0 && total && (
+                <Typography variant="p" component="div">
+                  <strong>Corrigidas: </strong> {`${reviewed} de ${total}`}
+                </Typography>
+              )}
+              {!isAssignmentToReview && (
+                <Typography variant="p" component="div">
+                  <strong>Valor: </strong>
+                  {scores.map(s => s.value).join(', ')} pts
+                </Typography>
+              )}
             </Stack>
           </CardContent>
         </CardActionArea>

src/screens/professor/Home/View.js

@@ -1,11 +1,18 @@
 import { Grid, Skeleton, Stack } from '@mui/material';
 import { Container } from '@mui/system';
+import AssignmentCard from '../../../components/AssignmentCard';
 import ClassCard from '../../../components/ClassCard';
 import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
 import styles from './styles';
 
-function View({ layoutType, classrooms, onClickClassCard }) {
+function View({
-  const { container, divider, assignmentsStack } = styles[layoutType];
+  layoutType,
+  classrooms,
+  assignmentsToReview,
+  onClickClassCard,
+}) {
+  const { container, divider, assignmentsStack, onClickAssignmentCard } =
+    styles[layoutType];
 
   if (layoutType === 'desktop') {
     return (
@@ -51,7 +58,6 @@ function View({ layoutType, classrooms, onClickClassCard }) {
         </Grid>
         <Grid sx={divider} item xs={4}>
           <h1>Atividades para corrigir</h1>
-          <h2>Atribuídas</h2>
           <Stack
             sx={assignmentsStack}
             alignItems="end"
@@ -59,8 +65,43 @@ function View({ layoutType, classrooms, onClickClassCard }) {
             direction="row"
             gap="30px"
           >
-            <h3>Atividade 1</h3>
+            {assignmentsToReview === null ? (
-            <h3>Atividade 2</h3>
+              createArrayFrom1ToN(6).map(i => (
+                <Skeleton
+                  key={i}
+                  variant="rectangular"
+                  width="35em"
+                  height={145}
+                />
+              ))
+            ) : assignmentsToReview.length !== 0 ? (
+              assignmentsToReview.map(assignment => (
+                <AssignmentCard
+                  key={assignment.title}
+                  title={assignment.title}
+                  classrooms={assignment.classrooms}
+                  dueDate={assignment.dueDate}
+                  scores={assignment.scores}
+                  layoutType={layoutType}
+                  deliveredByStudents={assignment.deliveredByStudents}
+                  reviewed={assignment.reviewed}
+                  isAssignmentToReview={assignment.status !== null}
+                  total={assignment.total}
+                  onClick={() => onClickAssignmentCard(assignment.id)}
+                />
+              ))
+            ) : (
+              <Container
+                sx={{
+                  height: '100vh',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                disableGutters
+              >
+                <p>Nenhuma atividade encontrada!</p>
+              </Container>
+            )}
           </Stack>
         </Grid>
       </Grid>
@@ -105,7 +146,6 @@ function View({ layoutType, classrooms, onClickClassCard }) {
           )}
         </Stack>
         <h1 style={divider}>Atividades para corrigir</h1>
-        <h2>Atribuídas</h2>
         <Stack
           sx={assignmentsStack}
           alignItems="center"
@@ -114,8 +154,43 @@ function View({ layoutType, classrooms, onClickClassCard }) {
           direction="row"
           gap="30px"
         >
-          <h3>Atividade 1</h3>
+          {assignmentsToReview === null ? (
-          <h3>Atividade 2</h3>
+            createArrayFrom1ToN(6).map(i => (
+              <Skeleton
+                key={i}
+                variant="rectangular"
+                width="35em"
+                height={145}
+              />
+            ))
+          ) : assignmentsToReview.length !== 0 ? (
+            assignmentsToReview.map(assignment => (
+              <AssignmentCard
+                key={assignment.title}
+                title={assignment.title}
+                classrooms={assignment.classrooms}
+                dueDate={assignment.dueDate}
+                scores={assignment.scores}
+                layoutType={layoutType}
+                deliveredByStudents={assignment.deliveredByStudents}
+                reviewed={assignment.reviewed}
+                isAssignmentToReview={assignment.status !== null}
+                total={assignment.total}
+                onClick={() => onClickAssignmentCard(assignment.id)}
+              />
+            ))
+          ) : (
+            <Container
+              sx={{
+                height: '100vh',
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+              disableGutters
+            >
+              <p>Nenhuma atividade encontrada!</p>
+            </Container>
+          )}
         </Stack>
       </Stack>
     );

src/screens/professor/Home/index.js

@@ -11,6 +11,7 @@ function Home() {
   const layoutType = useLayoutType();
   const { userService } = useUser();
   const [classrooms, setClassrooms] = useState(null);
+  const [assignmentsToReview, setAssignmentsToReview] = useState(null);
 
   useEffect(() => {
     async function getClassrooms() {
@@ -20,17 +21,29 @@ function Home() {
     getClassrooms();
   }, [userService, userService.fetchClassrooms]);
 
+  useEffect(() => {
+    async function getAssignmentsToReview() {
+      const result = await userService.fetchAssignmentsToReview();
+      setAssignmentsToReview(result.data);
+    }
+    getAssignmentsToReview();
+  }, [userService, userService.fetchAllAssignments]);
+
   const onClickClassCard = id => {
     navigate(`/class/${id}`);
   };
 
-  console.log(classrooms);
+  const onClickAssignmentCard = id => {
+    navigate(`/assignment/${id}`);
+  };
 
   return (
     <View
       layoutType={layoutType}
       classrooms={classrooms}
+      assignmentsToReview={assignmentsToReview}
       onClickClassCard={onClickClassCard}
+      onClickAssignmentCard={onClickAssignmentCard}
     />
   );
 }

src/services/professor.js

@@ -6,4 +6,7 @@ export default class ProfessorService {
   }
 
   fetchClassrooms = () => ProfessorApi.getClassrooms(this.user.id);
+
+  fetchAssignmentsToReview = () =>
+    ProfessorApi.getAssignmentsToReview(this.user.id);
 }

src/utils/mocks/api.js

@@ -10,6 +10,7 @@ import {
   allUpcomingAssignments,
   allPeople,
   professorClassrooms,
+  assignmentsToReview,
 } from './responses';
 
 const CommonApi = {
@@ -128,6 +129,13 @@ const ProfessorApi = {
         data: professorClassrooms,
       };
     }),
+  getAssignmentsToReview: userId =>
+    sleep(400).then(() => {
+      console.log('Getting assignments to review' + userId);
+      return {
+        data: assignmentsToReview,
+      };
+    }),
 };
 
 export { StudentApi, ProfessorApi, CommonApi };

src/utils/mocks/responses.js

@@ -119,7 +119,7 @@ const professorClassrooms = [
     ],
   },
   {
-    id: '123',
+    id: '666',
     name: 'Matemática Discreta',
     abbreviation: 'MD',
     color: '#149b00',
@@ -344,6 +344,80 @@ const allClassroomAnnouncements = [
   },
 ];
 
+const assignmentsToReview = [
+  {
+    id: '0123',
+    type: 'assessment',
+    title:
+      'Prova 1 - Armazenamento de Dados. Python em CD. Armazenamento Analítico',
+    dueDate: '2022-07-01 23:59',
+    scores: [
+      {
+        classroomId: '321',
+        value: 30,
+      },
+    ],
+    classrooms: professorClassrooms.filter(c => c.id === '321'),
+    status: 'OPEN',
+    deliveredByStudents: 10,
+    reviewed: 6,
+    total: 30,
+  },
+  {
+    id: '0128',
+    type: 'assessment',
+    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: professorClassrooms.filter(c => c.id === '321'),
+    status: 'CLOSED',
+    deliveredByStudents: 30,
+    reviewed: 1,
+    total: 30,
+  },
+  {
+    id: '0129',
+    type: 'assessment',
+    title: 'Lista de Exercícios 1 - Caminhos e circuitos',
+    dueDate: '2022-09-01 23:59',
+    scores: [
+      {
+        classroomId: '123',
+        value: 30,
+      },
+    ],
+    classrooms: professorClassrooms.filter(c => c.id === '123'),
+    status: 'CLOSED',
+    deliveredByStudents: 30,
+    reviewed: 0,
+    total: 30,
+  },
+
+  {
+    id: '0130',
+    type: 'assessment',
+    title: 'Lista de Exercícios 2 - Tabela verdade',
+    dueDate: '2022-09-01 23:59',
+    scores: [
+      {
+        classroomId: '666',
+        value: 30,
+      },
+    ],
+    classrooms: professorClassrooms.filter(c => c.id === '666'),
+    status: 'OPEN',
+    deliveredByStudents: 0,
+    reviewed: 0,
+    total: 30,
+  },
+];
+
 const allUpcomingAssignments = [
   {
     id: '5435',
@@ -618,4 +692,5 @@ export {
   authFailure,
   allUpcomingAssignments,
   professorClassrooms,
+  assignmentsToReview,
 };