leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Handle click on class cards and some small refactorings

Browse source
This commit is contained in:
Leonardo Murça 2022-06-27 22:39:14 -03:00
parent cf04dd22d4
commit d06352c719
6 changed files with 218 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/AuthenticatedApp.js
View file

@ -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>

19
src/components/ClassCard.js
View file

@ -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,

382
src/context/user.js
View file

@ -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: [
{
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 (
<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,
};
}

32
src/screens/Classroom/index.js Normal file
View file

@ -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;

4
src/screens/Home/View.js
View file

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

7
src/screens/Home/index.js
View file

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