import { Empty } from "antd"; import React, { useEffect, useState } from "react"; import { Accordion, Button, Modal } from "react-bootstrap"; import { Loader } from "react-bootstrap-typeahead"; import { FaAngleLeft } from "react-icons/fa"; import { useDispatch, useSelector } from "react-redux"; import { toast } from "react-toastify"; // import { getActivitiesByFilters } from "../../redux/actions/activityAction"; import { deleteReview, getReviewsAction } from "../../redux/actions/reviewsAction"; const ReviewsListing = ({ activityId, setshowReviews, isVendor }) => { const dispatch = useDispatch(); useEffect(() => { dispatch(getReviewsAction({ activityId })); }, []); const [showModal, setshowModal] = useState(false); const [reviewId, setreviewId] = useState(); const { reviews, loading } = useSelector(state => state.reviews); console.log("reviews", reviews, loading); return ( <div className="review-details"> <div className="col-12 col-lg-12"> <div className="d-flex align-items-center justify-content-between"> <div className="backDiv"> <span className="backArrow" onClick={() => { setshowReviews(false); }} > <FaAngleLeft /> </span> <span>Reviews: </span> </div> </div> </div> <div className="container mt-5"> {reviews && !reviews.length > 0 && <Empty />} {!loading ? ( <Accordion className="accordion-filter accordion-01" defaultActiveKey="0" flush> {reviews && reviews.map(item => { return ( <Accordion.Item key={item.id} eventKey={item.id}> <Accordion.Header> <div className="title-accord"> <span>{`${item.attributes.comments.slice(0, 80).trim()}...`}</span>{" "} <span className="rt-name">{`by ${item.attributes.endUser.data.attributes.email}`}</span> </div> </Accordion.Header> <Accordion.Body> <div className="m-1">Rating: {item.attributes.rating}</div> <div className="m-1">Review: {item.attributes.comments}</div> {!isVendor && ( <div> <Button className="btn btn-primary mt-2" onClick={() => { setshowModal(true); setreviewId(item.id); }} > Delete review </Button> </div> )} </Accordion.Body> </Accordion.Item> ); })} </Accordion> ) : ( <Loader /> )} <Modal show={showModal} onHide={() => { setshowModal(false); setreviewId(); }} centered > <Modal.Header closeButton><strong>Are you sure you want to delete this review?</strong></Modal.Header> <Modal.Body> <div className="row"> <div className="col-12 d-flex align-items-center justify-content-center"> <Button className="btnAdd btnApprove me-3 w-100" onClick={async () => { const res = await deleteReview({ reviewId }); dispatch(getReviewsAction({ activityId })); // dispatch(getActivitiesByFilters({})); toast.success("Review deleted"); setshowModal(false); // console.log(res); }} > Yes </Button> <Button className="btnAdd btnReject m-0 w-100" onClick={() => { setshowModal(false); setreviewId(); }} > Cancel </Button> </div> </div> </Modal.Body> </Modal> </div> </div> ); }; export default ReviewsListing;