added bars for difficulty + workload ratings

client/index.d.ts

@@ -0,0 +1,2 @@
+declare module '*.svg';
+declare module '*.png';

client/src/modules/Admin/Components/Admin.tsx

@@ -7,7 +7,7 @@ import { Review } from 'common';
 
 import { useAuthMandatoryLogin } from '../../../auth/auth_utils';
 
-import UpdateReview from './AdminReview';
+import UpdateReview from './AdminReview.js';
 import Stats from './Stats';
 import ManageAdminModal from './ManageAdminModal';
 

client/src/modules/Course/Components/Course.tsx

@@ -36,7 +36,7 @@ export const Course = () => {
   const { number, subject, input } = useParams<any>();
 
   const [selectedClass, setSelectedClass] = useState<Class>();
-  const [courseReviews, setCourseReviews] = useState<Review[]>();
+  const [courseReviews, setCourseReviews] = useState<Review[]>([]);
   const [pageStatus, setPageStatus] = useState<PageStatus>(PageStatus.Loading);
   const [scrolled, setScrolled] = useState(false);
 

client/src/modules/Course/Components/Gauges.tsx

@@ -20,10 +20,10 @@ type GaugesProps = {
 }
 
 const Gauges = ({overall, difficulty, workload}: GaugesProps) => {
-    const [stars, setStars] = useState([])
-    const [overallEmote, setOverallEmote] = useState();
-    const [difficultyEmote, setDifficultyEmote] = useState();
-    const [workloadEmote, setWorkloadEmote] = useState();
+    const [stars, setStars] = useState<any[]>([])
+    const [overallEmote, setOverallEmote] = useState<any>();
+    const [difficultyEmote, setDifficultyEmote] = useState<any>();
+    const [workloadEmote, setWorkloadEmote] = useState<any>();
 
     useEffect(() => {
         if (overall) {
@@ -61,41 +61,90 @@ const Gauges = ({overall, difficulty, workload}: GaugesProps) => {
             }
         } else {
             setStars([Gray, Gray, Gray, Gray, Gray])
+            setOverallEmote(undefined)
         }
     }, [overall])
 
+    useEffect(() => {
+        if (difficulty) {
+            if (0 <= difficulty && difficulty < 3) {
+                setDifficultyEmote(SadFace)
+            } else if (3 <= difficulty && difficulty < 3.8) {
+                setDifficultyEmote(MehFace)
+            } else {
+                setDifficultyEmote(HappyFace)
+            }
+        } else {
+            setDifficultyEmote(undefined)
+        }
+    }, [difficulty])
+
+    useEffect(() => {
+        if (workload) {
+            if (0 <= workload && workload < 3) {
+                setWorkloadEmote(SadFace)
+            } else if (3 <= workload && workload < 3.8) {
+                setWorkloadEmote(MehFace)
+            } else {
+                setWorkloadEmote(HappyFace)
+            }
+        } else {
+            setWorkloadEmote(undefined)
+        }
+    }, [workload])
+
     return (
         <div className={styles.container}>
             <div className={styles.overall}>
                 <div className={styles.overallScore}>
-                    {overall ? overall.toPrecision(2) : "0.0"}
-                    <img src={overallEmote}/>
+                    {overall ? overall.toPrecision(2) : "--"}
+                    <img
+                        src={overallEmote}
+                        alt='overall-rating-emote'
+                    />
                 </div>
                 <div className={styles.stars}>
                     {stars.map((star) => {
-                        return <img src={star}></img>
+                        return <img 
+                                src={star}
+                                alt="rating-star"
+                                />
                     })}
                 </div>
                 <div>
                     Overall Satisfaction
                 </div>
             </div>
             <div className={styles.ratings}>
-                <div className={styles.bars}>
-                    <div> Difficulty </div>
-                    <div>
-                        Bars
+                <div className={styles.horizontal}>
+                    <div className={styles.category}> Difficulty </div>
+                    <div className={styles.bars}>
+                        <div className={styles.bar}/>
+                        <div className={styles.bar}/>
+                        <div className={styles.bar}/>
+                        <div className={styles.bar}/>
+                        <div className={styles.bar}/>
                     </div>
-                    <div> {difficulty ? difficulty.toPrecision(2) : "0.0"} </div>
-                    <img src={difficultyEmote}/>
+                    <div className={styles.ratingNum}> {difficulty ? difficulty.toPrecision(2) : "-"} </div>
+                    <img
+                        src={difficultyEmote}
+                        alt="difficulty-rating-emote"
+                    />
                 </div>
-                <div className={styles.bars}>
-                    <div> Workload </div>
-                    <div>
-                        Bars
+                <div className={styles.horizontal}>
+                    <div className={styles.category}> Workload </div>
+                    <div className={styles.bars}>
+                        <span className={styles.bar}/>
+                        <span className={styles.bar}/>
+                        <span className={styles.bar}/>
+                        <span className={styles.bar}/>
+                        <span className={styles.bar}/>
                     </div>
-                    <div> {workload ? workload.toPrecision(2) : "0.0"} </div>
-                    <img src={workloadEmote}/>
+                    <div className={styles.ratingNum}> {workload ? workload.toPrecision(2) : "-"} </div>
+                    <img
+                        src={workloadEmote}
+                        alt="workload-rating-emote"
+                    />
                 </div>
             </div>
         </div>

client/src/modules/Course/Styles/Course.module.css

@@ -100,7 +100,7 @@
   }
 
   .reviewscontainer {
-    padding: 5%;
+    padding: 24px 0px;
   }
 
   .classinfo {

client/src/modules/Course/Styles/Gauges.module.css

@@ -43,13 +43,39 @@
     flex-flow: column nowrap;
     justify-content: center;
     height: 82px;
-    gap: 24px;
+    gap: 20px;
 }
 
-.bars {
+.horizontal {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
+}
+
+.category {
+    min-width: 60px;
+}
+
+.bars {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.bar {
+    height: 8px;
+    width: 40px;
+    border-radius: 4px;
+    background-color: var(--clr-gray-200);
+
+    display: flex;
+}
+
+.ratingNum {
+    font-size: 20px;
+    font-weight: 590;
 }