faqs dynamice from strapi

components/detail/Detail.js

@@ -16,11 +16,13 @@ const Detail = () => {
   const { allActivitiesData } = useSelector(state => state.allActivitiesData);
   const { activityById } = useSelector(state => state.activityById);
   const { loadedUser } = useSelector(state => state.loadedUser);
+  const { faqs } = useSelector(state => state.faqs);
   useEffect(() => {
     // console.log("router", activityById.data.attributes.category?.data?.attributes.name);
     dispatch(getActivitiesByFilters({ category: activityById?.data.attributes.category?.data?.id }));
   }, [activityById]);
   
+  console.log("faqs=>", faqs)
   console.log("activityById", activityById);
   console.log("loadedUser", loadedUser);
   return (
@@ -52,7 +54,7 @@ const Detail = () => {
         </section>
         <GuestReviews activityById={activityById} />
         <SimilarExperiences allActivitiesData={allActivitiesData} />
-        <Faqs />
+        <Faqs faqs={faqs} />
         <SignUpToExperienceOurPlatform />
       </main>
     </Fragment>

components/detail/Faqs.js

@@ -2,7 +2,8 @@ import React from "react";
 import { Accordion } from "react-bootstrap";
 import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
 import { motion } from "framer-motion";
-const Faqs = () => {
+const Faqs = ({faqs}) => {
+  console.log("faqs====", faqs);
   return (
     <section className="faqs-session">
       <div className="container">
@@ -21,22 +22,23 @@ const Faqs = () => {
         <div className="row">
           <div className="col-12">
             <Accordion defaultActiveKey="0" className="accordion-01">
-              <Accordion.Item eventKey="0">
-                <Accordion.Header>Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</Accordion.Header>
-                <Accordion.Body>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-                  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-                  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+            {faqs?.data && faqs?.data.map((item, index)=>(
+              <Accordion.Item eventKey={index}>
+                <Accordion.Header>{item?.attributes?.question}</Accordion.Header>
+                <Accordion.Body dangerouslySetInnerHTML={{ __html: item?.attributes?.answer }}>
+                
                 </Accordion.Body>
               </Accordion.Item>
-              <Accordion.Item eventKey="1">
+            ))}
+              
+              {/* <Accordion.Item eventKey="1">
                 <Accordion.Header>Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</Accordion.Header>
                 <Accordion.Body>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                   nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                   fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                 </Accordion.Body>
-              </Accordion.Item>
+              </Accordion.Item> */}
             </Accordion>
           </div>
         </div>

components/listing/LetDiscover.js

@@ -54,7 +54,7 @@ const LetDiscover = ({ categories }) => {
   return (
     <>
       <section className="let-discover-session let-discover-listing-session">
-        <div className="container">
+        <div className="container-fluid">
           <div className="row">
             <div className="col-12">
               {/* <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>

pages/activities/[id].js

@@ -5,6 +5,7 @@ import Layout from "../../components/layout/Layout";
 import { getActivitiesByFilters, getActivityById } from "../../redux/actions/activityAction";
 import { loadUser } from "../../redux/actions/userActions";
 import { wrapper } from "../../redux/store";
+import { getFaqs } from "../../redux/actions/faqsAction";
 
 const ActivityDetailPage = () => {
   const dispatch = useDispatch();
@@ -24,6 +25,7 @@ export default ActivityDetailPage;
 /** For server side rendering */
 export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
   await store.dispatch(getActivityById(query.id));
+  await store.dispatch(getFaqs());
   //   await store.dispatch(getActivitiesByFilters({category: query.category}))
 
   return {

redux/actions/faqsAction.js

+import axios from "axios";
+import qs from "qs";
+import { GET_FAQS_FAIL, GET_FAQS_REQUEST, GET_FAQS_SUCCESS } from "../constants/faqsConstants";
+
+export const getFaqs = () => async dispatch => {
+  try {
+
+    dispatch({
+      type: GET_FAQS_REQUEST
+    });
+
+    const config = {
+      headers: {
+        "Content-Type": "application/json"
+      }
+    };
+    const query = {
+      populate: ["image"]
+    };
+
+    const queryString = qs.stringify(query, {
+      encodeValuesOnly: true
+    });
+
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/faqs?${queryString}`, config);
+    console.log("response > ", response);
+    dispatch({
+      type: GET_FAQS_SUCCESS,
+      payload: response.data
+    });
+
+    return response.data;
+  } catch (error) {
+    dispatch({
+      type: GET_FAQS_FAIL,
+      payload: error.response.data
+    });
+  }
+};

redux/constants/faqsConstants.js

+export const GET_FAQS_REQUEST = "GET_FAQS_REQUEST"
+export const GET_FAQS_SUCCESS = "GET_FAQS_SUCCESS"
+export const GET_FAQS_FAIL = "GET_FAQS_FAIL"
+
+
+export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file

redux/reducers/faqsReducer.js

+import { GET_FAQS_REQUEST, CLEAR_ERRORS, GET_FAQS_SUCCESS, GET_FAQS_FAIL } from "../constants/faqsConstants";
+
+export const getAllFaqsReducer = (state = { loading: true, success: false, faqs: null }, action) => {
+    switch (action.type) {
+      case GET_FAQS_REQUEST:
+        return {
+          loading: true,
+        };
+  
+      case GET_FAQS_SUCCESS:
+        return {
+          loading: false,
+          faqs: action.payload
+        };
+  
+      case GET_FAQS_FAIL:
+        return {
+          loading: false,
+          error: action.payload.error.message
+        };
+  
+      case CLEAR_ERRORS:
+        return {
+          ...state,
+          error: null
+        };
+  
+      default:
+        return state;
+    }
+  };
\ No newline at end of file

redux/reducers/reducers.js

@@ -10,6 +10,7 @@ import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryR
 import { getAllTestimonialReducer } from "./testimonialReducer";
 import { blogReducer, blogsReducer } from "./blogReducer";
 import { getAllHomeBannerReducer } from "./homeBannerReducer";
+import { getAllFaqsReducer } from "./faqsReducer";
 
 const reducers = combineReducers({
   townships: townshipsReducer,
@@ -42,6 +43,7 @@ const reducers = combineReducers({
   enquiriesByVendor: getEnquiriesReducer,
   activityFilters: setActivityFilterReducer,
   wishlists: getWishlistsReducer,
+  faqs: getAllFaqsReducer,
 });
 
 export default reducers;