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