improved reviews (#67)

* changed logo click redirection

* Update FavouriteDropdown.jsx

* small bug fix

Author: Dinoxh

my-app/firebase.js

@@ -183,21 +183,21 @@ export async function addReviewForCourse(courseCode, review) {
 
 
 export async function getReviewsForCourse(courseCode) {
-    const reviewsRef = ref(db, `reviews/${courseCode}`);
-    const snapshot = await get(reviewsRef);
-    if (!snapshot.exists()) return [];
-
-    const reviews = [];
-    snapshot.forEach(childSnapshot => {
-        reviews.push({
-            id: childSnapshot.key,  // Firebase-generated unique key
-            userName: childSnapshot.val().userName,
-            text: childSnapshot.val().text
-        });
-    });
-    return reviews;
+	const reviewsRef = ref(db, `reviews/${courseCode}`);
+	const snapshot = await get(reviewsRef);
+	if (!snapshot.exists()) return [];
+
+	const reviews = [];
+	snapshot.forEach(childSnapshot => {
+		reviews.push({
+			id: childSnapshot.key,
+			...childSnapshot.val()
+		});
+	});
+	return reviews;
 }
 
 
 
 
+

my-app/src/presenters/ReviewPresenter.jsx

@@ -2,12 +2,19 @@ import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { ReviewView } from '../views/ReviewView.jsx';
 
-
 export const ReviewPresenter = observer(({ model, course }) => {
     const [reviews, setReviews] = useState([]);
-    const [newReview, setNewReview] = useState("");
+    const [formData, setFormData] = useState({
+        text: "",
+        overallRating: 0,
+        difficultyRating: 0,
+        professorName: "",
+        professorRating: 0,
+        grade: "",
+        recommend: false,
+        avgRating: 0,
+    });
 
-    //fetch reviews when the course code changes
     useEffect(() => {
         async function fetchReviews() {
             const data = await model.getReviews(course.code);
@@ -16,31 +23,37 @@ export const ReviewPresenter = observer(({ model, course }) => {
         fetchReviews();
     }, [course.code, model]);
 
-    
     const handleReviewSubmit = async () => {
-        if (newReview.trim()) {
+        if (formData.text.trim()) {
             const review = {
                 userName: model.user?.displayName || "Anonymous",
-                text: newReview,
-                timestamp: Date.now(), //timestamp
+                timestamp: Date.now(),
+                ...formData,
             };
             await model.addReview(course.code, review);
-            //fetch and update the reviews after submitting
             const updatedReviews = await model.getReviews(course.code);
             setReviews(updatedReviews);
-            setNewReview(""); //clear text bar
+            setFormData({
+                text: "",
+                overallRating: 0,
+                difficultyRating: 0,
+                professor: "",
+                grade: "",
+                recommended: false,
+                avgRating: 0,
+            });
         }
     };
-    
+
 
     return (
         <ReviewView
             course={course}
             reviews={reviews}
-            newReview={newReview}
-            setNewReview={setNewReview}
+            formData={formData}
+            setFormData={setFormData}
             handleReviewSubmit={handleReviewSubmit}
         />
+
     );
 });
-

my-app/src/views/Components/RatingComponent.jsx

@@ -1,20 +1,26 @@
-import React, {useState} from 'react';
+import React from 'react';
 import StarComponent from "./StarComponent.jsx";
 
-const RatingComponent = () => {
-    const [rating, setRating] = useState(0);
-
+const RatingComponent = ({ value = 0, onChange, readOnly = false }) => {
     const handleRating = (starIndex, isLeftHalf) => {
+        if (readOnly) return; // if readOnly, do nothing
         const newRating = isLeftHalf ? starIndex + 0.5 : starIndex + 1;
-        setRating(newRating);
+        onChange(newRating);
     }
 
     return (
-        <div className="font-kanit flex justify-center items-center bg-transparent ">
-                <div className="flex justify-center mb-4 gap-1 sm:gap-2">
-                    {Array.from({length: 5}, (_, index) => (
-                        <StarComponent key={index} index={index} rating={rating} onRatingChange={handleRating}/>))}
-                </div>
+        <div className="font-kanit flex justify-center items-center bg-transparent">
+            <div className="flex justify-center mb-4 gap-1 sm:gap-2">
+                {Array.from({length: 5}, (_, index) => (
+                    <StarComponent
+                        key={index}
+                        index={index}
+                        rating={value}
+                        onRatingChange={handleRating}
+                        readOnly={readOnly}
+                    />
+                ))}
+            </div>
         </div>
     );
 }

my-app/src/views/Components/StarComponent.jsx

@@ -1,30 +1,39 @@
 import React from 'react';
 
-export const StarComponent = ({ index, rating, onRatingChange, onHover }) => {
-    const handleLeftClick = () => onRatingChange(index, false);
-    const handleRightClick = () => onRatingChange(index, true);
+const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = false }) => {
+    const handleLeftClick = () => {
+        if (!readOnly) onRatingChange(index, true);
+    };
+
+    const handleRightClick = () => {
+        if (!readOnly) onRatingChange(index, false);
+    };
 
     const isFullStar = rating >= index + 1;
     const isHalfStar = rating >= index + 0.5 && rating < index + 1;
     const starClass = isFullStar ? "bxs-star" : isHalfStar ? "bxs-star-half" : "bx-star";
 
     return (
         <div
-            className="relative group"
-            onMouseEnter={() => onHover(index + 1)}
-            onMouseLeave={() => onHover(0)}
+            className={`relative group ${readOnly ? 'cursor-default' : 'cursor-pointer'}`}
+            onMouseEnter={() => !readOnly && onHover && onHover(index + 1)}
+            onMouseLeave={() => !readOnly && onHover && onHover(0)}
         >
             <i
-                className={`bx ${starClass} text-5xl text-violet-500 t-500 transition-transform duration-200 group-hover:scale-110`}
+                className={`bx ${starClass} text-5xl text-violet-500 t-500 transition-transform duration-200 ${!readOnly && 'group-hover:scale-110'}`}
             ></i>
-            <button
-                className="absolute top-0 left-1/2 w-1/2 h-full cursor-pointer"
-                onClick={handleLeftClick}
-            />
-            <button
-                className="absolute top-0 right-1/2 w-1/2 h-full cursor-pointer"
-                onClick={handleRightClick}
-            />
+            {!readOnly && (
+                <>
+                    <button
+                        className="absolute top-0 left-1/2 w-1/2 h-full cursor-pointer"
+                        onClick={handleLeftClick}
+                    />
+                    <button
+                        className="absolute top-0 right-1/2 w-1/2 h-full cursor-pointer"
+                        onClick={handleRightClick}
+                    />
+                </>
+            )}
         </div>
     );
 };