.

components/admin/Reviews.js

 import { EditTwoTone, EyeTwoTone, SearchOutlined } from "@ant-design/icons";
 import { Button, Input, Space, Table, Tag } from "antd";
 import React, { Fragment, useEffect, useRef, useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { getActivitiesByFilters } from "../../redux/actions/activityAction";
 import ReviewsListing from "./ReviewsListing";
 
 const Reviews = () => {
+  const dispatch = useDispatch();
   const searchInput = useRef(null);
   const [searchText, setSearchText] = useState("");
   const [searchedColumn, setSearchedColumn] = useState("");
   const [columns, setcolumns] = useState([]);
   const [data, setdata] = useState([]);
   const [showReviews, setshowReviews] = useState(false);
-
+  const [activityId, setactivityId] = useState();
+  const { reviews } = useSelector(state => state.reviews);
   const handleReset = clearFilters => {
     clearFilters();
     setSearchText("");
@@ -151,7 +154,8 @@ const Reviews = () => {
             <EyeTwoTone
               style={{ fontSize: "22px" }}
               onClick={() => {
-                setshowReviews(true)
+                setshowReviews(true);
+                setactivityId(record.key);
                 // router.push(`/vendor/activities/${record.key}`);
                 // console.log(record);
               }}
@@ -162,9 +166,25 @@ const Reviews = () => {
       }
     ]);
   }, []);
+  useEffect(() => {
+    setdata(
+        allActivitiesData &&
+          allActivitiesData.data.length > 0 &&
+          allActivitiesData.data.map(item => {
+            return {
+              key: item.id,
+              name: item.attributes.name,
+              reviewsCount: item.attributes.reviews.data.length
+              // tags: ["nice", "developer"]
+            };
+          })
+      );
+    // dispatch(getActivitiesByFilters({}));
+  }, [reviews]);
+
   return (
     <Fragment>
-      <div className="row">{!showReviews ? <Table columns={columns} dataSource={data} /> : <ReviewsListing/>}</div>
+      <div className="row">{!showReviews ? <Table columns={columns} dataSource={data} /> : <ReviewsListing setshowReviews={setshowReviews} activityId={activityId} />}</div>
     </Fragment>
   );
 };

components/admin/ReviewsListing.js

-import React from "react";
-import { Accordion } from "react-bootstrap";
+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 = () => {
+const ReviewsListing = ({ activityId, setshowReviews }) => {
+  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="">
-      <Accordion className="accordion-filter" defaultActiveKey="0" flush>
-        <Accordion.Item eventKey="0">
-          <Accordion.Header>Review 1</Accordion.Header>
-          <Accordion.Body>
-            <div>Review 1</div>
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="1">
-          <Accordion.Header>Review 1</Accordion.Header>
-          <Accordion.Body>
-            <div>Review 1</div>
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="2">
-          <Accordion.Header>Review 1</Accordion.Header>
-          <Accordion.Body>
-            <div>Review 1</div>
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="3">
-          <Accordion.Header>Review 1</Accordion.Header>
-          <Accordion.Body>
-            <div>Review 1</div>
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="4">
-          <Accordion.Header>Review 1</Accordion.Header>
-          <Accordion.Body>
-            <div>Review 1</div>
-          </Accordion.Body>
-        </Accordion.Item>
-      </Accordion>
+    <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">
+              <FaAngleLeft
+                onClick={() => {
+                  setshowReviews(false);
+                }}
+              />
+            </span>
+            <span>Reviews: </span>
+          </div>
+        </div>
+      </div>
+      <div className="container  mt-5">
+        {reviews && !reviews.length > 0 && <Empty />}
+        {!loading ? (
+          <Accordion className="accordion-filter" defaultActiveKey="0" flush>
+            {reviews &&
+              reviews.map(item => {
+                return (
+                  <Accordion.Item key={item.id} eventKey={item.id}>
+                    <Accordion.Header>
+                      <div>
+                        <span>{`${item.attributes.comments.slice(0, 80).trim()}...`}</span> <span className="">{`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>
+                      <div>
+                        <Button
+                          className="btnAdd btnReject m-0"
+                          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>Are you sure you want to delete this review?</Modal.Header>
+          <Modal.Body>
+            <div className="row">
+              <Button
+                className="btnAdd btnApprove m-0"
+                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"
+                onClick={() => {
+                  setshowModal(false);
+                  setreviewId();
+                }}
+              >
+                Cancel
+              </Button>
+            </div>
+          </Modal.Body>
+        </Modal>
+      </div>
     </div>
   );
 };

redux/actions/reviewsAction.js

@@ -2,6 +2,7 @@ import axios from "axios";
 import { getSession } from "next-auth/react";
 import qs from "qs";
 import { GET_REVIEWS_FAIL, GET_REVIEWS_REQUEST, GET_REVIEWS_SUCCESS } from "../constants/reviewsConstants";
+
 export const postReviewEndUser = async ({ endUserId, activityId, comments, rating }) => {
   try {
     const session = await getSession();
@@ -68,3 +69,21 @@ export const getReviewsAction =
       });
     }
   };
+
+export const deleteReview = async ({ reviewId }) => {
+  try {
+    const session = await getSession();
+    console.log("session", session);
+    if (!session) {
+      return;
+    }
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${session.jwt}`
+      }
+    };
+    const response = await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/reviews/${reviewId}`, config);
+    return response.data;
+  } catch (error) {}
+};