Viewing File: /home/ubuntu/vedadeals-frontend-base/src/components/landingPage/FAQIndex.jsx

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import {
  Navbar,
  Container,
  Image,
  Nav,
  Row,
  Col,
  Accordion,
} from "react-bootstrap";
import { Link } from "react-router-dom";
import "./Landing.css";
import { withTranslation, useTranslation } from "react-multi-lang";
import { fetchFaqsListStart } from "../store/actions/HomePageAction";
import SomethingWrong from "../Helper/SomethingWrong";
import Skeleton from "react-loading-skeleton";
import configuration from "react-global-configuration";

const FAQIndex = (props) => {
  const t = useTranslation();

  const [isVisible, setIsVisible] = useState(0);

  const { faqsList } = props;

  useEffect(() => {
    props.dispatch(fetchFaqsListStart());
  }, []);

  return (
    <>
      <div className="faq-sec">
        <Container>
          <Row>
            <Col md={12}>
              <div className="section-title-sec">
                <h5 className="title-light">{t("faq")}</h5>
                <h2 className="title-bold">
                  <span>{t("what_do_you_need_to_know")}</span>
                </h2>
              </div>
            </Col>
          </Row>
          <Row className="margin-top-lg justify-content-center">
            <>
              {/* <Col md={12} xl={6} lg={6} className="resp-mrg-btm-md">
                <div className="faq-img-sec">
                  <Image
                    className="faq-img"
                    src={window.location.origin + "/images/faq/faq-img.png"}
                    type="image/svg"
                    alt={`${configuration.get("configData.site_name")} Ecommerce Platform`}
                  />
                </div>
              </Col> */}

              <Col md={12} xl={12} lg={12}>
              <div className="faq-box">
                {faqsList.loading ? (
                  <Skeleton height={400} style={{width:'100%'}} />
                ) : (
                  faqsList.data.faqs.map((list, index) => (
                    <div className="faq-accordion-sec accordion accordion-flush">
                      <Accordion
                        // defaultActiveKey="0"
                        activeKey={isVisible}
                        class=""
                      >
                        <Accordion.Item
                          eventKey={index}
                          onClick={() =>
                            setIsVisible(isVisible === index ? null : index)
                          }
                        >
                          <Accordion.Header>{list.title}</Accordion.Header>
                          <Accordion.Body>
                          <p
                                                dangerouslySetInnerHTML={{
                                                    __html: list.description,
                                                }}
                                            ></p>
                                            </Accordion.Body>
                        </Accordion.Item>
                      </Accordion>
                    </div>
                  ))
                )}
                </div>
              </Col>
            </>
          </Row>
        </Container>
      </div>
    </>
  );
};

const mapStateToPros = (state) => ({
  faqsList: state.homepage.faqsList,
});

function mapDispatchToProps(dispatch) {
  return { dispatch };
}

export default connect(
  mapStateToPros,
  mapDispatchToProps
)(withTranslation(FAQIndex));