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,80 +3,159 @@ import { useLocation } from 'react-router-dom';
 import { sleep } from '../utils/sleep';
 import { useAuthState } from './auth';
 
+const allClassrooms = [
+  {
+    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: '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: '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: '765',
+    name: 'Contabilidade Básica',
+    abbreviation: 'CB',
+    color: '#BB0000',
+    teachers: [
+      {
+        name: 'Alexandre Couto Cardoso',
+        avatar: '/assets/alex.jpg',
+      },
+    ],
+  },
+  {
+    id: '333',
+    name: 'Linguagens de Programação',
+    abbreviation: 'LP',
+    color: '#039200',
+    teachers: [
+      {
+        name: 'Gabriel Felipe Cândido Novy',
+        avatar:
+          'https://lh3.googleusercontent.com/a-/AOh14GgvfrD--cl25V_3UOAR93sN_jKdYNJ9PXhUH2zXhQ=s75-c',
+      },
+    ],
+  },
+];
+
+const allAssignments = [
+  {
+    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: '1234',
+    title: 'Trabalho NoSQL',
+    dueDate: '2022-06-29 22:00',
+    scores: [
+      {
+        classroomId: '666',
+        value: 35,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '666'),
+  },
+  {
+    id: '1234',
+    title: 'Atividade 2 - Estudo de caso Sapiens Informática',
+    dueDate: '2022-06-25 23:59',
+    scores: [
+      {
+        classroomId: '123',
+        value: 10,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '123'),
+  },
+  {
+    id: '3671',
+    title:
+      'AA08 - Atividade de Aprendizagem 08 - Componentes de rateio de custos',
+    dueDate: '2022-07-23 10:00',
+    scores: [
+      {
+        classroomId: '765',
+        value: 1,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '765'),
+  },
+  {
+    id: '1717',
+    title: 'Trabalho interdisciplinar',
+    dueDate: '2022-08-20 23:59',
+    scores: [
+      {
+        classroomId: '666',
+        value: 20,
+      },
+      {
+        classroomId: '321',
+        value: 30,
+      },
+    ],
+    classrooms: allClassrooms.filter(c => c.id === '666' || c.id === '321'),
+  },
+];
+
 const getClassrooms = userId =>
   sleep(3000).then(() => {
     console.log('userId: ' + userId);
     return {
-      data: [
+      data: allClassrooms,
-        {
+    };
-          id: '321',
+  });
-          name: 'Introdução à Ciência de Dados',
+
-          abbreviation: 'ICD',
+const getClassroomById = classId =>
-          color: '#006FF2',
+  sleep(3000).then(() => {
-          teachers: [
+    console.log('classId ' + classId);
-            {
+    return {
-              name: 'Carlos Alexandre Silva',
+      data: allClassrooms.filter(c => c.id === classId)[0],
-              avatar:
-                'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=50&q=80',
-            },
-          ],
-        },
-        {
-          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: '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: '765',
-          name: 'Contabilidade Básica',
-          abbreviation: 'CB',
-          color: '#BB0000',
-          teachers: [
-            {
-              name: 'Alexandre Couto Cardoso',
-              avatar: '/assets/alex.jpg',
-            },
-          ],
-        },
-        {
-          id: '333',
-          name: 'Linguagens de Programação',
-          abbreviation: 'LP',
-          color: '#039200',
-          teachers: [
-            {
-              name: 'Gabriel Felipe Cândido Novy',
-              avatar:
-                'https://lh3.googleusercontent.com/a-/AOh14GgvfrD--cl25V_3UOAR93sN_jKdYNJ9PXhUH2zXhQ=s75-c',
-            },
-          ],
-        },
-      ],
     };
   });
 
@@ -84,160 +163,7 @@ const getAssignments = userId =>
   sleep(4000).then(() => {
     console.log('userId: ' + userId);
     return {
-      data: [
+      data: allAssignments,
-        {
-          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: [
-            {
-              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',
-          title: 'Trabalho NoSQL',
-          dueDate: '2022-06-29 22:00',
-          scores: [
-            {
-              classroomId: '666',
-              value: 35,
-            },
-          ],
-          classrooms: [
-            {
-              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',
-          title: 'Atividade 2 - Estudo de caso Sapiens Informática',
-          dueDate: '2022-06-25 23:59',
-          scores: [
-            {
-              classroomId: '123',
-              value: 10,
-            },
-          ],
-          classrooms: [
-            {
-              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',
-          title:
-            'AA08 - Atividade de Aprendizagem 08 - Componentes de rateio de custos',
-          dueDate: '2022-07-23 10:00',
-          scores: [
-            {
-              classroomId: '765',
-              value: 1,
-            },
-          ],
-          classrooms: [
-            {
-              id: '765',
-              name: 'Contabilidade Básica',
-              abbreviation: 'CB',
-              color: '#BB0000',
-              teachers: [
-                {
-                  name: 'Alexandre Couto Cardoso',
-                  avatar: '/assets/alex.jpg',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          id: '1717',
-          title: 'Trabalho interdisciplinar',
-          dueDate: '2022-08-20 23:59',
-          scores: [
-            {
-              classroomId: '666',
-              value: 20,
-            },
-            {
-              classroomId: '321',
-              value: 30,
-            },
-          ],
-          classrooms: [
-            {
-              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: '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',
-                },
-              ],
-            },
-          ],
-        },
-      ],
     };
   });
 
@@ -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}
     />
   );
 }