diff --git a/src/components/AssignmentCard.js b/src/components/AssignmentCard.js new file mode 100644 index 0000000..a0addf9 --- /dev/null +++ b/src/components/AssignmentCard.js @@ -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 ( + + + + + + {title} + + + + + {classrooms.map(c => c.name).join(',')} + + + + Data de entrega: {dueDate} + + + Valor: + {scores.map(s => s.value).join(',')} pts + + + + + + ); + + case 'mobile': + return ( + + + + + + {title} + + + + + {classrooms.map(c => c.name).join(',')} + + + + Data de entrega: {dueDate} + + + Valor: + {scores.map(s => s.value).join(',')} pts + + + + + + ); + + default: + return null; + } +} + +export default AssignmentCard; diff --git a/src/components/ClassCard.js b/src/components/ClassCard.js index e32abbb..9164a39 100644 --- a/src/components/ClassCard.js +++ b/src/components/ClassCard.js @@ -14,12 +14,12 @@ function ClassCard({ abbreviation, title, color, teachers, layoutType }) { switch (layoutType) { case 'desktop': return ( - + {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 }) {

{abbreviation}

 - + {title} diff --git a/src/context/user.js b/src/context/user.js index cec2823..dcd8b84 100644 --- a/src/context/user.js +++ b/src/context/user.js @@ -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 ; + const fetchAssignments = () => { + return getAssignments(user.id); + }; + + return ( + + ); } function useUser() { - const { state, fetchClassrooms } = useContext(UserContext); + const { state, fetchClassrooms, fetchAssignments } = useContext(UserContext); const isPending = state.status === 'pending'; return { state, isPending, fetchClassrooms, + fetchAssignments, }; } diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index f98f9f8..f0b50d9 100644 --- a/src/screens/Home/index.js +++ b/src/screens/Home/index.js @@ -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() {

Atividades

Atribuídas

- {classrooms === null ? ( + {assignments === null ? ( Array(6) .fill() .map((_, index) => ( @@ -72,19 +82,19 @@ function Home() { height={145} /> )) - ) : classrooms.length !== 0 ? ( - classrooms.map(classroom => ( - ( + )) ) : ( -

Nenhuma sala de aula encontrada!

+

Nenhuma atividade encontrada!

)} @@ -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 => ( - ( + ))