Refactor home screen
This commit is contained in:
parent
918f0fa0f3
commit
4a411c7779
5 changed files with 226 additions and 171 deletions
|
|
@ -12,7 +12,6 @@ import dayjs from 'dayjs';
|
||||||
import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
|
import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
|
||||||
|
|
||||||
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
||||||
console.log(classrooms);
|
|
||||||
switch (layoutType) {
|
switch (layoutType) {
|
||||||
case 'desktop':
|
case 'desktop':
|
||||||
return (
|
return (
|
||||||
|
|
@ -28,6 +27,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
|
||||||
.filter((_, i) => i > 0)
|
.filter((_, i) => i > 0)
|
||||||
.map(c => (
|
.map(c => (
|
||||||
<div
|
<div
|
||||||
|
key={c.id}
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
|
|
|
||||||
167
src/screens/Home/View.js
Normal file
167
src/screens/Home/View.js
Normal file
|
|
@ -0,0 +1,167 @@
|
||||||
|
import { 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 }) {
|
||||||
|
const { container, divider, assignmentsStack } = styles[layoutType];
|
||||||
|
|
||||||
|
switch (layoutType) {
|
||||||
|
case '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}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<h1>Nenhuma sala de aula encontrada!</h1>
|
||||||
|
)}
|
||||||
|
</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={390}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<h1>Nenhuma atividade encontrada!</h1>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
case 'mobile':
|
||||||
|
return (
|
||||||
|
<Stack sx={container}>
|
||||||
|
<h1>Turmas</h1>
|
||||||
|
<Stack
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
|
>
|
||||||
|
{classrooms === null ? (
|
||||||
|
Array(6)
|
||||||
|
.fill()
|
||||||
|
.map((_, index) => (
|
||||||
|
<Skeleton
|
||||||
|
key={index}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<h1>Nenhuma sala de aula encontrada!</h1>
|
||||||
|
)}
|
||||||
|
</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 ? (
|
||||||
|
Array(6)
|
||||||
|
.fill()
|
||||||
|
.map((_, index) => (
|
||||||
|
<Skeleton
|
||||||
|
key={index}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={245}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : 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>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default View;
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Grid, Skeleton, Stack } from '@mui/material';
|
|
||||||
import { useUser } from '../../context/user';
|
import { useUser } from '../../context/user';
|
||||||
|
|
||||||
import ClassCard from '../../components/ClassCard';
|
|
||||||
import useLayoutType from '../../hooks/useLayoutType';
|
import useLayoutType from '../../hooks/useLayoutType';
|
||||||
import AssignmentCard from '../../components/AssignmentCard';
|
import View from './View';
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
const layoutType = useLayoutType();
|
const layoutType = useLayoutType();
|
||||||
|
|
@ -28,172 +25,13 @@ function Home() {
|
||||||
getAssignments();
|
getAssignments();
|
||||||
}, [fetchAssignments]);
|
}, [fetchAssignments]);
|
||||||
|
|
||||||
switch (layoutType) {
|
return (
|
||||||
case 'desktop':
|
<View
|
||||||
return (
|
layoutType={layoutType}
|
||||||
<Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
|
classrooms={classrooms}
|
||||||
<Grid sx={{}} item xs={8}>
|
assignments={assignments}
|
||||||
<h1>Turmas</h1>
|
/>
|
||||||
<Stack
|
);
|
||||||
alignItems="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
>
|
|
||||||
{classrooms === null ? (
|
|
||||||
Array(6)
|
|
||||||
.fill()
|
|
||||||
.map((_, index) => (
|
|
||||||
<Skeleton
|
|
||||||
key={index}
|
|
||||||
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}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<h1>Nenhuma sala de aula encontrada!</h1>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid sx={{ borderLeft: '4px solid #CFCFCF' }} item xs={4}>
|
|
||||||
<h1>Atividades</h1>
|
|
||||||
<h2>Atribuídas</h2>
|
|
||||||
<Stack
|
|
||||||
sx={{ paddingBottom: '100px' }}
|
|
||||||
alignItems="end"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
>
|
|
||||||
{assignments === null ? (
|
|
||||||
Array(6)
|
|
||||||
.fill()
|
|
||||||
.map((_, index) => (
|
|
||||||
<Skeleton
|
|
||||||
key={index}
|
|
||||||
variant="rectangular"
|
|
||||||
width={390}
|
|
||||||
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}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<h1>Nenhuma atividade encontrada!</h1>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 'mobile':
|
|
||||||
return (
|
|
||||||
<Stack
|
|
||||||
sx={{
|
|
||||||
height: 'inherit',
|
|
||||||
width: '100%',
|
|
||||||
padding: '10px 20px ',
|
|
||||||
margin: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h1>Turmas</h1>
|
|
||||||
<Stack
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
>
|
|
||||||
{classrooms === null ? (
|
|
||||||
Array(6)
|
|
||||||
.fill()
|
|
||||||
.map((_, index) => (
|
|
||||||
<Skeleton
|
|
||||||
key={index}
|
|
||||||
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}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<h1>Nenhuma sala de aula encontrada!</h1>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
<h1>Atividades</h1>
|
|
||||||
<h2>Atribuídas</h2>
|
|
||||||
<Stack
|
|
||||||
sx={{
|
|
||||||
paddingBottom: '100px',
|
|
||||||
}}
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
>
|
|
||||||
{assignments === null ? (
|
|
||||||
Array(6)
|
|
||||||
.fill()
|
|
||||||
.map((_, index) => (
|
|
||||||
<Skeleton
|
|
||||||
key={index}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={245}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : 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>
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|
|
||||||
45
src/screens/Home/styles.js
Normal file
45
src/screens/Home/styles.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
// ========== 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,
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = { desktop, mobile };
|
||||||
|
export default styles;
|
||||||
5
src/utils/createArrayFrom1ToN.js
Normal file
5
src/utils/createArrayFrom1ToN.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
function createArrayFrom1ToN(N) {
|
||||||
|
return [...Array(N).keys()].map(i => i + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { createArrayFrom1ToN };
|
||||||
Loading…
Reference in a new issue