From 3b48463620120b2aa08b2d006afa19993f2094f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Mon, 15 Aug 2022 21:44:54 -0300
Subject: [PATCH] Add assignment navigation in home screen

---
 src/app/AuthenticatedApp.js            |  2 +-
 src/app/data.js                        |  3 ++-
 src/components/AssignmentCard/index.js | 13 ++++++++++---
 src/screens/Home/View.js               | 10 +++++++++-
 src/screens/Home/index.js              |  5 +++++
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/app/AuthenticatedApp.js b/src/app/AuthenticatedApp.js
index ec032c9..38afdce 100644
--- a/src/app/AuthenticatedApp.js
+++ b/src/app/AuthenticatedApp.js
@@ -49,7 +49,7 @@ function AuthenticatedApp() {
               <Route path=":id" element={<Classroom />} />
             </Route>
             <Route path="/assignment">
-              <Route path=":id/" element={<Assignment />} />
+              <Route path=":id" element={<Assignment />} />
             </Route>
             <Route path="/login" element={<Navigate to="/home" />} />
             <Route path="/" element={<Navigate to="/home" />} />
diff --git a/src/app/data.js b/src/app/data.js
index 1517370..64e1b43 100644
--- a/src/app/data.js
+++ b/src/app/data.js
@@ -29,7 +29,8 @@ const menuOptions = activePath => [
       activePath === '/home' ||
       activePath === '/login' ||
       activePath === '/' ||
-      activePath.indexOf('class') !== -1,
+      activePath.indexOf('class') !== -1 ||
+      activePath.indexOf('assignment') !== -1,
   },
   {
     id: 1,
diff --git a/src/components/AssignmentCard/index.js b/src/components/AssignmentCard/index.js
index 18c3ed7..e893b3d 100644
--- a/src/components/AssignmentCard/index.js
+++ b/src/components/AssignmentCard/index.js
@@ -13,7 +13,14 @@ import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
 
 import styles from './styles';
 
-function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
+function AssignmentCard({
+  title,
+  classrooms,
+  dueDate,
+  scores,
+  layoutType,
+  onClick,
+}) {
   const {
     cardContainer,
     classroomLinesIndicator,
@@ -33,7 +40,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
           classrooms
             .filter((_, i) => i > 0)
             .map(c => <div key={c.id} style={classroomLinesIndicator(c)} />)}
-        <CardActionArea sx={cardActionArea}>
+        <CardActionArea onClick={() => onClick()} sx={cardActionArea}>
           <CardContent sx={cardContent}>
             <Tooltip title={title}>
               <Typography
@@ -72,7 +79,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
   } else if (layoutType === 'mobile') {
     return (
       <Card sx={cardContainer(classrooms)}>
-        <CardActionArea sx={cardActionArea}>
+        <CardActionArea onClick={() => onClick()} sx={cardActionArea}>
           {classrooms.length > 1 &&
             classrooms
               .filter((_, i) => i > 0)
diff --git a/src/screens/Home/View.js b/src/screens/Home/View.js
index 0cb1cd0..c99fb74 100644
--- a/src/screens/Home/View.js
+++ b/src/screens/Home/View.js
@@ -6,7 +6,13 @@ import AssignmentCard from '../../components/AssignmentCard';
 import styles from './styles';
 import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
 
-function View({ layoutType, classrooms, assignments, onClickClassCard }) {
+function View({
+  layoutType,
+  classrooms,
+  assignments,
+  onClickClassCard,
+  onClickAssignmentCard,
+}) {
   const { container, divider, assignmentsStack } = styles[layoutType];
 
   if (layoutType === 'desktop') {
@@ -69,6 +75,7 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
                   dueDate={assignment.dueDate}
                   scores={assignment.scores}
                   layoutType={layoutType}
+                  onClick={() => onClickAssignmentCard(assignment.id)}
                 />
               ))
             ) : (
@@ -142,6 +149,7 @@ function View({ layoutType, classrooms, assignments, onClickClassCard }) {
                 dueDate={assignment.dueDate}
                 scores={assignment.scores}
                 layoutType={layoutType}
+                onClick={() => onClickAssignmentCard(assignment.id)}
               />
             ))
           ) : (
diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js
index 1653179..a6dfc81 100644
--- a/src/screens/Home/index.js
+++ b/src/screens/Home/index.js
@@ -33,12 +33,17 @@ function Home() {
     navigate(`/class/${id}`, { replace: true });
   };
 
+  const onClickAssignmentCard = id => {
+    navigate(`/assignment/${id}`, { replace: true });
+  };
+
   return (
     <View
       layoutType={layoutType}
       classrooms={classrooms}
       assignments={assignments}
       onClickClassCard={onClickClassCard}
+      onClickAssignmentCard={onClickAssignmentCard}
     />
   );
 }