From b2a466f06402331e62c3ba74928b974504bbb62a Mon Sep 17 00:00:00 2001
From: Frank-Gu-81 <gushaopengfrank@gmail.com>
Date: Fri, 17 Jan 2025 21:43:28 -0600
Subject: [PATCH] comment page template added

---
 src/App.jsx                        |  2 +
 src/components/Comment/Comment.jsx | 22 +++++++
 src/components/Post/Post.jsx       | 98 ++++++++++++++++--------------
 3 files changed, 76 insertions(+), 46 deletions(-)
 create mode 100644 src/components/Comment/Comment.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 73e0eda..caf304f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,7 @@ import Account from './components/Account/Account';
 import { Container } from '@mui/material';
 import SearchPage from './components/SearchPage/SearchPage';
 import RatingHistory from './components/RatingHistory/RatingHistory';
+import Comment from './components/Comment/Comment';
 
 const App = () => {
   // react hook to keep track of the user's authentication status
@@ -37,6 +38,7 @@ const App = () => {
             <Route path="/search" element={user ? <SearchPage /> : <Navigate to="/" />} />
             <Route path="/account" element={user ? <Account userName={user} userEmail={userEmail} profilePic={profilePic} /> : <Navigate to="/" />} />
             <Route path="/rating-history" element={user ? <RatingHistory userName={user} profilePic={profilePic} /> : <Navigate to="/" />} />
+            <Route path="/comment/:post_id" element={user ? <Comment userName={user} /> : <Navigate to="/" />} />
           </Routes>
         </Router>
     </Container>
diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.jsx
new file mode 100644
index 0000000..5a60210
--- /dev/null
+++ b/src/components/Comment/Comment.jsx
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "../../utilities/firebase";
+import { Container, Box, Stack, Typography } from '@mui/material';
+import AppBar from '../AppBar/AppBar';
+import NavigationBar from '../NavigationBar/NavigationBar';
+import Post from '../Post/Post';
+import { useParams } from 'react-router-dom';
+
+function Comment({ userName }) {
+    const post_id = useParams().post_id;
+    return (
+        <div>
+            <AppBar />
+            <Container maxWidth="sm">
+                <h1>Comments for {post_id}</h1>
+            </Container>
+        </div>
+    )
+}
+
+export default Comment
\ No newline at end of file
diff --git a/src/components/Post/Post.jsx b/src/components/Post/Post.jsx
index 5ca72f7..cb3f85f 100644
--- a/src/components/Post/Post.jsx
+++ b/src/components/Post/Post.jsx
@@ -9,6 +9,8 @@ import {
 import StarIcon from '@mui/icons-material/Star';
 import StarBorderIcon from '@mui/icons-material/StarBorder';
 import "./Post.css";
+import CardActionArea from '@mui/material/CardActionArea';
+import { useNavigate } from "react-router-dom";
 
 const courseClassMap = {
   CS: "chip-course-cs",
@@ -36,6 +38,7 @@ function getQuarterChipClass(quarter) {
 }
 
 function Post({ post, friends }) {
+  const navigate = useNavigate();
   const renderUserStars = (rating) => {
     const filledStars = Math.floor(rating);
     const starsArray = [];
@@ -49,62 +52,65 @@ function Post({ post, friends }) {
   };
 
   return (
-    <Card className="post-card">
-      <CardContent>
-        <div className="chip-box">
-          <Chip label={post.course_name} className={getCourseChipClass(post.course_name)} />
-          <Chip label={post.quarter} className={getQuarterChipClass(post.quarter)} />
-          <Chip label={post.professor} className="chip-third" />
-        </div>
+    // Q: how to make the card clickable and navigate to comment page?
+    <Card className="post-card" onClick={() => navigate(`/comment/${post.id}`)}>
+      <CardActionArea>
+        <CardContent>
+          <div className="chip-box">
+            <Chip label={post.course_name} className={getCourseChipClass(post.course_name)} />
+            <Chip label={post.quarter} className={getQuarterChipClass(post.quarter)} />
+            <Chip label={post.professor} className="chip-third" />
+          </div>
 
-        <div className="user-rating-section">
-          <Typography variant="body2" className="user-rating-label">
-            <strong>{post.username}</strong> rated this course
-          </Typography>
-          <div className="user-star-icons">
-            {renderUserStars(post.rating ?? 0)}
+          <div className="user-rating-section">
+            <Typography variant="body2" className="user-rating-label">
+              <strong>{post.username}</strong> rated this course
+            </Typography>
+            <div className="user-star-icons">
+              {renderUserStars(post.rating ?? 0)}
+            </div>
           </div>
-        </div>
 
-        <Typography variant="h5" component="div" className="post-title">
-          {post.title}
-        </Typography>
-        <Typography variant="body2" className="post-subheader">
-          Posted by <strong>{post.username}</strong> on {post.date.toDate().toDateString()}
-        </Typography>
-        <Typography variant="body1" className="post-body">
-          {post.body}
-        </Typography>
+          <Typography variant="h5" component="div" className="post-title">
+            {post.title}
+          </Typography>
+          <Typography variant="body2" className="post-subheader">
+            Posted by <strong>{post.username}</strong> on {post.date.toDate().toDateString()}
+          </Typography>
+          <Typography variant="body1" className="post-body">
+            {post.body}
+          </Typography>
 
-        <hr className="divider" />
+          <hr className="divider" />
 
-        <div className="bottom-row">
-          <div className="friends-section">
-            <Typography variant="body2" className="friends-text">
-              Friends who enrolled
-            </Typography>
-            <div className="friends-avatar">
-              {Object.values(friends).map((friend) => (
-                <Avatar key={friend} aria-label="recipe">
-                  {friend[0]}
-                </Avatar>
-              ))}
+          <div className="bottom-row">
+            <div className="friends-section">
+              <Typography variant="body2" className="friends-text">
+                Friends who enrolled
+              </Typography>
+              <div className="friends-avatar">
+                {Object.values(friends).map((friend) => (
+                  <Avatar key={friend} aria-label="recipe">
+                    {friend[0]}
+                  </Avatar>
+                ))}
+              </div>
             </div>
-          </div>
 
-          <div className="public-rating-container">
-            <Typography variant="body2" className="public-rating-label">
-              {(post.publicRatingCount ?? 1100).toLocaleString()} ratings
-            </Typography>
-            <div className="big-star-wrapper">
-              <StarIcon className="big-star-icon" />
-              <div className="big-star-text">
-                {post.publicRating ?? 3.5}
+            <div className="public-rating-container">
+              <Typography variant="body2" className="public-rating-label">
+                {(post.publicRatingCount ?? 1100).toLocaleString()} ratings
+              </Typography>
+              <div className="big-star-wrapper">
+                <StarIcon className="big-star-icon" />
+                <div className="big-star-text">
+                  {post.publicRating ?? 3.5}
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </CardContent>
+        </CardContent>
+      </CardActionArea>
     </Card>
   );
 }