Basic comment function to each reviews

my-app/firebase.js

@@ -3,6 +3,7 @@ import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
 import { getFunctions, httpsCallable } from 'firebase/functions';
 import { get, getDatabase, ref, set, onValue, onChildRemoved, onChildAdded, runTransaction } from "firebase/database";
 import { reaction, toJS } from "mobx";
+import { push } from "firebase/database";
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -368,3 +369,33 @@ export async function getReviewsForCourse(courseCode) {
 	});
 	return reviews;
 }
+/**
+ * Add a comment to a specific review
+ * @param {string} courseCode - Course code (e.g. "A11HIB")
+ * @param {string} reviewUserId - The user ID of the person who wrote the main review
+ * @param {Object} commentObj - Object with { userName, text, timestamp }
+ */
+export async function addCommentToReview(courseCode, reviewUserId, commentObj) {
+	const commentsRef = ref(db, `reviews/${courseCode}/${reviewUserId}/comments`);
+	await push(commentsRef, commentObj);
+}
+
+/**
+ * Get comments for a specific review
+ * @param {string} courseCode 
+ * @param {string} reviewUserId 
+ * @returns {Promise<Array<Object>>} Array of comments: { id, userName, text, timestamp }
+ */
+export async function getCommentsForReview(courseCode, reviewUserId) {
+	const commentsRef = ref(db, `reviews/${courseCode}/${reviewUserId}/comments`);
+	const snapshot = await get(commentsRef);
+	if (!snapshot.exists()) return [];
+	const comments = [];
+	snapshot.forEach((childSnapshot) => {
+		comments.push({
+			id: childSnapshot.key,
+			...childSnapshot.val()
+		});
+	});
+	return comments;
+}

my-app/firebase_rules.json

@@ -1,42 +1,52 @@
 {
-    "rules": {
-      // Courses and Metadata
-      "courses": {
-        ".read": true,
-        ".write": "auth != null && (auth.uid === 'adminuid' || auth.uid === 'adminuid')"
-      },
-      "metadata": {
-        ".read": true,
-        ".write": "auth != null && (auth.uid === 'adminuid' || auth.uid === 'adminuid')"
-      },
-      "departments": {
+  "rules": {
+    // Courses and Metadata
+    "courses": {
       ".read": true,
-      ".write": "auth != null && (auth.uid === 'adminuid' || auth.uid === 'adminuid')"
-      },
-      "locations": {
+      ".write": "auth != null && auth.uid === 'adminuid'"
+    },
+    "metadata": {
+      ".read": true,
+      ".write": "auth != null && auth.uid === 'adminuid'"
+    },
+    "departments": {
+      ".read": true,
+      ".write": "auth != null && auth.uid === 'adminuid'"
+    },
+    "locations": {
+      ".read": true,
+      ".write": "auth != null && auth.uid === 'adminuid'"
+    },
+
+    // Reviews and Comments
+    "reviews": {
       ".read": true,
-      ".write": "auth != null && (auth.uid === 'adminuid' || auth.uid === 'adminuid')"
-      },
-
-      // Reviews
-      "reviews": {
-      ".read":true,
       "$courseCode": {
-          "$userID": {
-            ".write": "auth != null && (auth.uid === $userID || data.child('uid').val() === auth.uid || !data.exists())",
-            ".validate": "newData.hasChildren(['text', 'timestamp']) &&
-                          newData.child('text').isString() &&
-                          newData.child('timestamp').isNumber()"
-          }
-        }
-      },
-
-      // Users
-      "users": {
         "$userID": {
-          ".read": "auth != null && auth.uid === $userID",
-          ".write": "auth != null && auth.uid === $userID"
+          // Only the review owner can write the main review fields (not including comments)
+          ".write": "auth != null && (auth.uid === $userID)",
+
+          // Allow anyone to write a comment
+          "comments": {
+            ".read": true,
+            "$commentId": {
+              ".write": "auth != null",
+              ".validate": "newData.hasChildren(['userName', 'text', 'timestamp']) &&
+                            newData.child('userName').isString() &&
+                            newData.child('text').isString() &&
+                            newData.child('timestamp').isNumber()"
+            }
+          }
         }
       }
+    },
+
+    // Users
+    "users": {
+      "$userID": {
+        ".read": "auth != null && auth.uid === $userID",
+        ".write": "auth != null && auth.uid === $userID"
+      }
     }
-  }
+  }
+}

my-app/src/model.js

@@ -190,7 +190,18 @@ export const model = {
 
     async getReviews(courseCode) {
         try {
-            return await getReviewsForCourse(courseCode);
+            const rawReviews = await getReviewsForCourse(courseCode);
+            if (!Array.isArray(rawReviews)) return [];
+
+            const enriched = rawReviews.map((review) => {
+                return {
+                    ...review,
+                    uid: review.uid || review.id || "",       
+                    courseCode: courseCode || "",             
+                };
+            });
+
+            return enriched;
         } catch (error) {
             console.error("Error fetching reviews:", error);
             return [];

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

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import RatingComponent from "./RatingComponent.jsx";
+import { model } from "../../model.js"; // Adjust the path if needed
+import { addReviewForCourse } from "../../firebase"; // Adjust the path if needed
+
+function CommentTree({ courseCode, comment, level = 0 }) {
+  const [showReply, setShowReply] = useState(false);
+  const [replyText, setReplyText] = useState("");
+
+  const handleReplySubmit = async () => {
+    if (replyText.trim().length === 0) return;
+
+    const reply = {
+      userName: model.user?.displayName || "Anonymous",
+      text: replyText,
+      timestamp: Date.now(),
+      overallRating: 0,
+      difficultyRating: 0,
+      professorRating: 0,
+      professorName: "",
+      grade: "",
+      recommend: null,
+    };
+
+    await addReviewForCourse(courseCode, reply, comment.id);
+    window.location.reload(); // quick reload for now; optional optimization later
+  };
+
+  return (
+    <div className="ml-4 mt-4 border-l pl-4 border-gray-300">
+      <div className="bg-gray-50 p-3 rounded-md shadow-sm">
+        <div className="flex justify-between items-center mb-1">
+          <p className="font-semibold text-gray-800">{comment.userName}</p>
+          <p className="text-xs text-gray-500">
+            {new Date(comment.timestamp).toLocaleDateString()}
+          </p>
+        </div>
+
+        <p className="text-sm text-gray-700 mb-1">{comment.text}</p>
+
+        <button
+          className="text-blue-500 text-sm hover:underline"
+          onClick={() => setShowReply(!showReply)}
+        >
+          {showReply ? "Cancel" : "Reply"}
+        </button>
+
+        {showReply && (
+          <div className="mt-2">
+            <textarea
+              className="w-full border border-gray-300 rounded-md p-2 text-sm"
+              placeholder="Write your reply..."
+              value={replyText}
+              onChange={(e) => setReplyText(e.target.value)}
+            />
+            <button
+              onClick={handleReplySubmit}
+              className="mt-1 px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
+            >
+              Post Reply
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Recursive rendering of replies */}
+      {comment.replies && comment.replies.length > 0 && (
+        <div className="mt-2 space-y-2">
+          {comment.replies.map((child) => (
+            <CommentTree
+              key={child.id}
+              courseCode={courseCode}
+              comment={child}
+              level={level + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CommentTree;