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

Extract styles to file in PeopleTab

Browse source
This commit is contained in:
Leonardo Murça 2022-08-28 15:44:47 -03:00
parent 9f05b4f3c1
commit 84e38f6a08
2 changed files with 139 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

197
src/screens/Classroom/PeopleTab/index.js
View file

@ -1,16 +1,22 @@
import { Avatar, Container, Skeleton, Stack, Typography } from '@mui/material'; import { Avatar, Container, Skeleton, Stack, Typography } from '@mui/material';
import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN'; import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
import styles from './styles';
function PeopleTab({ layoutType, peopleTabData }) { function PeopleTab({ layoutType, peopleTabData }) {
const layoutResolver = (state, people, layoutType) => { const layoutResolver = (state, people, layoutType) => {
const {
externalContainer,
sectionContainer,
sectionTitle,
personContainer,
personAvatar,
personName,
} = styles[layoutType];
if (layoutType === 'desktop') { if (layoutType === 'desktop') {
switch (state) { switch (state) {
case 'loading': case 'loading':
return ( return (
<Container <Container sx={externalContainer} disableGutters>
sx={{ marginTop: '50px', height: '100vh' }}
disableGutters
>
<Stack alignItems="center"> <Stack alignItems="center">
<Skeleton <Skeleton
variant="rectangular" variant="rectangular"
@ -61,90 +67,38 @@ function PeopleTab({ layoutType, peopleTabData }) {
); );
case 'idle': case 'idle':
return ( return (
<Container <Container sx={externalContainer} disableGutters>
sx={{ marginTop: '50px', height: '100vh' }} <Container sx={sectionContainer} disableGutters>
disableGutters <Typography sx={sectionTitle} variant="h4">
>
<Container sx={{ width: '90%' }} disableGutters>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h4"
>
Docentes Docentes
</Typography> </Typography>
<Stack alignItems="center"> <Stack alignItems="center">
{people {people
.filter(p => p.role === 'PROFESSOR') .filter(p => p.role === 'PROFESSOR')
.map(p => ( .map(p => (
<Container <Container key={p.id} sx={personContainer} disableGutters>
key={p.id} <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
sx={{ <Typography sx={personName} variant="h5">
width: '95%', {p.name}
padding: '20px', </Typography>
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '60px',
height: '60px',
marginRight: '15px',
}}
/>
<Typography variant="h5">{p.name}</Typography>
</Container> </Container>
))} ))}
</Stack> </Stack>
</Container> </Container>
<Container <Container sx={sectionContainer} disableGutters>
sx={{ width: '90%', marginTop: '30px' }} <Typography sx={sectionTitle} variant="h4">
disableGutters
>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h4"
>
Discentes Discentes
</Typography> </Typography>
<Stack alignItems="center"> <Stack alignItems="center">
{people {people
.filter(p => p.role === 'STUDENT') .filter(p => p.role === 'STUDENT')
.map(p => ( .map(p => (
<Container <Container key={p.id} sx={personContainer} disableGutters>
key={p.id} <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
sx={{ <Typography sx={personName} variant="h5">
width: '95%', {p.name}
padding: '20px', </Typography>
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '60px',
height: '60px',
marginRight: '15px',
}}
/>
<Typography variant="h5">{p.name}</Typography>
</Container> </Container>
))} ))}
</Stack> </Stack>
@ -160,10 +114,7 @@ function PeopleTab({ layoutType, peopleTabData }) {
switch (state) { switch (state) {
case 'loading': case 'loading':
return ( return (
<Container <Container sx={externalContainer} disableGutters>
sx={{ marginTop: '50px', height: '100vh' }}
disableGutters
>
<Stack alignItems="center"> <Stack alignItems="center">
<Skeleton <Skeleton
variant="rectangular" variant="rectangular"
@ -214,55 +165,18 @@ function PeopleTab({ layoutType, peopleTabData }) {
); );
case 'idle': case 'idle':
return ( return (
<Container <Container sx={externalContainer} disableGutters>
sx={{ marginTop: '50px', height: '100vh' }} <Container sx={sectionContainer} disableGutters>
disableGutters <Typography sx={sectionTitle} variant="h5">
>
<Container sx={{ width: '90%' }} disableGutters>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h5"
>
Docentes Docentes
</Typography> </Typography>
<Stack alignItems="center"> <Stack alignItems="center">
{people {people
.filter(p => p.role === 'PROFESSOR') .filter(p => p.role === 'PROFESSOR')
.map(p => ( .map(p => (
<Container <Container key={p.id} sx={personContainer} disableGutters>
key={p.id} <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
sx={{ <Typography sx={personName} variant="body1">
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '40px',
height: '40px',
marginRight: '15px',
}}
/>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
}}
variant="body1"
>
{p.name} {p.name}
</Typography> </Typography>
</Container> </Container>
@ -270,54 +184,17 @@ function PeopleTab({ layoutType, peopleTabData }) {
</Stack> </Stack>
</Container> </Container>
<Container <Container sx={sectionContainer} disableGutters>
sx={{ width: '90%', marginTop: '30px' }} <Typography sx={sectionTitle} variant="h5">
disableGutters
>
<Typography
sx={{
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
}}
variant="h5"
>
Discentes Discentes
</Typography> </Typography>
<Stack alignItems="center"> <Stack alignItems="center">
{people {people
.filter(p => p.role === 'STUDENT') .filter(p => p.role === 'STUDENT')
.map(p => ( .map(p => (
<Container <Container key={p.id} sx={personContainer} disableGutters>
key={p.id} <Avatar alt={p.name} src={p.avatar} sx={personAvatar} />
sx={{ <Typography sx={personName} variant="body1">
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
}}
disableGutters
>
<Avatar
alt={p.name}
src={p.avatar}
sx={{
width: '40px',
height: '40px',
marginRight: '15px',
}}
/>
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
}}
variant="body1"
>
{p.name} {p.name}
</Typography> </Typography>
</Container> </Container>

102
src/screens/Classroom/PeopleTab/styles.js Normal file
View file

@ -0,0 +1,102 @@
// ========== Desktop ==========
const desktopExternalContainer = {
marginTop: '50px',
height: '100vh',
};
const desktopSectionContainer = {
width: '90%',
marginBottom: '30px',
};
const desktopSectionTitle = {
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
};
const desktopPersonContainer = {
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
};
const desktopPersonAvatar = {
width: '60px',
height: '60px',
marginRight: '15px',
};
const desktopPersonName = {};
const desktop = {
externalContainer: desktopExternalContainer,
sectionContainer: desktopSectionContainer,
sectionTitle: desktopSectionTitle,
personContainer: desktopPersonContainer,
personAvatar: desktopPersonAvatar,
personName: desktopPersonName,
};
// ========== Mobile ==========
const mobileExternalContainer = {
marginTop: '50px',
height: '100vh',
};
const mobileSectionContainer = {
width: '90%',
marginBottom: '30px',
};
const mobileSectionTitle = {
padding: '10px',
borderBottom: '2px solid #00420D',
color: '#00420D',
};
const mobilePersonContainer = {
width: '95%',
padding: '20px',
borderBottom: '2px solid #BCBCBC',
display: 'flex',
alignItems: 'center',
};
const mobilePersonAvatar = {
width: '40px',
height: '40px',
marginRight: '15px',
};
const mobilePersonName = {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
};
const mobile = {
externalContainer: mobileExternalContainer,
sectionContainer: mobileSectionContainer,
sectionTitle: mobileSectionTitle,
personContainer: mobilePersonContainer,
personAvatar: mobilePersonAvatar,
personName: mobilePersonName,
};
// ========== Unset ==========
const unset = {
externalContainer: null,
sectionContainer: null,
sectionTitle: null,
personContainer: null,
personAvatar: null,
personName: null,
};
const styles = { desktop, mobile, unset };
export default styles;