Viewing File: /home/ubuntu/todaykat-frontend-base/src/components/landingPage/CustomerReviewIndex.jsx

import React, { useEffect, useState } from "react";
import { Navbar, Container, Image, Nav, Row, Col } from "react-bootstrap";
import { Link } from "react-router-dom";
import "./Landing.css";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import { customerReviewsListStart } from "../store/actions/HomePageAction";
import "slick-carousel/slick/slick-theme.css";
import { connect } from "react-redux";
import ReactStars from "react-rating-stars-component";
import Skeleton from "react-loading-skeleton";
import NoDataFound from "../Helper/NoDataFound";
import { withTranslation, useTranslation } from "react-multi-lang";

const CustomerReviewIndex = (props) => {
  const t = useTranslation();
  const settings = {
    dots: true,
    arrows: true,
    infinite: false,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    adaptiveHeight: true,
    responsive: [
      {
        breakpoint: 1195,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        },
      },
      {
        breakpoint: 900,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          initialSlide: 1,
        },
      },
      {
        breakpoint: 750,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          adaptiveHeight: true,
        },
      },
    ],
  };

  useEffect(() => {
    props.dispatch(customerReviewsListStart({ order_by: "newest" }));
  }, []);

  return (
    <>
      {props.customerReviewsList.loading ? (
        <div className="d-flex justify-content-around">
          <Skeleton height={350} width={600} />
          <Skeleton height={350} width={600} />
        </div>
      ) : props.customerReviewsList.data.reviews &&
        props.customerReviewsList.data.reviews.length > 0 ? (
        <div className="customer-review-page">
          <Container>
            <Row>
              <Col md={12}>
                <div className="section-title-sec">
                  {/* <h5 className="title-light">{t("the_products")}</h5> */}
                  <h2 className="title-bold">
                    <span>{t("customer_review")}</span>
                  </h2>
                </div>
              </Col>
            </Row>
            <Row>
              <Col md="12">
                <div className="customer-review-sec">
                  <Container>
                    <Row>
                      <Col md={12}>
                        <Slider {...settings}>
                          {props.customerReviewsList.data.reviews.map((reviews, i) => (
                            <div className="new-customer-review-card">
                              <div className="customer-rating-box">
                                <div className="customer-rating-icon">
                                  <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlSpace="preserve"
                                    width="60"
                                    height="60"
                                    viewBox="0 0 512 512"
                                  >
                                    <path
                                      fill="#004072"
                                      d="M177.875 256H99.75v-62.5c0-34.473 28.027-62.5 62.5-62.5h7.812a23.38 23.38 0 0 0 23.438-23.438V60.688a23.38 23.38 0 0 0-23.438-23.438h-7.812C75.922 37.25 6 107.172 6 193.5v234.375c0 25.879 20.996 46.875 46.875 46.875h125c25.879 0 46.875-20.996 46.875-46.875v-125c0-25.879-20.996-46.875-46.875-46.875m281.25 0H381v-62.5c0-34.473 28.027-62.5 62.5-62.5h7.812a23.38 23.38 0 0 0 23.438-23.438V60.688a23.38 23.38 0 0 0-23.438-23.438H443.5c-86.328 0-156.25 69.922-156.25 156.25v234.375c0 25.879 20.996 46.875 46.875 46.875h125c25.879 0 46.875-20.996 46.875-46.875v-125C506 276.996 485.004 256 459.125 256"
                                      data-original="#000000"
                                    ></path>
                                  </svg>
                                </div>
                                <div className="customer-product">
                                  <div className="customer-product-img">
                                    <Image
                                      src={reviews.product.file}
                                      type="image/png"
                                      alt={reviews.product.name}
                                    />
                                  </div>
                                  <div className="customer-product-content">
                                    <h4>{reviews.product.name}</h4>
                                  </div>
                                </div>
                                <div className="customer-review-content">
                                  <div className="customer-rating">
                                    <p>{reviews.review}</p>
                                  </div>
                                  <div className="customer-review-user-info">
                                    <div className="customer-review-user-img-sec">
                                      <Image
                                        className="customer-review-user-img"
                                        src={reviews.user.picture}
                                        type="image/png"
                                      />
                                    </div>
                                    <div>
                                      <h4> {reviews.user.name}</h4>
                                      <ReactStars
                                        count={5}
                                        value={reviews.star}
                                        edit={false}
                                        // onChange={ratingChanged}
                                        size={24}
                                        isHalf={true}
                                        emptyIcon={<i class="far fa-star"></i>}
                                        halfIcon={
                                          <i class="fas fa-star-half-alt"></i>
                                        }
                                        fullIcon={<i class="fas fa-star"></i>}
                                        activeColor="#ffd700"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          ))}
                        </Slider>

                      </Col>
                    </Row>
                  </Container>
                </div>
              </Col>
            </Row>
          </Container>
        </div>
      ) : (
        null
      )}
    </>
  );
};

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

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

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