From 9f05b4f3c1a97f788cd1d01785cbae6ec4295823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Sun, 28 Aug 2022 15:16:07 -0300
Subject: [PATCH] Add mobile layout to people tab

---
 src/screens/Classroom/PeopleTab/index.js | 168 ++++++++++++++++++++++-
 1 file changed, 166 insertions(+), 2 deletions(-)

diff --git a/src/screens/Classroom/PeopleTab/index.js b/src/screens/Classroom/PeopleTab/index.js
index 675ccac..7d9884a 100644
--- a/src/screens/Classroom/PeopleTab/index.js
+++ b/src/screens/Classroom/PeopleTab/index.js
@@ -159,9 +159,173 @@ function PeopleTab({ layoutType, peopleTabData }) {
     } else if (layoutType === 'mobile') {
       switch (state) {
         case 'loading':
-          return <h1>Loading...</h1>;
+          return (
+            <Container
+              sx={{ marginTop: '50px', height: '100vh' }}
+              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':
-          return <h1>People Tab</h1>;
+          return (
+            <Container
+              sx={{ marginTop: '50px', height: '100vh' }}
+              disableGutters
+            >
+              <Container sx={{ width: '90%' }} disableGutters>
+                <Typography
+                  sx={{
+                    padding: '10px',
+                    borderBottom: '2px solid #00420D',
+                    color: '#00420D',
+                  }}
+                  variant="h5"
+                >
+                  Docentes
+                </Typography>
+                <Stack alignItems="center">
+                  {people
+                    .filter(p => p.role === 'PROFESSOR')
+                    .map(p => (
+                      <Container
+                        key={p.id}
+                        sx={{
+                          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}
+                        </Typography>
+                      </Container>
+                    ))}
+                </Stack>
+              </Container>
+
+              <Container
+                sx={{ width: '90%', marginTop: '30px' }}
+                disableGutters
+              >
+                <Typography
+                  sx={{
+                    padding: '10px',
+                    borderBottom: '2px solid #00420D',
+                    color: '#00420D',
+                  }}
+                  variant="h5"
+                >
+                  Discentes
+                </Typography>
+                <Stack alignItems="center">
+                  {people
+                    .filter(p => p.role === 'STUDENT')
+                    .map(p => (
+                      <Container
+                        key={p.id}
+                        sx={{
+                          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}
+                        </Typography>
+                      </Container>
+                    ))}
+                </Stack>
+              </Container>
+            </Container>
+          );
         case 'gone':
           return null;
         default: