Refactor Information screen

src/screens/Information/View.js

@@ -9,34 +9,41 @@ import {
 } from '@mui/material';
 import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
 
+import styles from './styles';
+
 function View({ faq, layoutType }) {
+  const {
+    stackContainer,
+    skeletonTitle,
+    skeletonQuestion,
+    skeletonStack,
+    accordionSkeletonStack,
+    title,
+    accordionSummary,
+  } = styles[layoutType];
+
   if (layoutType === 'desktop') {
     return (
-      <Stack sx={{ paddingTop: '80px' }} alignItems="center" height="100vh">
+      <Stack sx={stackContainer} alignItems="center" height="100vh">
         {faq === null ? (
-          <Stack width="70%" alignItems="center" gap="10px">
+          <Stack {...skeletonStack}>
-            <Skeleton
+            <Skeleton {...skeletonTitle} />
-              variant="rectangular"
-              width={500}
-              height={50}
-              sx={{ marginBottom: '20px' }}
-            />
             {createArrayFrom1ToN(6).map(i => (
               <Skeleton
                 key={i}
                 variant="rectangular"
-                width={window.innerWidth * 0.6}
+                width={skeletonQuestion.width(window.innerWidth)}
-                height={50}
+                height={skeletonQuestion.height}
               />
             ))}
           </Stack>
         ) : faq.length !== 0 ? (
-          <Stack width="70%" alignItems="center" gap="10px">
+          <Stack {...accordionSkeletonStack}>
-            <h1 style={{ textAlign: 'center' }}>Perguntas Frequentes</h1>
+            <h1 style={title}>Perguntas Frequentes</h1>
             {faq.map((f, index) => (
               <Accordion key={index}>
                 <AccordionSummary
-                  sx={{ backgroundColor: '#f7f7f7' }}
+                  sx={accordionSummary}
                   expandIcon={<ExpandMore />}
                   aria-controls="panel1a-content"
                   id="panel1a-header"
@@ -56,34 +63,26 @@ function View({ faq, layoutType }) {
     );
   } else if (layoutType === 'mobile') {
     return (
-      <Stack
+      <Stack sx={stackContainer} alignItems="center">
-        sx={{ paddingTop: '30px', paddingBottom: '100px' }}
-        alignItems="center"
-      >
         {faq === null ? (
-          <Stack width="70%" alignItems="center" gap="10px">
+          <Stack {...skeletonStack}>
-            <Skeleton
+            <Skeleton {...skeletonTitle} />
-              variant="rectangular"
-              width={200}
-              height={50}
-              sx={{ marginBottom: '20px' }}
-            />
             {createArrayFrom1ToN(6).map(i => (
               <Skeleton
                 key={i}
                 variant="rectangular"
-                width={window.innerWidth * 0.9}
+                width={skeletonQuestion.width(window.innerWidth)}
-                height={80}
+                height={skeletonQuestion.height}
               />
             ))}
           </Stack>
         ) : faq.length !== 0 ? (
-          <Stack width="90%" alignItems="center" gap="10px">
+          <Stack {...accordionSkeletonStack}>
-            <h1 style={{ textAlign: 'center' }}>Perguntas Frequentes</h1>
+            <h1 style={title}>Perguntas Frequentes</h1>
             {faq.map((f, index) => (
               <Accordion key={index}>
                 <AccordionSummary
-                  sx={{ backgroundColor: '#f7f7f7' }}
+                  sx={accordionSummary}
                   expandIcon={<ExpandMore />}
                   aria-controls="panel1a-content"
                   id="panel1a-header"

src/screens/Information/styles.js

@@ -0,0 +1,112 @@
+// ========== Desktop ==========
+const desktopStackContainer = {
+  paddingTop: '80px',
+};
+
+const desktopSkeletonTitle = {
+  variant: 'rectangular',
+  width: 500,
+  height: 50,
+  sx: {
+    marginBottom: '20px',
+  },
+};
+
+const desktopSkeletonQuestion = {
+  width: innerWidth => innerWidth * 0.6,
+  height: 50,
+};
+
+const desktopSkeletonStack = {
+  width: '70%',
+  alignItems: 'center',
+  gap: '10px',
+};
+
+const desktopAccordionSkeletonStack = {
+  width: '70%',
+  alignItems: 'center',
+  gap: '10px',
+};
+
+const desktopTitle = {
+  textAlign: 'center',
+};
+
+const desktopAccordionSummary = {
+  backgroundColor: '#f7f7f7',
+};
+
+const desktop = {
+  stackContainer: desktopStackContainer,
+  skeletonTitle: desktopSkeletonTitle,
+  skeletonQuestion: desktopSkeletonQuestion,
+  skeletonStack: desktopSkeletonStack,
+  accordionSkeletonStack: desktopAccordionSkeletonStack,
+  title: desktopTitle,
+  accordionSummary: desktopAccordionSummary,
+};
+
+// ========== Mobile ==========
+const mobileStackContainer = {
+  paddingTop: '30px',
+  paddingBottom: '100px',
+};
+
+const mobileSkeletonTitle = {
+  variant: 'rectangular',
+  width: 200,
+  height: 50,
+  sx: {
+    marginBottom: '20px',
+  },
+};
+
+const mobileSkeletonQuestion = {
+  width: innerWidth => innerWidth * 0.9,
+  height: 80,
+};
+
+const mobileSkeletonStack = {
+  width: '70%',
+  alignItems: 'center',
+  gap: '10px',
+};
+
+const mobileAccordionSkeletonStack = {
+  width: '90%',
+  alignItems: 'center',
+  gap: '10px',
+};
+
+const mobileTitle = {
+  textAlign: 'center',
+};
+
+const mobileAccordionSummary = {
+  backgroundColor: '#f7f7f7',
+};
+
+const mobile = {
+  stackContainer: mobileStackContainer,
+  skeletonTitle: mobileSkeletonTitle,
+  skeletonQuestion: mobileSkeletonQuestion,
+  skeletonStack: mobileSkeletonStack,
+  accordionSkeletonStack: mobileAccordionSkeletonStack,
+  title: mobileTitle,
+  accordionSummary: mobileAccordionSummary,
+};
+
+// ========== Unset ==========
+const unset = {
+  stackContainer: null,
+  skeletonTitle: null,
+  skeletonQuestion: null,
+  skeletonStack: null,
+  accordionSkeletonStack: null,
+  title: null,
+  accordionSummary: null,
+};
+
+const styles = { desktop, mobile, unset };
+export default styles;