[issue86] add rating to books

src/components/AddBookModal.jsx

@@ -4,7 +4,7 @@ import CloseButton from "../customs/CloseButton";
 import { motion } from "framer-motion";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { setDoc, doc } from "firebase/firestore";
+import { setDoc, doc, arrayUnion } from "firebase/firestore";
 import { db } from "../firebase";
 import { useDispatch, useSelector } from "react-redux";
 import { addBooks } from "../store/books/booksSlice";
@@ -94,7 +94,7 @@ function AddBookModal({ isAddBookModalOpen, setIsAddBookModalOpen }) {
         bookTitle: formik.values.bookTitle,
         author: formik.values.author,
         genres: formik.values.genres,
-        price: !formik.values.isChecked ? formik.values.price : 0,
+        price: !formik.values.isChecked ? formik.values.price || 0 : 0,
         description: formik.values.description,
         image: fileUrl,
         isChecked: formik.values.isChecked,
@@ -103,6 +103,10 @@ function AddBookModal({ isAddBookModalOpen, setIsAddBookModalOpen }) {
         // rating: 0,
         uid: userUID,
         images: [],
+        ratersUID: arrayUnion(),
+        rating: 0,
+        totalRaters: 0,
+        totalRating: 0,
       });
 
       dispatch(addBooks({ ...formik.values, id: uniqueID, uid: userUID }));

src/components/BookCard.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-// import ReactStars from "react-rating-stars-component";
+import React, { useState, useEffect } from "react";
+import ReactStars from "react-rating-stars-component";
 import { Link, useHistory } from "react-router-dom";
 import { BOOKS_ROUTE } from "../routes";
 import { AiOutlineHeart, AiFillHeart, AiOutlineDelete } from "react-icons/ai";
@@ -21,6 +21,8 @@ import { changeDropdown } from "../store/dropdownSlice";
 import { useTranslation } from "react-i18next";
 import MoonLoader from "react-spinners/MoonLoader";
 import { deleteBook } from "../store/books/booksSlice";
+import { toast } from "react-toastify";
+import { setRatings } from "../store/ratingsSlice";
 
 function BookCard({ user_uid, image, genres, title, price, rating, id }) {
   const user = useSelector(selectorUser);
@@ -36,6 +38,9 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
     dispatch(changeDropdown(genre));
   }
 
+  const [currentRating, setCurrentRating] = useState(rating);
+  const books = useSelector((state) => state.books);
+
   const genreButtons = genres?.map((genre, index) => {
     return (
       <button
@@ -80,6 +85,69 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
     }
   };
 
+  async function setRating(newR) {
+    const washingtonRef = doc(db, "books", `${id}`);
+
+    const totalRating =
+      books.books.find((book) => book.id === id).totalRating + newR;
+
+    const totalRaters =
+      books.books.find((book) => book.id === id).totalRaters + 1;
+
+    const rating = totalRating / totalRaters;
+
+    if (!user.uid) {
+      return;
+    } else {
+      if (
+        books.books.find((book) => book.id === id).ratersUID.includes(user.uid)
+      ) {
+        toast.error("You already rated this book");
+        return;
+      } else {
+        if (totalRating && totalRaters && rating) {
+          await updateDoc(washingtonRef, {
+            rating: rating.toFixed(1),
+            totalRating: totalRating,
+            totalRaters: totalRaters,
+            ratersUID: arrayUnion(user.uid),
+          });
+          dispatch(
+            setRatings({
+              totalRaters: totalRaters + 1,
+              totalRating: totalRating + newR,
+              rating: totalRating / totalRaters,
+              ratersUID: arrayUnion(user.uid),
+            })
+          );
+          toast.success("You rated this book successfully");
+        } else {
+          await updateDoc(washingtonRef, {
+            rating: newR,
+            totalRating: newR,
+            totalRaters: 1,
+            ratersUID: arrayUnion(user.uid),
+          });
+          dispatch(
+            setRatings({
+              totalRaters: 1,
+              totalRating: newR,
+              rating: newR,
+              ratersUID: arrayUnion(user.uid),
+            })
+          );
+          toast.success("You rated this book successfully");
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (books.books.find((book) => book.id === id)) {
+      setCurrentRating(books.books.find((book) => book.id === id).rating);
+    }
+  }, [books.books, id]);
+
   return (
     <>
       <div className="bg-cards rounded-xl font-sans  overflow-hidden shadow-md w-full  lg:w-72  p-3 transform transition ease-in-out duration-200 hover:-translate-y-0.5 mx-auto md:mt-5 mb-1 sm:mb-2 md:mb-0">
@@ -134,6 +202,16 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
         <div className="flex justify-between items-center pr-1">
           <p className="font-semibold pl-1"> $ {price}</p>
         </div>
+        <div className="flex justify-start items-center">
+          <ReactStars
+            className=""
+            size={20}
+            isHalf={true}
+            value={currentRating}
+            onChange={(newR) => setRating(newR)}
+          />
+          <span className="pl-1 mt-1">{currentRating}</span>
+        </div>
         <Link to={`${BOOKS_ROUTE}/${id}`} className="text-white font-semibold">
           <button className="bg-secondary text-white rounded-xl p-1 w-full mt-3 transform transition ease-in-out duration-100 hover:-translate-y-0.5">
             {t("buy")}

src/store/ratingsSlice.js

@@ -0,0 +1,24 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  totalRaters: 0,
+  totalRating: 0,
+  rating: 0,
+  ratersUID: [],
+};
+
+const ratingsSlice = createSlice({
+  name: "ratings",
+  initialState,
+  reducers: {
+    setRatings: (state, action) => {
+      state.totalRaters = action.payload.totalRaters;
+      state.totalRating = action.payload.totalRating;
+      state.rating = action.payload.rating;
+      state.ratersUID = action.payload.ratersUID;
+    },
+  },
+});
+
+export const { setRatings } = ratingsSlice.actions;
+export default ratingsSlice.reducer;