populated FAQs with data from api

.env

@@ -9,3 +9,5 @@ REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
 
 REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+
+REACT_APP_AUX_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfit"

src/component/Contact/Main.js

@@ -1,11 +1,25 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
 
+import SiteService from "../../vendors/service/siteService";
+
 const Main = ({ brdcum }) => {
+  let [countries, setCountries] = useState([]) // initial state for country dropdown
+  let countryClass = new SiteService() // instantiating the class
+  
+  const allCountry = () => {
+    return countryClass.countryData();
+  }
+
+  //CALLS THE API AFTER COMPONENT LOADS
+  useEffect(()=>{
+    allCountry().then((data)=> setCountries(Object.values(data.data)))
+  },[])
+
   return (
     <>
       {brdcum.b1 && (
@@ -86,6 +100,7 @@ const Main = ({ brdcum }) => {
                 <div className="form-group">
                   <select className="form-control">
                     <option value="">Country</option>
+                    {countries.length > 0 && countries.map((country, index) => <option key={index} value={country}>{country}</option>)}
                   </select>
                 </div>
                 <div className="form-group">

src/component/Pages/Faq/Main.js

@@ -5,9 +5,23 @@ import BGImg from "../../../assets/images/bread_crumb_bg.png"
 import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
 import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
 
+import SiteService from '../../../vendors/service/siteService'
+
 const Main = ({brdcum}) => {
 
     const[activeFaq, setActiveFaq] = useState({a : true})
+
+    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 (
     <>
         {brdcum.b1 && 
@@ -54,7 +68,8 @@ const Main = ({brdcum}) => {
             <div className="container">
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
-                        <div className="card" data-aos="fade-up" >
+
+                        {/* <div className="card" data-aos="fade-up" >
                             <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">
@@ -69,8 +84,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
-                        <div className="card" data-aos="fade-up" >
+                        </div> */}
+
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingTwo">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
@@ -85,9 +101,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingThree">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
@@ -103,9 +119,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingFour">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
@@ -122,9 +138,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingFive">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.e && "active"}`} onClick= {() => setActiveFaq(activeFaq.e ? {e : false} : {e : true})} data-toggle="collapse"
@@ -141,9 +157,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingSix">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.f && "active"}`} onClick= {() => setActiveFaq(activeFaq.f ? {f : false} : {f : true})} data-toggle="collapse"
@@ -160,9 +176,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div>
+                        </div> */}
 
-                        <div className="card" data-aos="fade-up" >
+                        {/* <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingSeven">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.g && "active"}`} onClick= {() => setActiveFaq(activeFaq.g ? {g : false} : {g : true})} data-toggle="collapse"
@@ -179,7 +195,33 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </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.b && "active"}`} data-toggle="collapse"
+                                    data-target={`#${target}`}>{activeFaq.b ? <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/Terms/Main.js

@@ -28,8 +28,8 @@ const Main = ({ brdcum }) => {
                 collection, use, purpose, and sharing of personally identifiable
                 information ("PII") related to the use of Merms's myFit website{" "}
                 <span>
-                  <a href="https://myfit.mermsemr.com/">
-                    https://myfit.mermsemr.com
+                  <a href={process.env.REACT_APP_APPSITE}>
+                    {process.env.REACT_APP_APPSITE}
                   </a>
                 </span>
                 , MERMS providing of services to our users ("Partners"), or from
@@ -53,8 +53,8 @@ const Main = ({ brdcum }) => {
                 govern. Provides its services (described below) to you through
                 its website located at{" "}
                 <span>
-                  <a href="https://myfit.mermsemr.com/">
-                    https://myfit.mermsemr.com
+                  <a href={process.env.REACT_APP_APPSITE}>
+                    {process.env.REACT_APP_APPSITE}
                   </a>
                 </span>{" "}
                 (the "Site") and through its mobile applications and related
@@ -1363,8 +1363,8 @@ const Main = ({ brdcum }) => {
                 use, purpose, and sharing of personally identifiable information
                 ("PII") related to the use of Merms's myFit website{" "}
                 <span>
-                  <a href="https://myfit.mermsemr.com/">
-                    https://myfit.mermsemr.com
+                  <a href={process.env.REACT_APP_APPSITE}>
+                    {process.env.REACT_APP_APPSITE}
                   </a>
                 </span>
                 , MERMS providing of services to our users ("Partners"), or from

src/vendors/service/siteService.js

@@ -0,0 +1,72 @@
+import React from "react";
+import Axios from "axios";
+
+class SiteService {
+  constructor() {
+    console.log("Er are here anyway");
+  }
+  blogData() {
+    return this.getAuxEnd("blogdata", null);
+  }
+
+  countryData() {
+    return this.getAuxEnd("/country", null);
+  }
+
+  faqData() {
+    return this.getAuxEnd("/faq", null);
+  }
+  
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  // Unified call below 
+  //----------------------------------------  -----
+  //----------------------------------------  -----
+  getAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    return Axios.get(endPoint)
+      .then((response) => {
+        // console.log(response);
+        // res = response;
+        // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
+
+  postAuxEnd(uri, reqData) {
+    const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+    Axios.post(endPoint)
+      .then((response) => {
+        console.log(response);
+        // res = response;
+        console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
+        return response;
+      })
+      .catch((error) => {
+        if (error.response) {
+          //response status is an error code
+          console.log(error.response.status);
+        } else if (error.request) {
+          //response not received though the request was sent
+          console.log(error.request);
+        } else {
+          //an error occurred when setting up the request
+          console.log(error.message);
+        }
+      });
+  }
+}
+
+export default SiteService;