Extract styles to external file AssignmentsTab

src/screens/Classroom/AssignmentsTab/index.js

@@ -1,18 +1,25 @@
 import { Container, Link, Skeleton, Stack, Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter';
-import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
+import styles from './styles';
 
 function AssignmentsTab({ assignmentsTabData, layoutType }) {
   const layoutResolver = (state, assignments, layoutType) => {
+    const {
+      externalContainer,
+      innerContainer,
+      sectionTitle,
+      assignmentContainer,
+      assignmentTypography,
+      assignmentLink,
+      assignmentDueDate,
+      assignmentScores,
+    } = styles[layoutType];
     if (layoutType === 'desktop') {
       switch (state) {
         case 'loading':
           return (
-            <Container
+            <Container sx={externalContainer} disableGutters>
-              sx={{ marginTop: '50px', height: '100vh' }}
-              disableGutters
-            >
               <Stack alignItems="center">
                 <Skeleton
                   variant="rectangular"
@@ -83,19 +90,9 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
 
         case 'idle':
           return (
-            <Container
+            <Container sx={externalContainer} disableGutters>
-              sx={{ marginTop: '50px', height: '100vh' }}
+              <Container sx={innerContainer} disableGutters>
-              disableGutters
+                <Typography sx={sectionTitle} variant="h4">
-            >
-              <Container sx={{ width: '90%' }} disableGutters>
-                <Typography
-                  sx={{
-                    padding: '10px',
-                    borderBottom: '2px solid #00420D',
-                    color: '#00420D',
-                  }}
-                  variant="h4"
-                >
                   Provas
                 </Typography>
                 <Stack alignItems="center">
@@ -104,26 +101,19 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                     .map(a => (
                       <Container
                         key={a.id}
-                        sx={{
+                        sx={assignmentContainer}
-                          width: '95%',
-                          padding: '20px',
-                          borderBottom: '2px solid #BCBCBC',
-                        }}
                         disableGutters
                       >
-                        <Typography variant="h5">
+                        <Typography sx={assignmentTypography} variant="h5">
                           <Link
-                            sx={{
+                            sx={assignmentLink}
-                              color: 'black',
-                              textDecoration: 'underline #000000',
-                            }}
                             href={`/assignment/${a.id}`}
                           >
                             {a.title}
                           </Link>
                         </Typography>
                         <Typography
-                          sx={{ marginTop: '15px', fontSize: '15px' }}
+                          sx={assignmentDueDate}
                           variant="p"
                           component="div"
                         >
@@ -133,7 +123,7 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           )}
                         </Typography>
                         <Typography
-                          sx={{ fontSize: '15px' }}
+                          sx={assignmentScores}
                           variant="p"
                           component="div"
                         >
@@ -145,18 +135,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                 </Stack>
               </Container>
 
-              <Container
+              <Container sx={innerContainer} disableGutters>
-                sx={{ width: '90%', marginTop: '30px' }}
+                <Typography sx={sectionTitle} variant="h4">
-                disableGutters
-              >
-                <Typography
-                  sx={{
-                    padding: '10px',
-                    borderBottom: '2px solid #00420D',
-                    color: '#00420D',
-                  }}
-                  variant="h4"
-                >
                   Trabalhos
                 </Typography>
                 <Stack alignItems="center">
@@ -165,26 +145,19 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                     .map(a => (
                       <Container
                         key={a.id}
-                        sx={{
+                        sx={assignmentContainer}
-                          width: '95%',
-                          padding: '20px',
-                          borderBottom: '2px solid #BCBCBC',
-                        }}
                         disableGutters
                       >
                         <Typography variant="h5">
                           <Link
-                            sx={{
+                            sx={assignmentLink}
-                              color: 'black',
-                              textDecoration: 'underline #000000',
-                            }}
                             href={`/assignment/${a.id}`}
                           >
                             {a.title}
                           </Link>
                         </Typography>
                         <Typography
-                          sx={{ marginTop: '15px', fontSize: '15px' }}
+                          sx={assignmentDueDate}
                           variant="p"
                           component="div"
                         >
@@ -194,7 +167,7 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           )}
                         </Typography>
                         <Typography
-                          sx={{ fontSize: '15px' }}
+                          sx={assignmentScores}
                           variant="p"
                           component="div"
                         >
@@ -278,19 +251,9 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
 
         case 'idle':
           return (
-            <Container
+            <Container sx={externalContainer} disableGutters>
-              sx={{ marginTop: '50px', height: '100vh' }}
+              <Container sx={innerContainer} disableGutters>
-              disableGutters
+                <Typography sx={sectionTitle} variant="h4">
-            >
-              <Container sx={{ width: '100%' }} disableGutters>
-                <Typography
-                  sx={{
-                    padding: '10px',
-                    borderBottom: '2px solid #00420D',
-                    color: '#00420D',
-                  }}
-                  variant="h4"
-                >
                   Provas
                 </Typography>
                 <Stack alignItems="center">
@@ -299,35 +262,19 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                     .map(a => (
                       <Container
                         key={a.id}
-                        sx={{
+                        sx={assignmentContainer}
-                          width: '100%',
-                          padding: '20px',
-                          borderBottom: '2px solid #BCBCBC',
-                        }}
                         disableGutters
                       >
-                        <Typography
+                        <Typography variant="body1" sx={assignmentTypography}>
-                          variant="body1"
-                          sx={{
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            display: '-webkit-box',
-                            WebkitLineClamp: 2,
-                            WebkitBoxOrient: 'vertical',
-                          }}
-                        >
                           <Link
-                            sx={{
+                            sx={assignmentLink}
-                              color: 'black',
-                              textDecoration: 'underline #000000',
-                            }}
                             href={`/assignment/${a.id}`}
                           >
                             {a.title}
                           </Link>
                         </Typography>
                         <Typography
-                          sx={{ marginTop: '10px', fontSize: '12px' }}
+                          sx={assignmentDueDate}
                           variant="p"
                           component="div"
                         >
@@ -337,7 +284,7 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           )}
                         </Typography>
                         <Typography
-                          sx={{ fontSize: '12px' }}
+                          sx={assignmentScores}
                           variant="p"
                           component="div"
                         >
@@ -349,18 +296,8 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                 </Stack>
               </Container>
 
-              <Container
+              <Container sx={innerContainer} disableGutters>
-                sx={{ width: '100%', marginTop: '30px' }}
+                <Typography sx={sectionTitle} variant="h4">
-                disableGutters
-              >
-                <Typography
-                  sx={{
-                    padding: '10px',
-                    borderBottom: '2px solid #00420D',
-                    color: '#00420D',
-                  }}
-                  variant="h4"
-                >
                   Trabalhos
                 </Typography>
                 <Stack alignItems="center">
@@ -369,35 +306,19 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                     .map(a => (
                       <Container
                         key={a.id}
-                        sx={{
+                        sx={assignmentContainer}
-                          width: '95%',
-                          padding: '20px',
-                          borderBottom: '2px solid #BCBCBC',
-                        }}
                         disableGutters
                       >
-                        <Typography
+                        <Typography variant="body1" sx={assignmentTypography}>
-                          variant="body1"
-                          sx={{
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            display: '-webkit-box',
-                            WebkitLineClamp: 2,
-                            WebkitBoxOrient: 'vertical',
-                          }}
-                        >
                           <Link
-                            sx={{
+                            sx={assignmentLink}
-                              color: 'black',
-                              textDecoration: 'underline #000000',
-                            }}
                             href={`/assignment/${a.id}`}
                           >
                             {a.title}
                           </Link>
                         </Typography>
                         <Typography
-                          sx={{ marginTop: '10px', fontSize: '12px' }}
+                          sx={assignmentDueDate}
                           variant="p"
                           component="div"
                         >
@@ -407,7 +328,7 @@ function AssignmentsTab({ assignmentsTabData, layoutType }) {
                           )}
                         </Typography>
                         <Typography
-                          sx={{ fontSize: '12px' }}
+                          sx={assignmentScores}
                           variant="p"
                           component="div"
                         >

src/screens/Classroom/AssignmentsTab/styles.js

@@ -0,0 +1,120 @@
+// ========== Desktop ==========
+const desktopExternalContainer = {
+  marginTop: '50px',
+  height: '100vh',
+};
+
+const desktopInnerContainer = {
+  width: '90%',
+  marginBottom: '30px',
+};
+
+const desktopSectionTitle = {
+  padding: '10px',
+  borderBottom: '2px solid #00420D',
+  color: '#00420D',
+};
+
+const desktopAssignmentContainer = {
+  width: '95%',
+  padding: '20px',
+  borderBottom: '2px solid #BCBCBC',
+};
+
+const desktopAssignmentTypography = {};
+
+const desktopAssignmentLink = {
+  color: 'black',
+  textDecoration: 'underline #000000',
+};
+
+const desktopAssignmentDueDate = {
+  marginTop: '15px',
+  fontSize: '15px',
+};
+
+const desktopAssignmentScores = {
+  fontSize: '15px',
+};
+
+const desktop = {
+  externalContainer: desktopExternalContainer,
+  innerContainer: desktopInnerContainer,
+  sectionTitle: desktopSectionTitle,
+  assignmentContainer: desktopAssignmentContainer,
+  assignmentTypography: desktopAssignmentTypography,
+  assignmentLink: desktopAssignmentLink,
+  assignmentDueDate: desktopAssignmentDueDate,
+  assignmentScores: desktopAssignmentScores,
+};
+
+// ========== Mobile ==========
+const mobileExternalContainer = {
+  marginTop: '50px',
+  height: '100vh',
+};
+
+const mobileInnerContainer = {
+  width: '100%',
+  marginBottom: '30px',
+};
+
+const mobileSectionTitle = {
+  padding: '10px',
+  borderBottom: '2px solid #00420D',
+  color: '#00420D',
+};
+
+const mobileAssignmentContainer = {
+  width: '100%',
+  padding: '20px',
+  borderBottom: '2px solid #BCBCBC',
+};
+
+const mobileAssignmentTypography = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+const mobileAssignmentLink = {
+  color: 'black',
+  textDecoration: 'underline #000000',
+};
+
+const mobileAssignmentDueDate = {
+  marginTop: '10px',
+  fontSize: '12px',
+};
+
+const mobileAssignmentScores = {
+  fontSize: '12px',
+};
+
+const mobile = {
+  externalContainer: mobileExternalContainer,
+  innerContainer: mobileInnerContainer,
+  sectionTitle: mobileSectionTitle,
+  assignmentContainer: mobileAssignmentContainer,
+  assignmentTypography: mobileAssignmentTypography,
+  assignmentLink: mobileAssignmentLink,
+  assignmentDueDate: mobileAssignmentDueDate,
+  assignmentScores: mobileAssignmentScores,
+};
+
+// ========== Unset ==========
+const unset = {
+  externalContainer: null,
+  innerContainer: null,
+  sectionTitle: null,
+  assignmentContainer: null,
+  assignmentTypography: null,
+  assignmentLink: null,
+  assignmentDueDate: null,
+  assignmentScores: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;