From 136fa12911107d143dfbc1e5003494378843e18d Mon Sep 17 00:00:00 2001
From: Khalid El Fasely <76157761+khalidfasely@users.noreply.github.com>
Date: Sat, 17 Sep 2022 18:04:10 +0100
Subject: [PATCH] Update Rating.js

---
 frontend/src/components/Rating.js | 69 ++++++-------------------------
 1 file changed, 12 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/Rating.js b/frontend/src/components/Rating.js
index d12832703..622a64bce 100644
--- a/frontend/src/components/Rating.js
+++ b/frontend/src/components/Rating.js
@@ -1,66 +1,21 @@
 import React from 'react'
 
 function Rating({ value, text, color }) {
+    const stars = [1, 2, 3, 4, 5];
     return (
         <div className="rating">
             <span>
-                <i style={{ color }} className={
-                    value >= 1
-                        ? 'fas fa-star'
-                        : value >= 0.5
-                            ? 'fas fa-star-half-alt'
-                            : 'far fa-star'
-                }>
-
-                </i>
-            </span>
-
-            <span>
-                <i style={{ color }} className={
-                    value >= 2
-                        ? 'fas fa-star'
-                        : value >= 1.5
-                            ? 'fas fa-star-half-alt'
-                            : 'far fa-star'
-                }>
-
-                </i>
-            </span>
-
-            <span>
-                <i style={{ color }} className={
-                    value >= 3
-                        ? 'fas fa-star'
-                        : value >= 2.5
-                            ? 'fas fa-star-half-alt'
-                            : 'far fa-star'
-                }>
-
-                </i>
-            </span>
-
-            <span>
-                <i style={{ color }} className={
-                    value >= 4
-                        ? 'fas fa-star'
-                        : value >= 3.5
-                            ? 'fas fa-star-half-alt'
-                            : 'far fa-star'
-                }>
-
-                </i>
-            </span>
-
-            <span>
-                <i style={{ color }} className={
-                    value >= 5
-                        ? 'fas fa-star'
-                        : value >= 4.5
-                            ? 'fas fa-star-half-alt'
-                            : 'far fa-star'
-                }>
-
-                </i>
+                {
+                    stars.map(star => (
+                        <i style={{ color }} className={
+                            value >= star
+                                ? 'fas fa-star'
+                                : value >= star - 0.5
+                                    ? 'fas fa-star-half-alt'
+                                    : 'far fa-star'
+                        }></i>
+                    ))
+                }
             </span>
 
             <span>{text && text}</span>