Create FAQ

src/components/AssignmentCard/styles.js

@@ -61,7 +61,7 @@ const desktop = {
 
 // ========== Mobile ==========
 const mobileCardContainer = classrooms => ({
-  width: 390,
+  width: '100%',
   borderTop: `5px solid ${classrooms[0].color}`,
 });
 

src/context/user.js

@@ -143,6 +143,40 @@ const allAssignments = [
   },
 ];
 
+const getFaq = () =>
+  sleep(2000).then(() => {
+    console.log('Fetching FAQ...');
+    return {
+      data: [
+        {
+          question: 'Como faço para acessar a biblicoteca virtual?',
+          answer:
+            'Mussum Ipsum, cacilds vidis litro abertis. Delegadis gente finis, bibendum egestas augue arcu ut est.Quem num gosta di mé, boa gentis num é.Quem num gosta di mim que vai caçá sua turmis!Leite de capivaris, leite de mula manquis sem cabeça.',
+        },
+        {
+          question: 'Onde consigo informações de estágio?',
+          answer:
+            'Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis!In elementis mé pra quem é amistosis quis leo.Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.Si num tem leite então bota uma pinga aí cumpadi! \n Mé faiz elementum girarzis, nisi eros vermeio.Não sou faixa preta cumpadi, sou preto inteiris, inteiris.Manduma pindureta quium dia nois paga.Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.',
+        },
+        {
+          question: 'Como faço para solicitar uma declaração de matrícula?',
+          answer:
+            'Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis!In elementis mé pra quem é amistosis quis leo.Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.Si num tem leite então bota uma pinga aí cumpadi! \n Mé faiz elementum girarzis, nisi eros vermeio.Não sou faixa preta cumpadi, sou preto inteiris, inteiris.Manduma pindureta quium dia nois paga.Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.',
+        },
+        {
+          question: 'Onde encontro a matriz curricular do meu curso?',
+          answer:
+            'Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis!In elementis mé pra quem é amistosis quis leo.Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.Si num tem leite então bota uma pinga aí cumpadi! \n Mé faiz elementum girarzis, nisi eros vermeio.Não sou faixa preta cumpadi, sou preto inteiris, inteiris.Manduma pindureta quium dia nois paga.Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.',
+        },
+        {
+          question: 'Como faço para solicitar meu histórico escolar?',
+          answer:
+            'Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis!In elementis mé pra quem é amistosis quis leo.Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.Si num tem leite então bota uma pinga aí cumpadi! \n Mé faiz elementum girarzis, nisi eros vermeio.Não sou faixa preta cumpadi, sou preto inteiris, inteiris.Manduma pindureta quium dia nois paga.Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.',
+        },
+      ],
+    };
+  });
+
 const getClassrooms = userId =>
   sleep(3000).then(() => {
     console.log('userId: ' + userId);
@@ -188,23 +222,37 @@ function UserProvider(props) {
 
   const fetchClassroomById = classId => getClassroomById(classId);
 
+  const fetchFAQ = () => getFaq();
+
   return (
     <UserContext.Provider
-      value={{ state, fetchClassrooms, fetchAssignments, fetchClassroomById }}
+      value={{
+        state,
+        fetchClassrooms,
+        fetchAssignments,
+        fetchClassroomById,
+        fetchFAQ,
+      }}
       {...props}
     />
   );
 }
 
 function useUser() {
-  const { state, fetchClassrooms, fetchAssignments, fetchClassroomById } =
+  const {
-    useContext(UserContext);
+    state,
+    fetchClassrooms,
+    fetchAssignments,
+    fetchClassroomById,
+    fetchFAQ,
+  } = useContext(UserContext);
 
   return {
     state,
     fetchClassrooms,
     fetchAssignments,
     fetchClassroomById,
+    fetchFAQ,
   };
 }
 

src/screens/Information/View.js

@@ -0,0 +1,107 @@
+import { ExpandMore } from '@mui/icons-material';
+import {
+  Accordion,
+  AccordionSummary,
+  Typography,
+  AccordionDetails,
+  Stack,
+  Skeleton,
+} from '@mui/material';
+import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
+
+function View({ faq, layoutType }) {
+  if (layoutType === 'desktop') {
+    return (
+      <Stack sx={{ paddingTop: '80px' }} alignItems="center" height="100vh">
+        {faq === null ? (
+          <Stack width="70%" alignItems="center" gap="10px">
+            <Skeleton
+              variant="rectangular"
+              width={500}
+              height={50}
+              sx={{ marginBottom: '20px' }}
+            />
+            {createArrayFrom1ToN(6).map(i => (
+              <Skeleton
+                key={i}
+                variant="rectangular"
+                width={window.innerWidth * 0.6}
+                height={50}
+              />
+            ))}
+          </Stack>
+        ) : faq.length !== 0 ? (
+          <Stack width="70%" alignItems="center" gap="10px">
+            <h1 style={{ textAlign: 'center' }}>Perguntas Frequentes</h1>
+            {faq.map((f, index) => (
+              <Accordion key={index}>
+                <AccordionSummary
+                  sx={{ backgroundColor: '#f7f7f7' }}
+                  expandIcon={<ExpandMore />}
+                  aria-controls="panel1a-content"
+                  id="panel1a-header"
+                >
+                  <Typography fontWeight={600}>{f.question}</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Typography>{f.answer}</Typography>
+                </AccordionDetails>
+              </Accordion>
+            ))}
+          </Stack>
+        ) : (
+          <h1>Nenhuma pergunta encontrada</h1>
+        )}
+      </Stack>
+    );
+  } else if (layoutType === 'mobile') {
+    return (
+      <Stack
+        sx={{ paddingTop: '30px', paddingBottom: '100px' }}
+        alignItems="center"
+      >
+        {faq === null ? (
+          <Stack width="70%" alignItems="center" gap="10px">
+            <Skeleton
+              variant="rectangular"
+              width={200}
+              height={50}
+              sx={{ marginBottom: '20px' }}
+            />
+            {createArrayFrom1ToN(6).map(i => (
+              <Skeleton
+                key={i}
+                variant="rectangular"
+                width={window.innerWidth * 0.9}
+                height={80}
+              />
+            ))}
+          </Stack>
+        ) : faq.length !== 0 ? (
+          <Stack width="90%" alignItems="center" gap="10px">
+            <h1 style={{ textAlign: 'center' }}>Perguntas Frequentes</h1>
+            {faq.map((f, index) => (
+              <Accordion key={index}>
+                <AccordionSummary
+                  sx={{ backgroundColor: '#f7f7f7' }}
+                  expandIcon={<ExpandMore />}
+                  aria-controls="panel1a-content"
+                  id="panel1a-header"
+                >
+                  <Typography fontWeight={600}>{f.question}</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <Typography>{f.answer}</Typography>
+                </AccordionDetails>
+              </Accordion>
+            ))}
+          </Stack>
+        ) : (
+          <h1>Nenhuma pergunta encontrada</h1>
+        )}
+      </Stack>
+    );
+  }
+}
+
+export default View;

src/screens/Information/index.js

@@ -1,8 +1,24 @@
+import { useEffect, useState } from 'react';
+import { useUser } from '../../context/user';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
+import useLayoutType from '../../hooks/useLayoutType';
+import View from './View';
 
 function Information() {
   useDocumentTitle('Informações');
-  return <h1>Informações</h1>;
+  const layoutType = useLayoutType();
+  const { fetchFAQ } = useUser();
+  const [faq, setFaq] = useState(null);
+
+  useEffect(() => {
+    async function getClassrooms() {
+      const result = await fetchFAQ();
+      setFaq(result.data);
+    }
+    getClassrooms();
+  }, [fetchFAQ]);
+
+  return <View faq={faq} layoutType={layoutType} />;
 }
 
 export default Information;