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

Refactor home screen

Browse source
This commit is contained in:
Leonardo Murça 2022-06-26 21:37:59 -03:00
parent 918f0fa0f3
commit 4a411c7779
5 changed files with 226 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/AssignmentCard.js
View file

@ -12,7 +12,6 @@ import dayjs from 'dayjs';
import { capitalizeFirstLetter } from '../utils/capitalizeFirstLetter';
function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
console.log(classrooms);
switch (layoutType) {
case 'desktop':
return (
@ -28,6 +27,7 @@ function AssignmentCard({ title, classrooms, dueDate, scores, layoutType }) {
.filter((_, i) => i > 0)
.map(c => (
<div
key={c.id}
style={{
position: 'absolute',
height: '100%',

167
src/screens/Home/View.js Normal file
View 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;

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

@ -1,10 +1,7 @@
import { useEffect, useState } from 'react';
import { Grid, Skeleton, Stack } from '@mui/material';
import { useUser } from '../../context/user';
import ClassCard from '../../components/ClassCard';
import useLayoutType from '../../hooks/useLayoutType';
import AssignmentCard from '../../components/AssignmentCard';
import View from './View';
function Home() {
const layoutType = useLayoutType();
@ -28,172 +25,13 @@ function Home() {
getAssignments();
}, [fetchAssignments]);
switch (layoutType) {
case 'desktop':
return (
<Grid sx={{ height: '100vh', margin: 0 }} container spacing={2}>
<Grid sx={{}} item xs={8}>
<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}
<View
layoutType={layoutType}
classrooms={classrooms}
assignments={assignments}
/>
))
) : (
<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;

45
src/screens/Home/styles.js Normal file
View 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
View file

@ -0,0 +1,5 @@
function createArrayFrom1ToN(N) {
return [...Array(N).keys()].map(i => i + 1);
}
export { createArrayFrom1ToN };