diff options
author | Leonardo Murça <106257713+leomurca@users.noreply.github.com> | 2023-02-07 20:40:41 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-02-07 20:40:41 -0300 |
commit | 8eca8b79ce4bfc40f8416309cbcfe397ed935ec4 (patch) | |
tree | ca4152122b67605e76f7a53ed1a14402255b23aa /src/screens/student/Home | |
parent | e3de3c8e5fe06f7d14b2dc99a8b6aadc3b9bf18a (diff) | |
parent | c1f1286c86a47b87abcca55cbd0177d2a9c92fcd (diff) |
Feature/professor classroom
Diffstat (limited to 'src/screens/student/Home')
-rw-r--r-- | src/screens/student/Home/View.js | 186 | ||||
-rw-r--r-- | src/screens/student/Home/index.js | 51 | ||||
-rw-r--r-- | src/screens/student/Home/styles.js | 52 |
3 files changed, 289 insertions, 0 deletions
diff --git a/src/screens/student/Home/View.js b/src/screens/student/Home/View.js new file mode 100644 index 0000000..27b0f78 --- /dev/null +++ b/src/screens/student/Home/View.js @@ -0,0 +1,186 @@ +import { Container, Grid, Skeleton, Stack } from '@mui/material'; + +import ClassCard from '../../../components/ClassCard'; +import AssignmentCard from '../../../components/AssignmentCard'; + +import styles from './styles'; +import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN'; + +function View({ + layoutType, + classrooms, + assignments, + onClickClassCard, + onClickAssignmentCard, +}) { + const { container, divider, assignmentsStack } = styles[layoutType]; + + if (layoutType === 'desktop') { + return ( + <Grid sx={container} container spacing={2}> + <Grid item xs={8}> + <h1>Turmas</h1> + <Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px"> + {classrooms === null ? ( + createArrayFrom1ToN(6).map(i => ( + <Skeleton + key={i} + variant="rectangular" + width={390} + height={145} + /> + )) + ) : classrooms.length !== 0 ? ( + classrooms.map(classroom => ( + <ClassCard + key={classroom.name} + abbreviation={classroom.abbreviation} + title={classroom.name} + color={classroom.color} + teachers={classroom.teachers} + layoutType={layoutType} + onClick={() => onClickClassCard(classroom.id)} + /> + )) + ) : ( + <Container + sx={{ + height: '100vh', + display: 'flex', + justifyContent: 'center', + }} + disableGutters + > + <p>Nenhuma sala de aula encontrada!</p> + </Container> + )} + </Stack> + </Grid> + <Grid sx={divider} item xs={4}> + <h1>Atividades</h1> + <h2>Atribuídas</h2> + <Stack + sx={assignmentsStack} + alignItems="end" + flexWrap="wrap" + direction="row" + gap="30px" + > + {assignments === null ? ( + createArrayFrom1ToN(6).map(i => ( + <Skeleton + key={i} + variant="rectangular" + width="35em" + height={145} + /> + )) + ) : assignments.length !== 0 ? ( + assignments.map(assignment => ( + <AssignmentCard + key={assignment.title} + title={assignment.title} + classrooms={assignment.classrooms} + dueDate={assignment.dueDate} + scores={assignment.scores} + layoutType={layoutType} + onClick={() => onClickAssignmentCard(assignment.id)} + /> + )) + ) : ( + <Container + sx={{ + height: '100vh', + display: 'flex', + justifyContent: 'center', + }} + disableGutters + > + <p>Nenhuma atividade encontrada!</p> + </Container> + )} + </Stack> + </Grid> + </Grid> + ); + } else if (layoutType === 'mobile') { + return ( + <Stack sx={container}> + <h1>Turmas</h1> + <Stack + alignItems="center" + justifyContent="center" + flexWrap="wrap" + direction="row" + gap="30px" + > + {classrooms === null ? ( + createArrayFrom1ToN(6).map(i => ( + <Skeleton + key={i} + variant="rectangular" + width="100%" + height={245} + /> + )) + ) : classrooms.length !== 0 ? ( + classrooms.map(classroom => ( + <ClassCard + key={classroom.name} + abbreviation={classroom.abbreviation} + title={classroom.name} + color={classroom.color} + teachers={classroom.teachers} + layoutType={layoutType} + onClick={() => onClickClassCard(classroom.id)} + /> + )) + ) : ( + <Container disableGutters> + <p>Nenhuma sala de aula encontrada!</p> + </Container> + )} + </Stack> + <h1 style={divider}>Atividades</h1> + <h2>Atribuídas</h2> + <Stack + sx={assignmentsStack} + alignItems="center" + justifyContent="center" + flexWrap="wrap" + direction="row" + gap="30px" + > + {assignments === null ? ( + createArrayFrom1ToN(6).map(i => ( + <Skeleton + key={i} + variant="rectangular" + width="100%" + height={190} + /> + )) + ) : assignments.length !== 0 ? ( + assignments.map(assignment => ( + <AssignmentCard + key={assignment.title} + title={assignment.title} + classrooms={assignment.classrooms} + dueDate={assignment.dueDate} + scores={assignment.scores} + layoutType={layoutType} + onClick={() => onClickAssignmentCard(assignment.id)} + /> + )) + ) : ( + <Container disableGutters> + <p>Nenhuma atividade encontrada!</p> + </Container> + )} + </Stack> + </Stack> + ); + } +} + +export default View; diff --git a/src/screens/student/Home/index.js b/src/screens/student/Home/index.js new file mode 100644 index 0000000..75d734e --- /dev/null +++ b/src/screens/student/Home/index.js @@ -0,0 +1,51 @@ +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'; +import View from './View'; + +function Home() { + useDocumentTitle('Página Inicial'); + const navigate = useNavigate(); + const layoutType = useLayoutType(); + const { userService } = useUser(); + const [classrooms, setClassrooms] = useState(null); + const [assignments, setAssignments] = useState(null); + + useEffect(() => { + async function getClassrooms() { + const result = await userService.fetchClassrooms(); + setClassrooms(result.data); + } + getClassrooms(); + }, [userService, userService.fetchClassrooms]); + + useEffect(() => { + async function getAssignments() { + const result = await userService.fetchAllAssignments(); + setAssignments(result.data); + } + getAssignments(); + }, [userService, userService.fetchAllAssignments]); + + const onClickClassCard = id => { + navigate(`/class/${id}`); + }; + + const onClickAssignmentCard = id => { + navigate(`/assignment/${id}`); + }; + + return ( + <View + layoutType={layoutType} + classrooms={classrooms} + assignments={assignments} + onClickClassCard={onClickClassCard} + onClickAssignmentCard={onClickAssignmentCard} + /> + ); +} + +export default Home; diff --git a/src/screens/student/Home/styles.js b/src/screens/student/Home/styles.js new file mode 100644 index 0000000..4ddefb9 --- /dev/null +++ b/src/screens/student/Home/styles.js @@ -0,0 +1,52 @@ +// ========== Desktop ========== +const desktopContainer = { + height: '100vh', + margin: 0, +}; + +const desktopDivider = { + borderLeft: '4px solid #CFCFCF', +}; + +const desktopAssignmentsStack = { + paddingBottom: '100px', +}; + +const desktop = { + container: desktopContainer, + divider: desktopDivider, + assignmentsStack: desktopAssignmentsStack, +}; + +// ========== Mobile ========== +const mobileContainer = { + height: 'inherit', + width: '100%', + padding: '10px 20px ', + margin: 0, +}; + +const mobileDivider = { + borderTop: '2px solid #CFCFCF', + paddingTop: '15px', +}; + +const mobileAssignmentsStack = { + paddingBottom: '100px', +}; + +const mobile = { + container: mobileContainer, + divider: mobileDivider, + assignmentsStack: mobileAssignmentsStack, +}; + +// ========== Unset ========== +const unset = { + container: null, + divider: null, + assignmentsStack: null, +}; + +const styles = { desktop, mobile, unset }; +export default styles; |