إضافة تقييم للواجهة البرمجية

السلام عليكم.

بعد تقييم منتج محدد أريد إظهار التقييم على الواجهة البرمجية.

Slice

import { createSlice } from "@reduxjs/toolkit";

const bookSlice = createSlice({
    name: "book",
    initialState: {
        books: [],
        reviews: [],
        error: false,
        loading: false,
    },
    reducers: {
        addReviews(state, action) {
            state.books = action.payload
        },
        getReviews(state, action) {
            state.reviews = action.payload;
        },
        setLoading(state) {
            state.loading = true;
        },
        clearLoading(state) {
            state.loading = false;
        },
    }
})

const bookReducer = bookSlice.reducer;
const bookActions = bookSlice.actions;

export {bookActions, bookReducer}

apiCall

// Get Book Reviews
export function getBookReviews(bookId) {
  return async (dispatch, getState) => {
    try {
      dispatch(bookActions.setLoading())
      const {data} = await axios.get(`${BOOK_URL}/${bookId}/reviews`, {
        headers: {
          "authorization": getState().auth.user.accessToken
        }
      });
      dispatch(bookActions.getReviews(data));
      dispatch(bookActions.clearLoading());
    } catch (error) {
      toast.error(error?.response?.data.message);
      dispatch(bookActions.clearLoading());
    }
  };
}

// Post Review
export function postReview(bookId, review) {
  return async (dispatch, getState) => {
    try {
      dispatch(bookActions.setLoading())
      const {data} = await axios.post(`${BOOK_URL}/${bookId}/reviews`, review, {
        headers: {
          "authorization": getState().auth.user.accessToken
        }
      });
      toast.success(data?.message)
      dispatch(bookActions.addReviews())
      dispatch(bookActions.getReviews(review));
      dispatch(bookActions.clearLoading());
    } catch (error) {
      toast.error(error?.response?.data.message);
      dispatch(bookActions.clearLoading());
    }
  };
}

React Component

// Get Book Reviews
export function getBookReviews(bookId) {
  return async (dispatch, getState) => {
    try {
      dispatch(bookActions.setLoading())
      const {data} = await axios.get(`${BOOK_URL}/${bookId}/reviews`, {
        headers: {
          "authorization": getState().auth.user.accessToken
        }
      });
      dispatch(bookActions.getReviews(data));
      dispatch(bookActions.clearLoading());
    } catch (error) {
      toast.error(error?.response?.data.message);
      dispatch(bookActions.clearLoading());
    }
  };
}

// Post Review
export function postReview(bookId, review) {
  return async (dispatch, getState) => {
    try {
      dispatch(bookActions.setLoading())
      const {data} = await axios.post(`${BOOK_URL}/${bookId}/reviews`, review, {
        headers: {
          "authorization": getState().auth.user.accessToken
        }
      });
      toast.success(data?.message)
      dispatch(bookActions.addReviews())
      dispatch(bookActions.getReviews(review));
      dispatch(bookActions.clearLoading());
    } catch (error) {
      toast.error(error?.response?.data.message);
      dispatch(bookActions.clearLoading());
    }
  };
}

Review.jsx

import moment from "moment";
import React from "react";
import Rating from "../rating/Rating";
import { Oval } from "react-loader-spinner";
import { useSelector } from "react-redux";

function Reviews() {
  const { loading, reviews } = useSelector((state) => state.book);


  return (
    <div className="get-reviews">
      <h2 className="get-reviews-title">Reviews ({reviews?.length})</h2>
      <div className="reviews">
        {loading ? (
          <Oval
            height={120}
            width={120}
            color="rgb(247, 96, 14)"
            wrapperStyle={{
              height: "90vh",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
            wrapperClass=""
            visible={true}
            ariaLabel="oval-loading"
            secondaryColor="#E2E2E2"
            strokeWidth={3}
            strokeWidthSecondary={3}
          />
        ) : (
          Array.isArray(reviews) && reviews.map((el, key) => (
            <div className="user-review" key={key}>
              <p>
                <span>{el?.username ? el?.username : "Unknown User"}</span>{" "}
                {`-  `}
                {moment(el?.createdAt).format("DD MMM YYYY")}
              </p>
              <Rating rating={el?.rate} />
              <p>{el?.comment}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

export default Reviews;

شكرا