Added the FAQs api to all FAQs page

src/component/HomeMain/Faq/Main.js

@@ -1,8 +1,21 @@
-import React ,{ useState } from 'react'
+import React ,{ useState, useEffect } from 'react'
+import SiteService from '../../../vendors/service/siteService'
 
 const Main = ({gredient}) => {
 
-    const[activeFaq, setActiveFaq] = useState({a : true})
+    const[activeFaq, setActiveFaq] = useState({btn0 : false})
+
+    const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
+
+    let faqServices = new SiteService(); // instantiating the class
+
+    const allFaqData = () => {
+        return faqServices.faqData();
+    };
+
+    useEffect(() => {
+        allFaqData().then((data) => setFaqs(data.data));
+    }, []);
 
   return (
     <>
@@ -16,7 +29,7 @@ const Main = ({gredient}) => {
                 </div>
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
-                        <div className="card" data-aos="fade-up" data-aos-duration="1500">
+                        {/* <div className="card" data-aos="fade-up" data-aos-duration="1500">
                             <div className="card-header" id="headingOne">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
@@ -81,7 +94,33 @@ const Main = ({gredient}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
+
+                        {/* displays loading ... while the page fetches the FAQs */}
+                        {faqs.length < 1 && <h3>Loading...</h3>}
+
+                        {faqs.length > 0 && faqs.map((faq, index) => {
+                            let id = `heading${index}`; //headingSeven
+                            let target = `collapse${index}`; //#collapseSeven
+
+                            return(
+                            <div key={index} className="card" data-aos="fade-up">
+                                <div className="card-header" id={id}>
+                                    <h2 className="mb-0">
+                                    <button type="button" className={`btn btn-link collapsed ${activeFaq[`btn${index}`] && "active"}`} onClick= {() => setActiveFaq(activeFaq[`btn${index}`] ? {[`btn${index}`] : false} : {[`btn${index}`] : true})} data-toggle="collapse"
+                                        data-target={`#${target}`}>{activeFaq[`btn${index}`] ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}{faq.title}
+                                    </button>
+                                    </h2>
+                                </div>
+
+                                <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
+                                    <div className="card-body">
+                                        <p>{faq.text}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            )
+                        })}
                     </div>
                 </div>
             </div>

src/component/Pages/Faq/Main.js

@@ -9,7 +9,7 @@ import SiteService from '../../../vendors/service/siteService'
 
 const Main = ({brdcum}) => {
 
-    const[activeFaq, setActiveFaq] = useState({a : true})
+    const[activeFaq, setActiveFaq] = useState({btn0 : false})
 
     const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call