From d06352c7192e940608c41249c4df2355d91dbb6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Mon, 27 Jun 2022 22:39:14 -0300 Subject: [PATCH] Handle click on class cards and some small refactorings --- src/AuthenticatedApp.js | 4 + src/components/ClassCard.js | 19 +- src/context/user.js | 382 ++++++++++++++------------------- src/screens/Classroom/index.js | 32 +++ src/screens/Home/View.js | 4 +- src/screens/Home/index.js | 7 + 6 files changed, 218 insertions(+), 230 deletions(-) create mode 100644 src/screens/Classroom/index.js diff --git a/src/AuthenticatedApp.js b/src/AuthenticatedApp.js index 2eaa883..4fc2b86 100644 --- a/src/AuthenticatedApp.js +++ b/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() { } /> } /> } /> + + } /> + } /> } /> diff --git a/src/components/ClassCard.js b/src/components/ClassCard.js index 9164a39..295bff0 100644 --- a/src/components/ClassCard.js +++ b/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 ( - + onClick()} + sx={{ display: 'flex', flexDirection: 'row' }} + > - + onClick()} + sx={{ display: 'flex', flexDirection: 'column' }} + > 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: [ - { - 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', - }, - ], - }, - ], + data: allClassrooms, + }; + }); + +const getClassroomById = classId => + sleep(3000).then(() => { + console.log('classId ' + classId); + return { + data: allClassrooms.filter(c => c.id === classId)[0], }; }); @@ -84,160 +163,7 @@ const getAssignments = userId => sleep(4000).then(() => { console.log('userId: ' + userId); return { - data: [ - { - 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', - }, - ], - }, - ], - }, - ], + data: allAssignments, }; }); @@ -260,21 +186,25 @@ function UserProvider(props) { const fetchAssignments = () => getAssignments(user.id); + const fetchClassroomById = classId => getClassroomById(classId); + return ( ); } function useUser() { - const { state, fetchClassrooms, fetchAssignments } = useContext(UserContext); + const { state, fetchClassrooms, fetchAssignments, fetchClassroomById } = + useContext(UserContext); return { state, fetchClassrooms, fetchAssignments, + fetchClassroomById, }; } diff --git a/src/screens/Classroom/index.js b/src/screens/Classroom/index.js new file mode 100644 index 0000000..9fa3c64 --- /dev/null +++ b/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 ( +
+ {classroom === null ?

Loading...

:

{classroom.name}

} +
+ ); +} + +export default Classroom; diff --git a/src/screens/Home/View.js b/src/screens/Home/View.js index 5114c47..a8087d6 100644 --- a/src/screens/Home/View.js +++ b/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)} /> )) ) : ( diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index 5ce514e..1653179 100644 --- a/src/screens/Home/index.js +++ b/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 ( ); }