From 68be170ffe57f7675a8c4f2c6f00565fcfdba24f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Tue, 5 Jul 2022 15:58:52 -0300 Subject: [PATCH] Create FAQ --- src/components/AssignmentCard/styles.js | 2 +- src/context/user.js | 54 +++++++++++- src/screens/Information/View.js | 107 ++++++++++++++++++++++++ src/screens/Information/index.js | 18 +++- 4 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 src/screens/Information/View.js diff --git a/src/components/AssignmentCard/styles.js b/src/components/AssignmentCard/styles.js index eed3fdf..fd3c857 100644 --- a/src/components/AssignmentCard/styles.js +++ b/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}`, }); diff --git a/src/context/user.js b/src/context/user.js index cdf0fe6..0887c2d 100644 --- a/src/context/user.js +++ b/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 ( ); } function useUser() { - const { state, fetchClassrooms, fetchAssignments, fetchClassroomById } = - useContext(UserContext); + const { + state, + fetchClassrooms, + fetchAssignments, + fetchClassroomById, + fetchFAQ, + } = useContext(UserContext); return { state, fetchClassrooms, fetchAssignments, fetchClassroomById, + fetchFAQ, }; } diff --git a/src/screens/Information/View.js b/src/screens/Information/View.js new file mode 100644 index 0000000..a96867f --- /dev/null +++ b/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 ( + + {faq === null ? ( + + + {createArrayFrom1ToN(6).map(i => ( + + ))} + + ) : faq.length !== 0 ? ( + +

Perguntas Frequentes

+ {faq.map((f, index) => ( + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + {f.question} + + + {f.answer} + + + ))} + + ) : ( +

Nenhuma pergunta encontrada

+ )} + + ); + } else if (layoutType === 'mobile') { + return ( + + {faq === null ? ( + + + {createArrayFrom1ToN(6).map(i => ( + + ))} + + ) : faq.length !== 0 ? ( + +

Perguntas Frequentes

+ {faq.map((f, index) => ( + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + {f.question} + + + {f.answer} + + + ))} + + ) : ( +

Nenhuma pergunta encontrada

+ )} + + ); + } +} + +export default View; diff --git a/src/screens/Information/index.js b/src/screens/Information/index.js index 40094f3..3940c44 100644 --- a/src/screens/Information/index.js +++ b/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

Informações

; + 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 ; } export default Information;