Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 61x 61x 20x 20x 20x 20x 20x 4x 1x 1x 4x 1x 1x 20x 20x 1x | import React, { useState, useEffect } from 'react';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Box from '@material-ui/core/Box';
import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
import { makeStyles } from '@material-ui/core/styles';
import axios from "axios";
const useStyles = makeStyles((theme) => ({
accordion: {
border: '1px solid',
borderColor: theme.palette.outline.gray,
'&.MuiAccordion-rounded:last-child': {
marginBottom: theme.spacing(2),
},
'&.Mui-expanded:last-child': {
marginBottom: theme.spacing(2),
},
},
detail: {
paddingTop: theme.spacing(2),
},
summary: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
'&.Mui-expanded': {
backgroundColor: theme.palette.secondary.dark,
'& h6': {
color: theme.palette.text.secondary,
},
'& svg': {
color: theme.palette.secondary.main,
},
},
},
}));
const AccordionSection = (props) => {
const [currentFaq, setCurrentFaq] = useState([]);
const [sendRequest, setSendRequest] = useState(false);
const faqs = props.faqs;
const classes = useStyles();
useEffect(() => {
const incrementViewCount = async function () {
const requestBody = {
question: currentFaq.question,
answer: currentFaq.answer,
view_count: currentFaq.view_count,
};
await axios.post(`${process.env.REACT_APP_API_URL}/api/faqs/${currentFaq.id}/increment_count/`, requestBody);
};
if (sendRequest) {
// send the request
incrementViewCount()
setSendRequest(false);
}
}, [sendRequest, currentFaq]);
return (
<Grid item xs={12} sm={9} lg={11}>
{faqs.map((faq) => (
<Box key={faq.id}>
<Accordion className={classes.accordion}>
<AccordionSummary
className={classes.summary}
data-cy='faq-question'
disabled={sendRequest}
expandIcon={<ExpandMoreRoundedIcon />}
onClick={() => { setSendRequest(true); setCurrentFaq(faq) }}
>
<Typography variant='h6'>{faq.question}</Typography>
</AccordionSummary>
<Divider />
<AccordionDetails data-cy='faq-answer' className={classes.detail}>
<Typography>{faq.answer}</Typography>
</AccordionDetails>
</Accordion>
</Box>
))}
</Grid>
)
}
export default AccordionSection;
|