Rework FAQ click logic (#1091)

Author: bruceplai

src/components/FAQCard/accordionSection.js

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-import axios from "axios";
+import React from 'react';
 import sanitizeHtml from 'sanitize-html';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
@@ -55,50 +54,27 @@ const SanitizedAnswer = ({ answer }) => {
 };
 
 const AccordionSection = (props) => {
-  const [currentFaq, setCurrentFaq] = useState([]);
-  const [sendRequest, setSendRequest] = useState(false);
   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}>
       {props.faqs.map((faq) => (
         <Box key={faq.id}>
           <Accordion
             className={classes.accordion}
             expanded={props.expandedFaqs.indexOf(faq.id.toString()) > -1}
-            onClick={() => props.onFaqClick(faq.id)}
+            onClick={() => props.onFaqClick(faq)}
           >
             <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>
+              <Typography onClick={(e) => e.stopPropagation()}>
                 <SanitizedAnswer answer={faq.answer} />
               </Typography>
             </AccordionDetails>

src/pages/Faq/index.js

@@ -71,16 +71,25 @@ const Faq = () => {
   );
 
   useEffect(() => {
-    getFaqData(query, largeScreen);
+    getFaqData(query, false);
   }, [pageNum, largeScreen]);
 
-  const handleFaqClick = (id) => {
+  const handleFaqClick = (faq) => {
     const expanded = [...expandedFaqs];
-    const idx = expanded.indexOf(id.toString());
+    const idx = expanded.indexOf(faq.id.toString());
     if (idx > -1) {
       expanded.splice(idx, 1);
     } else {
-      expanded.push(id.toString());
+      const requestBody = {
+        question: faq.question,
+        answer: faq.answer,
+        view_count: faq.view_count,
+      };
+      axios.post(
+        `${process.env.REACT_APP_API_URL}/api/faqs/${faq.id}/increment_count/`,
+        requestBody
+      );
+      expanded.push(faq.id.toString());
     }
     setExpandedFaqs(expanded);
   };