Add assignment navigation in home screen

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" />} />

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,

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)

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)}
               />
             ))
           ) : (

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}
     />
   );
 }