From b6bd1f9abe6dd7012198e08666b9bce37a255e06 Mon Sep 17 00:00:00 2001
From: RawandDev <rawand.200091384037@gmail.com>
Date: Thu, 14 Oct 2021 19:23:25 +0300
Subject: [PATCH 1/5] resolve(conflicts): resolve conflicts with deleting the
 book component

---
 src/App.js                  |  9 ---------
 src/components/TeamCard.jsx | 20 +++++++++++++++++++-
 src/pages/About.jsx         | 27 ++++++++++++++++-----------
 src/service/about.json      | 32 ++++++++++++++++++++++++++------
 4 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/App.js b/src/App.js
index 03022b0..d50134a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,6 @@ import {
   PROFILE_ROUTE,
 } from "./routes";
 import Footer from "./components/Footer";
-import BookCard from "./components/BookCard";
 
 function App() {
   return (
@@ -38,14 +37,6 @@ function App() {
         <Route path={PROFILE_ROUTE} component={Profile} />
         <Route component={Error} />
       </Switch>
-      {/* to showcase the BookCard, Will be removed before merge */}
-      <BookCard
-        image="https://images.unsplash.com/photo-1543002588-bfa74002ed7e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Ym9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
-        genres={["Action", "Drama", "Romance", "Novel", "Thriller"]}
-        title="Book Title"
-        rating="2.5(5)"
-        price="9.99$"
-      />
       <Footer />
     </>
   );
diff --git a/src/components/TeamCard.jsx b/src/components/TeamCard.jsx
index c494910..c04c88a 100644
--- a/src/components/TeamCard.jsx
+++ b/src/components/TeamCard.jsx
@@ -1,7 +1,17 @@
 import React from "react";
 import defaultImage from "../assets/team.svg";
+import { VscGithubInverted } from "react-icons/vsc";
+import { BsFacebook } from "react-icons/bs";
 
-function TeamCard({ image, name, description, position, reversed }) {
+function TeamCard({
+  image,
+  name,
+  description,
+  position,
+  reversed,
+  github,
+  facebook,
+}) {
   return (
     <div
       className={`mb-10 sm:flex sm:items-center sm:justify-evenly ${
@@ -13,6 +23,14 @@ function TeamCard({ image, name, description, position, reversed }) {
         <h3 className="text-xl font-medium mb-2">
           {name} - {position}
         </h3>
+        <div className="flex mb-2">
+          <a href={github} target="_blank" rel="noopener noreferrer">
+            <VscGithubInverted size={25} className="mr-2" />
+          </a>
+          <a href={facebook} target="_blank" rel="noopener noreferrer">
+            <BsFacebook size={25} className="" color="#3779ff" />
+          </a>
+        </div>
       </div>
       <p>{description}</p>
     </div>
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 6553108..bf1d9fd 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -19,17 +19,22 @@ function About() {
       </div>
       <div className="text-center mx-10 sm:mx-32 lg:mx-52 mt-10">
         <h1 className="text-2xl font-semibold mb-3">Our Team</h1>
-        {teamMembers.map(({ name, image, position, description }) => {
-          return (
-            <TeamCard
-              key={name}
-              name={name}
-              image={image}
-              description={description}
-              position={position}
-            />
-          );
-        })}
+        {teamMembers.map(
+          ({ name, image, position, description, reversed, social_links }) => {
+            return (
+              <TeamCard
+                key={name}
+                name={name}
+                image={image}
+                description={description}
+                position={position}
+                reversed={reversed}
+                github={social_links.github}
+                facebook={social_links.facebook}
+              />
+            );
+          }
+        )}
       </div>
     </div>
   );
diff --git a/src/service/about.json b/src/service/about.json
index 9bf0c33..19d4615 100644
--- a/src/service/about.json
+++ b/src/service/about.json
@@ -4,34 +4,54 @@
     "position": "Trainer",
     "image": "",
     "description": "I'm a web developer and software engineer student. I have 1 year experience and I like Karate.",
-    "reversed": false
+    "reversed": false,
+    "social_links": {
+      "github": "https://github.com/MuhannedNoman",
+      "facebook": "https://www.facebook.com/"
+    }
   },
   {
     "name": "Rawand",
     "position": "Developer",
     "image": "",
     "description": "I'm a web developer and software engineer student. I have 1 year experience and I like Karate.",
-    "reversed": true
+    "reversed": true,
+    "social_links": {
+      "github": "https://github.com/RawandDev",
+      "facebook": "https://www.facebook.com/"
+    }
   },
   {
     "name": "Niyaz",
     "position": "Developer",
     "image": "",
     "description": "I'm a web developer and software engineer student. I have 1 year experience and I like Karate.",
-    "reversed": false
+    "reversed": false,
+    "social_links": {
+      "github": "https://github.com/Niyaz-Dev12",
+      "facebook": "https://www.facebook.com/"
+    }
   },
   {
-    "name": "Zahraa is the best",
+    "name": "Zahraa",
     "position": "Developer",
     "image": "",
     "description": "I'm a web developer and software engineer student. I have 1 year experience and I like Karate.",
-    "reversed": true
+    "reversed": true,
+    "social_links": {
+      "github": "https://github.com/ZhraaBaharAluloom",
+      "facebook": "https://www.facebook.com/"
+    }
   },
   {
     "name": "Ahmed",
     "position": "Developer",
     "image": "",
     "description": "I'm a web developer and software engineer student. I have 1 year experience and I like Karate.",
-    "reversed": false
+    "reversed": false,
+    "social_links": {
+      "github": "https://github.com/AhmedAlrahoo",
+      "facebook": "https://www.facebook.com/"
+    }
   }
 ]

From d6156c812204f406a7dbc1081955d7601944f02d Mon Sep 17 00:00:00 2001
From: RawandDev <rawand.200091384037@gmail.com>
Date: Sat, 6 Nov 2021 14:34:51 +0300
Subject: [PATCH 2/5] feat(rating): add rating system

---
 src/components/AddBookModal.jsx |   8 +-
 src/components/BookCard.jsx     | 154 ++++++++++++++++++++------------
 src/store/ratingsSlice.js       |  24 +++++
 3 files changed, 129 insertions(+), 57 deletions(-)
 create mode 100644 src/store/ratingsSlice.js

diff --git a/src/components/AddBookModal.jsx b/src/components/AddBookModal.jsx
index 4cc3095..c1e0825 100644
--- a/src/components/AddBookModal.jsx
+++ b/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, storage } from "../firebase";
 import { useDispatch, useSelector } from "react-redux";
 import { addBooks, emptyBooks } from "../store/books/booksSlice";
@@ -93,7 +93,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,
@@ -102,6 +102,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 }));
diff --git a/src/components/BookCard.jsx b/src/components/BookCard.jsx
index ccceb9d..2e30989 100644
--- a/src/components/BookCard.jsx
+++ b/src/components/BookCard.jsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-// import ReactStars from "react-rating-stars-component";
-import { Link, useHistory } from "react-router-dom";
+import React, { useState, useEffect, useCallback } from "react";
+import ReactStars from "react-rating-stars-component";
+import { Link } from "react-router-dom";
 import { BOOKS_ROUTE } from "../routes";
-import { AiOutlineHeart, AiFillHeart, AiOutlineDelete } from "react-icons/ai";
+import { AiOutlineHeart, AiFillHeart } from "react-icons/ai";
 import {
   doc,
   getDoc,
@@ -17,17 +17,18 @@ import {
   setRemoveFavorites,
 } from "../store/users/userSlice";
 import { useDispatch, useSelector } from "react-redux";
+import { setRatings } from "../store/ratingsSlice";
 import { changeDropdown } from "../store/dropdownSlice";
-import { useTranslation } from "react-i18next";
-import MoonLoader from "react-spinners/MoonLoader";
-import { deleteBook } from "../store/books/booksSlice";
+import { useHistory } from "react-router-dom";
+import { toast } from "react-toastify";
 
-function BookCard({ user_uid, image, genres, title, price, rating, id }) {
+function BookCard({ image, genres, title, price, rating, id }) {
   const user = useSelector(selectorUser);
   const dispatch = useDispatch();
 
-  const { t } = useTranslation();
-  const [isLoading, setIsLoading] = useState(false);
+  const [currentRating, setCurrentRating] = useState(rating);
+
+  const books = useSelector((state) => state.books);
 
   const history = useHistory();
 
@@ -41,7 +42,7 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
       <button
         key={index}
         className="text-xs bg-primary rounded-2xl px-2.5 py-0.5 m-0.5 mt-1 transform transition ease-in duration-100 hover:-translate-y-0.5 opacity-80"
-        onClick={() => handleClick(genre.value)}
+        onClick={() => handleClick(genre.label)}
       >
         {genre.label}
       </button>
@@ -50,7 +51,6 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
 
   const handleFav = async (id) => {
     if (!user.favorites.map((book) => book.id).includes(Number(id))) {
-      setIsLoading(true);
       const docRef = doc(db, "books", `${id}`);
       const docSnap = await getDoc(docRef);
       if (docSnap.exists()) {
@@ -62,11 +62,11 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
         const favDocSnap = await getDoc(favBooksRef);
         if (favDocSnap.exists()) {
           dispatch(setFavorites(favDocSnap.data().favorites));
-          setIsLoading(false);
         }
+      } else {
+        console.log("No such a doc");
       }
     } else {
-      setIsLoading(true);
       const docRef = doc(db, "books", `${id}`);
       const docSnap = await getDoc(docRef);
       if (docSnap.exists()) {
@@ -75,11 +75,73 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
           favorites: arrayRemove(docSnap.data()),
         });
         dispatch(setRemoveFavorites(id));
-        setIsLoading(false);
       }
     }
   };
 
+  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,
+            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 md:w-60 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">
@@ -92,53 +154,35 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
 
         <div className="flex justify-between items-center px-1 pt-2">
           <h1 className="font-semibold">{title}</h1>
-          {user.userName && (
-            <>
-              {user.favorites?.map((book) => book.id).includes(Number(id)) ? (
-                <>
-                  {isLoading ? (
-                    <MoonLoader size={20} color={"blue"} loading={isLoading} />
-                  ) : (
-                    <AiFillHeart
-                      onClick={() => handleFav(id)}
-                      size={29}
-                      className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
-                      color="red"
-                    />
-                  )}
-                </>
-              ) : (
-                <>
-                  {isLoading ? (
-                    <MoonLoader size={20} color={"blue"} />
-                  ) : (
-                    <AiOutlineHeart
-                      onClick={() => handleFav(id)}
-                      size={29}
-                      className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
-                      color="black"
-                    />
-                  )}
-                </>
-              )}
-            </>
-          )}
-        </div>
-        <div className="flex justify-between items-center pr-1">
-          {user_uid ? (
-            <AiOutlineDelete
-              className="cursor-pointer"
-              onClick={() => dispatch(deleteBook(id, user_uid))}
+          {user.favorites?.map((book) => book.id).includes(Number(id)) ? (
+            <AiFillHeart
+              onClick={() => handleFav(id)}
               size={29}
+              className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
+              color={"red"}
             />
           ) : (
-            <></>
+            <AiOutlineHeart
+              onClick={() => handleFav(id)}
+              size={29}
+              className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
+            />
           )}
         </div>
-        <p className="font-semibold pl-1"> $ {price}</p>
+        <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>
+        <p className="font-semibold pl-1">{price}</p>
         <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")}
+            Buy
           </button>
         </Link>
       </div>
diff --git a/src/store/ratingsSlice.js b/src/store/ratingsSlice.js
new file mode 100644
index 0000000..9785049
--- /dev/null
+++ b/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;

From e840a2db413a7c384d9ae6d91f32694621eac8f9 Mon Sep 17 00:00:00 2001
From: RawandDev <rawand.200091384037@gmail.com>
Date: Sat, 6 Nov 2021 15:31:50 +0300
Subject: [PATCH 3/5] refactor(bookcard): refactor bookcard component to latest
 changes

---
 src/components/BookCard.jsx | 76 ++++++++++++++++++++++++++-----------
 1 file changed, 53 insertions(+), 23 deletions(-)

diff --git a/src/components/BookCard.jsx b/src/components/BookCard.jsx
index 2e30989..d074639 100644
--- a/src/components/BookCard.jsx
+++ b/src/components/BookCard.jsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import ReactStars from "react-rating-stars-component";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { BOOKS_ROUTE } from "../routes";
-import { AiOutlineHeart, AiFillHeart } from "react-icons/ai";
+import { AiOutlineHeart, AiFillHeart, AiOutlineDelete } from "react-icons/ai";
 import {
   doc,
   getDoc,
@@ -17,18 +17,19 @@ import {
   setRemoveFavorites,
 } from "../store/users/userSlice";
 import { useDispatch, useSelector } from "react-redux";
-import { setRatings } from "../store/ratingsSlice";
 import { changeDropdown } from "../store/dropdownSlice";
-import { useHistory } from "react-router-dom";
+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({ image, genres, title, price, rating, id }) {
+function BookCard({ user_uid, image, genres, title, price, rating, id }) {
   const user = useSelector(selectorUser);
   const dispatch = useDispatch();
 
-  const [currentRating, setCurrentRating] = useState(rating);
-
-  const books = useSelector((state) => state.books);
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
 
   const history = useHistory();
 
@@ -37,12 +38,15 @@ function BookCard({ 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
         key={index}
         className="text-xs bg-primary rounded-2xl px-2.5 py-0.5 m-0.5 mt-1 transform transition ease-in duration-100 hover:-translate-y-0.5 opacity-80"
-        onClick={() => handleClick(genre.label)}
+        onClick={() => handleClick(genre.value)}
       >
         {genre.label}
       </button>
@@ -51,6 +55,7 @@ function BookCard({ image, genres, title, price, rating, id }) {
 
   const handleFav = async (id) => {
     if (!user.favorites.map((book) => book.id).includes(Number(id))) {
+      setIsLoading(true);
       const docRef = doc(db, "books", `${id}`);
       const docSnap = await getDoc(docRef);
       if (docSnap.exists()) {
@@ -62,11 +67,11 @@ function BookCard({ image, genres, title, price, rating, id }) {
         const favDocSnap = await getDoc(favBooksRef);
         if (favDocSnap.exists()) {
           dispatch(setFavorites(favDocSnap.data().favorites));
+          setIsLoading(false);
         }
-      } else {
-        console.log("No such a doc");
       }
     } else {
+      setIsLoading(true);
       const docRef = doc(db, "books", `${id}`);
       const docSnap = await getDoc(docRef);
       if (docSnap.exists()) {
@@ -75,6 +80,7 @@ function BookCard({ image, genres, title, price, rating, id }) {
           favorites: arrayRemove(docSnap.data()),
         });
         dispatch(setRemoveFavorites(id));
+        setIsLoading(false);
       }
     }
   };
@@ -155,18 +161,42 @@ function BookCard({ image, genres, title, price, rating, id }) {
         <div className="flex justify-between items-center px-1 pt-2">
           <h1 className="font-semibold">{title}</h1>
           {user.favorites?.map((book) => book.id).includes(Number(id)) ? (
-            <AiFillHeart
-              onClick={() => handleFav(id)}
-              size={29}
-              className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
-              color={"red"}
-            />
+            <>
+              {isLoading ? (
+                <MoonLoader size={20} color={"blue"} loading={isLoading} />
+              ) : (
+                <AiFillHeart
+                  onClick={() => handleFav(id)}
+                  size={29}
+                  className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
+                  color="red"
+                />
+              )}
+            </>
           ) : (
-            <AiOutlineHeart
-              onClick={() => handleFav(id)}
+            <>
+              {isLoading ? (
+                <MoonLoader size={20} color={"blue"} />
+              ) : (
+                <AiOutlineHeart
+                  onClick={() => handleFav(id)}
+                  size={29}
+                  className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
+                  color="black"
+                />
+              )}
+            </>
+          )}
+        </div>
+        <div className="flex justify-between items-center pr-1">
+          {user_uid ? (
+            <AiOutlineDelete
+              className="cursor-pointer"
+              onClick={() => dispatch(deleteBook(id, user_uid))}
               size={29}
-              className="transform transition ease-in duration-100 hover:-translate-y-0.5 cursor-pointer"
             />
+          ) : (
+            <></>
           )}
         </div>
         <div className="flex justify-start items-center">
@@ -179,10 +209,10 @@ function BookCard({ image, genres, title, price, rating, id }) {
           />
           <span className="pl-1 mt-1">{currentRating}</span>
         </div>
-        <p className="font-semibold pl-1">{price}</p>
+        <p className="font-semibold pl-1"> $ {price}</p>
         <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">
-            Buy
+            {t("buy")}
           </button>
         </Link>
       </div>

From c667ed41bd1eacf6836d20d95a3b02145da406a5 Mon Sep 17 00:00:00 2001
From: RawandDev <rawand.200091384037@gmail.com>
Date: Sat, 6 Nov 2021 16:26:47 +0300
Subject: [PATCH 4/5] feat(total): add total rating with toFixed

---
 src/components/BookCard.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BookCard.jsx b/src/components/BookCard.jsx
index d074639..b82d89b 100644
--- a/src/components/BookCard.jsx
+++ b/src/components/BookCard.jsx
@@ -107,7 +107,7 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
       } else {
         if (totalRating && totalRaters && rating) {
           await updateDoc(washingtonRef, {
-            rating: rating,
+            rating: rating.toFixed(1),
             totalRating: totalRating,
             totalRaters: totalRaters,
             ratersUID: arrayUnion(user.uid),
@@ -207,7 +207,7 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
             value={currentRating}
             onChange={(newR) => setRating(newR)}
           />
-          <span className="pl-1 mt-1">{currentRating}</span>
+          <span className="pl-1 mt-1">{currentRating}(5)</span>
         </div>
         <p className="font-semibold pl-1"> $ {price}</p>
         <Link to={`${BOOKS_ROUTE}/${id}`} className="text-white font-semibold">

From 643e66b462952598cb9806e1be8cdf78dabec800 Mon Sep 17 00:00:00 2001
From: RawandDev <rawand.200091384037@gmail.com>
Date: Mon, 8 Nov 2021 21:51:51 +0300
Subject: [PATCH 5/5] refactor(codes): refactor by deleting extra price with
 total rating

---
 src/components/BookCard.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/BookCard.jsx b/src/components/BookCard.jsx
index 245e021..d4f5889 100644
--- a/src/components/BookCard.jsx
+++ b/src/components/BookCard.jsx
@@ -210,9 +210,8 @@ function BookCard({ user_uid, image, genres, title, price, rating, id }) {
             value={currentRating}
             onChange={(newR) => setRating(newR)}
           />
-          <span className="pl-1 mt-1">{currentRating}(5)</span>
+          <span className="pl-1 mt-1">{currentRating}</span>
         </div>
-        <p className="font-semibold pl-1"> $ {price}</p>
         <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")}