Create AssignmentCard and some refactorings
This commit is contained in:
parent
b7b796c07c
commit
803d30520d
4 changed files with 306 additions and 27 deletions
135
src/components/AssignmentCard.js
Normal file
135
src/components/AssignmentCard.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
Typography,
|
||||
CardActionArea,
|
||||
Stack,
|
||||
Tooltip,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
|
||||
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
||||
switch (layoutType) {
|
||||
case 'desktop':
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
width: '100%',
|
||||
borderLeft: `5px solid ${classrooms[0].color}`,
|
||||
}}
|
||||
>
|
||||
<CardActionArea
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'start',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ width: '100%' }}>
|
||||
<Tooltip title={title}>
|
||||
<Typography
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
fontSize: '17px',
|
||||
}}
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
{classrooms.map(c => c.name).join(',')}
|
||||
</Typography>
|
||||
<Divider sx={{ marginTop: '10px' }} />
|
||||
<Typography
|
||||
sx={{ marginTop: '10px' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
<strong>Data de entrega: </strong> {dueDate}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(',')} pts
|
||||
</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
|
||||
case 'mobile':
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
width: 390,
|
||||
borderTop: `5px solid ${classrooms[0].color}`,
|
||||
}}
|
||||
>
|
||||
<CardActionArea
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ width: '100%' }}>
|
||||
<Tooltip title={title}>
|
||||
<Typography
|
||||
sx={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
fontSize: '17px',
|
||||
}}
|
||||
gutterBottom
|
||||
variant="h6"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<Stack sx={{ width: '100%' }}>
|
||||
<Typography
|
||||
sx={{ fontWeight: 'bold' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
{classrooms.map(c => c.name).join(',')}
|
||||
</Typography>
|
||||
<Divider sx={{ marginTop: '10px' }} />
|
||||
<Typography
|
||||
sx={{ marginTop: '10px' }}
|
||||
variant="p"
|
||||
component="div"
|
||||
>
|
||||
<strong>Data de entrega: </strong> {dueDate}
|
||||
</Typography>
|
||||
<Typography variant="p" component="div">
|
||||
<strong>Valor: </strong>
|
||||
{scores.map(s => s.value).join(',')} pts
|
||||
</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export default AssignmentCard;
|
||||
|
|
@ -14,12 +14,12 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
|
|||
switch (layoutType) {
|
||||
case 'desktop':
|
||||
return (
|
||||
<Card sx={{ width: 390, height: 145 }}>
|
||||
<Card sx={{ width: 390, height: 135 }}>
|
||||
<CardActionArea sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<Container
|
||||
sx={{
|
||||
backgroundColor: color,
|
||||
width: '30%',
|
||||
width: '35%',
|
||||
height: '145px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -37,9 +37,10 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
|
|||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
fontSize: '17px',
|
||||
}}
|
||||
gutterBottom
|
||||
variant="h5"
|
||||
variant="h6"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
|
|
@ -64,7 +65,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
|
|||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
}}
|
||||
variant="body2"
|
||||
variant="body3"
|
||||
color="text.secondary"
|
||||
>
|
||||
{teachers.map(t => t.name).join(', ')}
|
||||
|
|
@ -94,7 +95,7 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) {
|
|||
<h1>{abbreviation}</h1>
|
||||
</Container>
|
||||
<CardContent sx={{ width: '100%' }}>
|
||||
<Typography gutterBottom variant="h5" component="div">
|
||||
<Typography gutterBottom variant="h6" component="div">
|
||||
{title}
|
||||
</Typography>
|
||||
<Stack alignItems="center" direction="row" spacing={1}>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const getClassrooms = userId =>
|
|||
return {
|
||||
data: [
|
||||
{
|
||||
id: '321',
|
||||
name: 'Introdução à Ciência de Dados',
|
||||
abbreviation: 'ICD',
|
||||
color: '#006FF2',
|
||||
|
|
@ -21,6 +22,7 @@ const getClassrooms = userId =>
|
|||
],
|
||||
},
|
||||
{
|
||||
id: '123',
|
||||
name: 'Gestão de Projetos',
|
||||
abbreviation: 'GP',
|
||||
color: '#7900F2',
|
||||
|
|
@ -37,6 +39,7 @@ const getClassrooms = userId =>
|
|||
],
|
||||
},
|
||||
{
|
||||
id: '666',
|
||||
name: 'Banco de Dados II',
|
||||
abbreviation: 'BDII',
|
||||
color: '#FF7A00',
|
||||
|
|
@ -49,6 +52,7 @@ const getClassrooms = userId =>
|
|||
],
|
||||
},
|
||||
{
|
||||
id: '765',
|
||||
name: 'Contabilidade Básica',
|
||||
abbreviation: 'CB',
|
||||
color: '#BB0000',
|
||||
|
|
@ -60,6 +64,7 @@ const getClassrooms = userId =>
|
|||
],
|
||||
},
|
||||
{
|
||||
id: '333',
|
||||
name: 'Linguagens de Programação',
|
||||
abbreviation: 'LP',
|
||||
color: '#039200',
|
||||
|
|
@ -75,6 +80,124 @@ const getClassrooms = userId =>
|
|||
};
|
||||
});
|
||||
|
||||
const getAssignments = userId =>
|
||||
sleep(3000).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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
const UserContext = createContext();
|
||||
|
||||
function UserProvider(props) {
|
||||
|
|
@ -95,17 +218,27 @@ function UserProvider(props) {
|
|||
return getClassrooms(user.id);
|
||||
};
|
||||
|
||||
return <UserContext.Provider value={{ state, fetchClassrooms }} {...props} />;
|
||||
const fetchAssignments = () => {
|
||||
return getAssignments(user.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<UserContext.Provider
|
||||
value={{ state, fetchClassrooms, fetchAssignments }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function useUser() {
|
||||
const { state, fetchClassrooms } = useContext(UserContext);
|
||||
const { state, fetchClassrooms, fetchAssignments } = useContext(UserContext);
|
||||
const isPending = state.status === 'pending';
|
||||
|
||||
return {
|
||||
state,
|
||||
isPending,
|
||||
fetchClassrooms,
|
||||
fetchAssignments,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@ import { useUser } from '../../context/user';
|
|||
|
||||
import ClassCard from '../../components/ClassCard';
|
||||
import useLayoutType from '../../hooks/useLayoutType';
|
||||
import AssignmentCard from '../../components/AssignmentCard';
|
||||
|
||||
function Home() {
|
||||
const layoutType = useLayoutType();
|
||||
const { fetchClassrooms } = useUser();
|
||||
const { fetchClassrooms, fetchAssignments } = useUser();
|
||||
const [classrooms, setClassrooms] = useState(null);
|
||||
const [assignments, setAssignments] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function getClassrooms() {
|
||||
|
|
@ -18,6 +20,14 @@ function Home() {
|
|||
getClassrooms();
|
||||
}, [fetchClassrooms]);
|
||||
|
||||
useEffect(() => {
|
||||
async function getAssignments() {
|
||||
const result = await fetchAssignments();
|
||||
setAssignments(result.data);
|
||||
}
|
||||
getAssignments();
|
||||
}, [fetchAssignments]);
|
||||
|
||||
switch (layoutType) {
|
||||
case 'desktop':
|
||||
return (
|
||||
|
|
@ -61,7 +71,7 @@ function Home() {
|
|||
<h1>Atividades</h1>
|
||||
<h2>Atribuídas</h2>
|
||||
<Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px">
|
||||
{classrooms === null ? (
|
||||
{assignments === null ? (
|
||||
Array(6)
|
||||
.fill()
|
||||
.map((_, index) => (
|
||||
|
|
@ -72,19 +82,19 @@ function Home() {
|
|||
height={145}
|
||||
/>
|
||||
))
|
||||
) : classrooms.length !== 0 ? (
|
||||
classrooms.map(classroom => (
|
||||
<ClassCard
|
||||
key={classroom.name}
|
||||
abbreviation={classroom.abbreviation}
|
||||
title={classroom.name}
|
||||
color={classroom.color}
|
||||
teachers={classroom.teachers}
|
||||
) : assignments.length !== 0 ? (
|
||||
assignments.map(assignment => (
|
||||
<AssignmentCard
|
||||
key={assignment.title}
|
||||
title={assignment.title}
|
||||
classrooms={assignment.classrooms}
|
||||
dueDate={assignment.dueDate}
|
||||
scores={assignment.scores}
|
||||
layoutType={layoutType}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<h1>Nenhuma sala de aula encontrada!</h1>
|
||||
<h1>Nenhuma atividade encontrada!</h1>
|
||||
)}
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
|
@ -147,7 +157,7 @@ function Home() {
|
|||
direction="row"
|
||||
gap="30px"
|
||||
>
|
||||
{classrooms === null ? (
|
||||
{assignments === null ? (
|
||||
Array(6)
|
||||
.fill()
|
||||
.map((_, index) => (
|
||||
|
|
@ -158,14 +168,14 @@ function Home() {
|
|||
height={245}
|
||||
/>
|
||||
))
|
||||
) : classrooms.length !== 0 ? (
|
||||
classrooms.map(classroom => (
|
||||
<ClassCard
|
||||
key={classroom.name}
|
||||
abbreviation={classroom.abbreviation}
|
||||
title={classroom.name}
|
||||
color={classroom.color}
|
||||
teachers={classroom.teachers}
|
||||
) : assignments.length !== 0 ? (
|
||||
assignments.map(assignment => (
|
||||
<AssignmentCard
|
||||
key={assignment.title}
|
||||
title={assignment.title}
|
||||
classrooms={assignment.classrooms}
|
||||
dueDate={assignment.dueDate}
|
||||
scores={assignment.scores}
|
||||
layoutType={layoutType}
|
||||
/>
|
||||
))
|
||||
|
|
|
|||
Loading…
Reference in a new issue