From 84e38f6a0829663443ea31ee7099e73dcf2cabd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Sun, 28 Aug 2022 15:44:47 -0300
Subject: [PATCH] Extract styles to file in PeopleTab

---
 src/screens/Classroom/PeopleTab/index.js  | 197 ++++------------------
 src/screens/Classroom/PeopleTab/styles.js | 102 +++++++++++
 2 files changed, 139 insertions(+), 160 deletions(-)
 create mode 100644 src/screens/Classroom/PeopleTab/styles.js

diff --git a/src/screens/Classroom/PeopleTab/index.js b/src/screens/Classroom/PeopleTab/index.js
index 7d9884a..7db1559 100644
--- a/src/screens/Classroom/PeopleTab/index.js
+++ b/src/screens/Classroom/PeopleTab/index.js
@@ -1,16 +1,22 @@
 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,
+    } = styles[layoutType];
     if (layoutType === 'desktop') {
       switch (state) {
         case 'loading':
           return (
-            <Container
-              sx={{ marginTop: '50px', height: '100vh' }}
-              disableGutters
-            >
+            <Container sx={externalContainer} disableGutters>
               <Stack alignItems="center">
                 <Skeleton
                   variant="rectangular"
@@ -61,90 +67,38 @@ function PeopleTab({ layoutType, peopleTabData }) {
           );
         case 'idle':
           return (
-            <Container
-              sx={{ marginTop: '50px', height: '100vh' }}
-              disableGutters
-            >
-              <Container sx={{ width: '90%' }} disableGutters>
-                <Typography
-                  sx={{
-                    padding: '10px',
-                    borderBottom: '2px solid #00420D',
-                    color: '#00420D',
-                  }}
-                  variant="h4"
-                >
+            <Container sx={externalContainer} disableGutters>
+              <Container sx={sectionContainer} disableGutters>
+                <Typography sx={sectionTitle} variant="h4">
                   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: '60px',
-                            height: '60px',
-                            marginRight: '15px',
-                          }}
-                        />
-                        <Typography variant="h5">{p.name}</Typography>
+                      <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>
                     ))}
                 </Stack>
               </Container>
 
-              <Container
-                sx={{ width: '90%', marginTop: '30px' }}
-                disableGutters
-              >
-                <Typography
-                  sx={{
-                    padding: '10px',
-                    borderBottom: '2px solid #00420D',
-                    color: '#00420D',
-                  }}
-                  variant="h4"
-                >
+              <Container sx={sectionContainer} disableGutters>
+                <Typography sx={sectionTitle} variant="h4">
                   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: '60px',
-                            height: '60px',
-                            marginRight: '15px',
-                          }}
-                        />
-                        <Typography variant="h5">{p.name}</Typography>
+                      <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>
                     ))}
                 </Stack>
@@ -160,10 +114,7 @@ function PeopleTab({ layoutType, peopleTabData }) {
       switch (state) {
         case 'loading':
           return (
-            <Container
-              sx={{ marginTop: '50px', height: '100vh' }}
-              disableGutters
-            >
+            <Container sx={externalContainer} disableGutters>
               <Stack alignItems="center">
                 <Skeleton
                   variant="rectangular"
@@ -214,55 +165,18 @@ function PeopleTab({ layoutType, peopleTabData }) {
           );
         case 'idle':
           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"
-                >
+            <Container sx={externalContainer} disableGutters>
+              <Container sx={sectionContainer} disableGutters>
+                <Typography sx={sectionTitle} 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"
-                        >
+                      <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>
@@ -270,54 +184,17 @@ function PeopleTab({ layoutType, peopleTabData }) {
                 </Stack>
               </Container>
 
-              <Container
-                sx={{ width: '90%', marginTop: '30px' }}
-                disableGutters
-              >
-                <Typography
-                  sx={{
-                    padding: '10px',
-                    borderBottom: '2px solid #00420D',
-                    color: '#00420D',
-                  }}
-                  variant="h5"
-                >
+              <Container sx={sectionContainer} disableGutters>
+                <Typography sx={sectionTitle} 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"
-                        >
+                      <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>
diff --git a/src/screens/Classroom/PeopleTab/styles.js b/src/screens/Classroom/PeopleTab/styles.js
new file mode 100644
index 0000000..2541b85
--- /dev/null
+++ b/src/screens/Classroom/PeopleTab/styles.js
@@ -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;