فیلم 14

frontend/src/actions/productActions.js

@@ -19,7 +19,7 @@ export const listProducts = () => async (dispatch) => {
   } catch (khata) {
       dispatch({
           type: PRODUCT_LIST_FAIL,
-          paylaod:khata.message
+          payload:khata.message
       })
   }
 };

frontend/src/components/Product.js

@@ -11,7 +11,7 @@ export default function Product(props) {
         <Link to={`/product/${product._id}`}>
           <h2>{product.name}</h2>
         </Link>
-        <Rating></Rating>
+        <Rating rating={product.rating} numReviews={product.numReviews}></Rating>
         <div className="price">{product.price}</div>
       </div>
     </div>

frontend/src/components/Rating.js

-export default function Rating(){
-    return (
-        <div className="rating">
-            <span>
-              <i className="fa fa-star"></i>
-            </span>
-            <span>
-              <i className="fa fa-star"></i>
-            </span>
-            <span>
-              <i className="fa fa-star"></i>
-            </span>
-            <span>
-              <i className="fa fa-star"></i>
-            </span>
-            <span>
-              <i className="fa fa-star"></i>
-            </span>
-          </div>
-    )
-}
\ No newline at end of file
+export default function Rating(props) {
+  const { rating, numReviews } = props;
+  return (
+    <div className="rating">
+      <span>
+        <i
+          className={
+            rating >= 1
+              ? "fa fa-star"
+              : rating >= 0.5
+              ? "fa fa-star-half-o"
+              : "fa fa-star-o"
+          }
+        ></i>
+      </span>
+      <span>
+        <i
+          className={
+            rating >= 2
+              ? "fa fa-star"
+              : rating >= 1.5
+              ? "fa fa-star-half-o"
+              : "fa fa-star-o"
+          }
+        ></i>
+      </span>
+      <span>
+        <i
+          className={
+            rating >= 3
+              ? "fa fa-star"
+              : rating >= 2.5
+              ? "fa fa-star-half-o"
+              : "fa fa-star-o"
+          }
+        ></i>
+      </span>
+      <span>
+        <i
+          className={
+            rating >= 4
+              ? "fa fa-star"
+              : rating >= 3.5
+              ? "fa fa-star-half-o"
+              : "fa fa-star-o"
+          }
+        ></i>
+      </span>
+      <span>
+        <i
+          className={
+            rating >= 5
+              ? "fa fa-star"
+              : rating >= 4.5
+              ? "fa fa-star-half-o"
+              : "fa fa-star-o"
+          }
+        ></i>
+      </span>
+      <span>{numReviews + " reviews"}</span>
+    </div>
+  );
+}