Handle click on class cards and some small refactorings

src/AuthenticatedApp.js

@@ -16,6 +16,7 @@ import useLayoutType from './hooks/useLayoutType';
 import Toolbar from './components/Toolbar';
 import { useUser } from './context/user';
 import { useAuthState } from './context/auth';
+import Classroom from './screens/Classroom';
 
 function AuthenticatedApp() {
   const navigate = useNavigate();
@@ -59,6 +60,9 @@ function AuthenticatedApp() {
             <Route path="/home" element={<Home />} />
             <Route path="/info" element={<Information />} />
             <Route path="/calendar" element={<Calendar />} />
+            <Route path="/class">
+              <Route path=":id" element={<Classroom />} />
+            </Route>
             <Route path="/login" element={<Navigate to="/home" />} />
             <Route path="/" element={<Navigate to="/home" />} />
           </Routes>

src/components/ClassCard.js

@@ -10,12 +10,22 @@ import {
   Tooltip,
 } from '@mui/material';
 
-function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
+function ClassCard({
+  abbreviation,
+  title,
+  color,
+  teachers,
+  layoutType,
+  onClick,
+}) {
   switch (layoutType) {
     case 'desktop':
       return (
         <Card sx={{ width: 390, height: 135 }}>
-          <CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
+          <CardActionArea
+            onClick={() => onClick()}
+            sx={{ display: 'flex', flexDirection: 'row' }}
+          >
             <Container
               sx={{
                 backgroundColor: color,
@@ -80,7 +90,10 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
     case 'mobile':
       return (
         <Card sx={{ width: '100%' }}>
-          <CardActionArea sx={{ display: 'flex', flexDirection: 'column' }}>
+          <CardActionArea
+            onClick={() => onClick()}
+            sx={{ display: 'flex', flexDirection: 'column' }}
+          >
             <Container
               sx={{
                 backgroundColor: color,

src/context/user.js

@@ -3,11 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { sleep } from '../utils/sleep';
 import { useAuthState } from './auth';
 
-const getClassrooms = userId =>
+const allClassrooms = [
-  sleep(3000).then(() => {
-    console.log('userId: ' + userId);
-    return {
-      data: [
   {
     id: '321',
     name: 'Introdução à Ciência de Dados',
@@ -76,15 +72,9 @@ const getClassrooms = userId =>
       },
     ],
   },
-      ],
+];
-    };
-  });
 
-const getAssignments = userId =>
+const allAssignments = [
-  sleep(4000).then(() => {
-    console.log('userId: ' + userId);
-    return {
-      data: [
   {
     id: '5435',
     title:
@@ -96,21 +86,7 @@ const getAssignments = userId =>
         value: 30,
       },
     ],
-          classrooms: [
+    classrooms: allClassrooms.filter(c => c.id === '321'),
-            {
-              id: '321',
-              name: 'Introdução à Ciência de Dados',
-              abbreviation: 'ICD',
-              color: '#006FF2',
-              teachers: [
-                {
-                  name: 'Carlos Alexandre Silva',
-                  avatar:
-                    'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
-                },
-              ],
-            },
-          ],
   },
   {
     id: '1234',
@@ -122,21 +98,7 @@ const getAssignments = userId =>
         value: 35,
       },
     ],
-          classrooms: [
+    classrooms: allClassrooms.filter(c => c.id === '666'),
-            {
-              id: '666',
-              name: 'Banco de Dados II',
-              abbreviation: 'BDII',
-              color: '#FF7A00',
-              teachers: [
-                {
-                  name: 'Cristiane Norbiato Targa',
-                  avatar:
-                    'https://lh3.googleusercontent.com/a-/AOh14GhwNeQ0h2eKl2WXGuwyDzvLWtrvyrG2kJtZ7A1EBw=s75-c',
-                },
-              ],
-            },
-          ],
   },
   {
     id: '1234',
@@ -148,25 +110,7 @@ const getAssignments = userId =>
         value: 10,
       },
     ],
-          classrooms: [
+    classrooms: allClassrooms.filter(c => c.id === '123'),
-            {
-              id: '123',
-              name: 'Gestão de Projetos',
-              abbreviation: 'GP',
-              color: '#7900F2',
-              teachers: [
-                {
-                  name: 'Míriam Lúcia Barbosa',
-                  avatar:
-                    'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
-                },
-                {
-                  name: 'Alexandre Couto Cardoso',
-                  avatar: '/assets/alex.jpg',
-                },
-              ],
-            },
-          ],
   },
   {
     id: '3671',
@@ -179,20 +123,7 @@ const getAssignments = userId =>
         value: 1,
       },
     ],
-          classrooms: [
+    classrooms: allClassrooms.filter(c => c.id === '765'),
-            {
-              id: '765',
-              name: 'Contabilidade Básica',
-              abbreviation: 'CB',
-              color: '#BB0000',
-              teachers: [
-                {
-                  name: 'Alexandre Couto Cardoso',
-                  avatar: '/assets/alex.jpg',
-                },
-              ],
-            },
-          ],
   },
   {
     id: '1717',
@@ -208,36 +139,31 @@ const getAssignments = userId =>
         value: 30,
       },
     ],
-          classrooms: [
+    classrooms: allClassrooms.filter(c => c.id === '666' || c.id === '321'),
-            {
-              id: '666',
-              name: 'Banco de Dados II',
-              abbreviation: 'BDII',
-              color: '#FF7A00',
-              teachers: [
-                {
-                  name: 'Cristiane Norbiato Targa',
-                  avatar:
-                    'https://lh3.googleusercontent.com/a-/AOh14GhwNeQ0h2eKl2WXGuwyDzvLWtrvyrG2kJtZ7A1EBw=s75-c',
   },
-              ],
+];
-            },
+
-            {
+const getClassrooms = userId =>
-              id: '321',
+  sleep(3000).then(() => {
-              name: 'Introdução à Ciência de Dados',
+    console.log('userId: ' + userId);
-              abbreviation: 'ICD',
+    return {
-              color: '#006FF2',
+      data: allClassrooms,
-              teachers: [
+    };
-                {
+  });
-                  name: 'Carlos Alexandre Silva',
+
-                  avatar:
+const getClassroomById = classId =>
-                    'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
+  sleep(3000).then(() => {
-                },
+    console.log('classId ' + classId);
-              ],
+    return {
-            },
+      data: allClassrooms.filter(c => c.id === classId)[0],
-          ],
+    };
-        },
+  });
-      ],
+
+const getAssignments = userId =>
+  sleep(4000).then(() => {
+    console.log('userId: ' + userId);
+    return {
+      data: allAssignments,
     };
   });
 
@@ -260,21 +186,25 @@ function UserProvider(props) {
 
   const fetchAssignments = () => getAssignments(user.id);
 
+  const fetchClassroomById = classId => getClassroomById(classId);
+
   return (
     <UserContext.Provider
-      value={{ state, fetchClassrooms, fetchAssignments }}
+      value={{ state, fetchClassrooms, fetchAssignments, fetchClassroomById }}
       {...props}
     />
   );
 }
 
 function useUser() {
-  const { state, fetchClassrooms, fetchAssignments } = useContext(UserContext);
+  const { state, fetchClassrooms, fetchAssignments, fetchClassroomById } =
+    useContext(UserContext);
 
   return {
     state,
     fetchClassrooms,
     fetchAssignments,
+    fetchClassroomById,
   };
 }
 

src/screens/Classroom/index.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useUser } from '../../context/user';
+
+function Classroom() {
+  const params = useParams();
+  const { fetchClassroomById } = useUser();
+  const [classroom, setClassroom] = useState(null);
+
+  useEffect(() => {
+    async function getClassroomById(classId) {
+      const result = await fetchClassroomById(classId);
+      setClassroom(result.data);
+    }
+
+    getClassroomById(params.id);
+  }, [fetchClassroomById, params]);
+
+  useEffect(() => {
+    if (classroom !== null) {
+      document.title = classroom.name;
+    }
+  }, [classroom]);
+
+  return (
+    <div>
+      {classroom === null ? <h1>Loading...</h1> : <h1>{classroom.name}</h1>}
+    </div>
+  );
+}
+
+export default Classroom;

src/screens/Home/View.js

@@ -6,7 +6,7 @@ import AssignmentCard from '../../components/AssignmentCard';
 import styles from './styles';
 import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
 
-function View({ layoutType, classrooms, assignments }) {
+function View({ layoutType, classrooms, assignments, onClickClassCard }) {
   const { container, divider, assignmentsStack } = styles[layoutType];
 
   switch (layoutType) {
@@ -39,6 +39,7 @@ function View({ layoutType, classrooms, assignments }) {
                     color={classroom.color}
                     teachers={classroom.teachers}
                     layoutType={layoutType}
+                    onClick={() => onClickClassCard(classroom.id)}
                   />
                 ))
               ) : (
@@ -112,6 +113,7 @@ function View({ layoutType, classrooms, assignments }) {
                   color={classroom.color}
                   teachers={classroom.teachers}
                   layoutType={layoutType}
+                  onClick={() => onClickClassCard(classroom.id)}
                 />
               ))
             ) : (

src/screens/Home/index.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useUser } from '../../context/user';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import useLayoutType from '../../hooks/useLayoutType';
@@ -6,6 +7,7 @@ import View from './View';
 
 function Home() {
   useDocumentTitle('Página Inicial');
+  const navigate = useNavigate();
   const layoutType = useLayoutType();
   const { fetchClassrooms, fetchAssignments } = useUser();
   const [classrooms, setClassrooms] = useState(null);
@@ -27,11 +29,16 @@ function Home() {
     getAssignments();
   }, [fetchAssignments]);
 
+  const onClickClassCard = id => {
+    navigate(`/class/${id}`, { replace: true });
+  };
+
   return (
     <View
       layoutType={layoutType}
       classrooms={classrooms}
       assignments={assignments}
+      onClickClassCard={onClickClassCard}
     />
   );
 }