diff options
Diffstat (limited to 'src/screens/student/Classroom/PeopleTab/index.js')
| -rw-r--r-- | src/screens/student/Classroom/PeopleTab/index.js | 244 |
1 files changed, 244 insertions, 0 deletions
diff --git a/src/screens/student/Classroom/PeopleTab/index.js b/src/screens/student/Classroom/PeopleTab/index.js new file mode 100644 index 0000000..9dfde7b --- /dev/null +++ b/src/screens/student/Classroom/PeopleTab/index.js @@ -0,0 +1,244 @@ +import { Avatar, Container, Skeleton, Stack, Typography } from '@mui/material'; +import { createArrayFrom1ToN } from '../../../../utils/createArrayFrom1ToN'; +import styles from './styles'; + +function PeopleTab({ layoutType, peopleTabData }) { + const layoutResolver = (state, people, layoutType) => { + const { + externalContainer, + sectionContainer, + sectionTitle, + personContainer, + personAvatar, + personName, + emptyStateContainer, + } = styles[layoutType]; + if (layoutType === 'desktop') { + switch (state) { + case 'loading': + return ( + <Container sx={externalContainer} disableGutters> + <Stack alignItems="center"> + <Skeleton + variant="rectangular" + width="90%" + height={70} + sx={{ marginBottom: '30px' }} + /> + <Stack + flexDirection="row" + alignItems="center" + sx={{ width: '90%', marginLeft: '20px' }} + > + <Skeleton variant="circular" width={60} height={60} /> + <Skeleton + variant="rectangular" + width="70%" + height={40} + sx={{ marginLeft: '15px' }} + /> + </Stack> + </Stack> + + <Stack alignItems="center"> + <Skeleton + variant="rectangular" + width="90%" + height={70} + sx={{ marginBottom: '30px', marginTop: '50px' }} + /> + {createArrayFrom1ToN(5).map(i => ( + <Stack + key={i} + flexDirection="row" + alignItems="center" + sx={{ width: '90%', marginLeft: '20px', marginTop: '25px' }} + > + <Skeleton variant="circular" width={60} height={60} /> + <Skeleton + variant="rectangular" + width="70%" + height={40} + sx={{ marginLeft: '15px' }} + /> + </Stack> + ))} + </Stack> + </Container> + ); + case 'idle': + const professors = people.filter(p => p.role === 'PROFESSOR'); + const students = people.filter(p => p.role === 'STUDENT'); + + return ( + <Container sx={externalContainer} disableGutters> + <Container sx={sectionContainer} disableGutters> + <Typography sx={sectionTitle} variant="h4"> + Docentes + </Typography> + <Stack alignItems="center"> + {professors.length !== 0 ? ( + professors.map(p => ( + <Container key={p.id} sx={personContainer} disableGutters> + <Avatar alt={p.name} src={p.avatar} sx={personAvatar} /> + <Typography sx={personName} variant="h5"> + {p.name} + </Typography> + </Container> + )) + ) : ( + <Container sx={emptyStateContainer} disableGutters> + <p>Nenhum professor encontrado!</p> + </Container> + )} + </Stack> + </Container> + + <Container sx={sectionContainer} disableGutters> + <Typography sx={sectionTitle} variant="h4"> + Discentes + </Typography> + <Stack alignItems="center"> + {students.length !== 0 ? ( + students.map(p => ( + <Container key={p.id} sx={personContainer} disableGutters> + <Avatar alt={p.name} src={p.avatar} sx={personAvatar} /> + <Typography sx={personName} variant="h5"> + {p.name} + </Typography> + </Container> + )) + ) : ( + <Container sx={emptyStateContainer} disableGutters> + <p>Nenhum estudante encontrado!</p> + </Container> + )} + </Stack> + </Container> + </Container> + ); + case 'gone': + return null; + default: + return null; + } + } else if (layoutType === 'mobile') { + switch (state) { + case 'loading': + return ( + <Container sx={externalContainer} disableGutters> + <Stack alignItems="center"> + <Skeleton + variant="rectangular" + width="90%" + height={50} + sx={{ marginBottom: '30px' }} + /> + <Stack + flexDirection="row" + alignItems="center" + sx={{ width: '90%', marginLeft: '20px' }} + > + <Skeleton variant="circular" width={40} height={40} /> + <Skeleton + variant="rectangular" + width="80%" + height={30} + sx={{ marginLeft: '15px' }} + /> + </Stack> + </Stack> + + <Stack alignItems="center"> + <Skeleton + variant="rectangular" + width="90%" + height={50} + sx={{ marginBottom: '30px', marginTop: '50px' }} + /> + {createArrayFrom1ToN(5).map(i => ( + <Stack + key={i} + flexDirection="row" + alignItems="center" + sx={{ width: '90%', marginLeft: '20px', marginTop: '25px' }} + > + <Skeleton variant="circular" width={40} height={40} /> + <Skeleton + variant="rectangular" + width="80%" + height={30} + sx={{ marginLeft: '15px' }} + /> + </Stack> + ))} + </Stack> + </Container> + ); + case 'idle': + const professors = people.filter(p => p.role === 'PROFESSOR'); + const students = people.filter(p => p.role === 'STUDENT'); + + return ( + <Container sx={externalContainer} disableGutters> + <Container sx={sectionContainer} disableGutters> + <Typography sx={sectionTitle} variant="h5"> + Docentes + </Typography> + <Stack alignItems="center"> + {professors.length !== 0 ? ( + professors.map(p => ( + <Container key={p.id} sx={personContainer} disableGutters> + <Avatar alt={p.name} src={p.avatar} sx={personAvatar} /> + <Typography sx={personName} variant="body1"> + {p.name} + </Typography> + </Container> + )) + ) : ( + <Container sx={emptyStateContainer} disableGutters> + <p>Nenhum professor encontrado!</p> + </Container> + )} + </Stack> + </Container> + + <Container sx={sectionContainer} disableGutters> + <Typography sx={sectionTitle} variant="h5"> + Discentes + </Typography> + <Stack alignItems="center"> + {students.length !== 0 ? ( + students.map(p => ( + <Container key={p.id} sx={personContainer} disableGutters> + <Avatar alt={p.name} src={p.avatar} sx={personAvatar} /> + <Typography sx={personName} variant="body1"> + {p.name} + </Typography> + </Container> + )) + ) : ( + <Container sx={emptyStateContainer} disableGutters> + <p>Nenhum estudante encontrado!</p> + </Container> + )} + </Stack> + </Container> + </Container> + ); + case 'gone': + return null; + default: + return null; + } + } + }; + + return layoutResolver( + peopleTabData && peopleTabData.state, + peopleTabData && peopleTabData.people, + layoutType + ); +} + +export default PeopleTab; |