From 515c0e4da24d942caf139b93638d5c55e57fc64b Mon Sep 17 00:00:00 2001
From: Frank-Gu-81 <gushaopengfrank@gmail.com>
Date: Sat, 18 Jan 2025 16:40:19 -0600
Subject: [PATCH] UI for comment page

---
 src/components/Comment/Comment.css |  12 ++
 src/components/Comment/Comment.jsx | 203 +++++++++++++++++++++++++----
 2 files changed, 190 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Comment/Comment.css

diff --git a/src/components/Comment/Comment.css b/src/components/Comment/Comment.css
new file mode 100644
index 0000000..d438362
--- /dev/null
+++ b/src/components/Comment/Comment.css
@@ -0,0 +1,12 @@
+.comment-box {
+    margin-top: 20px;
+}
+
+.comment-item {
+    padding: 10px 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.comments-list {
+    margin-top: 20px;
+}
diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.jsx
index 7b7b60f..8882848 100644
--- a/src/components/Comment/Comment.jsx
+++ b/src/components/Comment/Comment.jsx
@@ -1,24 +1,123 @@
+// import { useState, useEffect } from 'react';
+// import { collection, getDocs, addDoc } from "firebase/firestore";
+// import { db } from "../../utilities/firebase";
+// import { Container, Box, Stack, Typography, Button } from '@mui/material';
+// import TextField from '@mui/material/TextField';
+// import AppBar from '../AppBar/AppBar';
+// import NavigationBar from '../NavigationBar/NavigationBar';
+// // import TextFields from '@mui/icons-material/TextFields';
+// import Post from '../Post/Post';
+// import { useNavigate } from "react-router-dom";
+// import { useParams } from 'react-router-dom';
+
+// function Comment({ userName, profilePic }) {
+//     console.log("userName: ", userName);
+//     // console.log("profilePic: ", profilePic);
+//     const navigate = useNavigate();
+//     const post_id = useParams().post_id;
+//     const [postInfo, setPostInfo] = useState(null);
+//     const [body, setBody] = useState("");
+//     const [fillInFields, setFillInFields] = useState(false);
+
+//     async function getPostInfoFromDB(post_id) {
+//         try {
+//             const doc = await getDocs(collection(db, "posts"));
+//             const posts = [];
+//             doc.forEach((doc) => {
+//                 if (doc.id === post_id) {
+//                     posts.push({ id: doc.id, ...doc.data() });
+//                 }
+//             });
+//             return posts[0];
+//         } catch (error) {
+//             console.log("Error: ", error);
+//         }
+//     }
+
+//     useEffect(() => {
+//         async function fetchPosts() {
+//             try {
+//                 const fetchedPosts = await getPostInfoFromDB(post_id);
+//                 setPostInfo(fetchedPosts);
+//             }
+//             catch (error) {
+//                 console.error("Error fetching posts: ", error);
+//             }
+//         }
+//         fetchPosts();
+//     }, [post_id]);
+
+//     async function handleSubmit() {
+//         try {
+//             const collectionRef = collection(db, 'comments');
+//             const comment = {
+//                 post_id: post_id,
+//                 body: body,
+//                 username: userName.displayName,
+//                 profilePic: profilePic,
+//                 date: new Date()
+//             };
+
+//             if (!body) {
+//                 setFillInFields(true);
+//             } else {
+//                 await addDoc(collectionRef, comment);
+//                 navigate('/feed');
+//                 console.log('Comment added!');
+//             }
+//         } catch (error) {
+//             console.error('Error adding comments:', error);
+//         }
+//     }
+
+//     return (
+//         <div>
+//             <AppBar />
+//             <Container maxWidth="sm">
+//                 <p>Comments for {post_id}</p>
+//                 {postInfo ? (
+//                     <Post post={postInfo} friends={[]} />
+//                 ) : (
+//                     <p>Loading post information...</p>
+//                 )}
+//             </Container>
+
+//             <Container maxWidth="sm">
+//                 <Box className="comment-box">
+//                     <Typography variant="h6">Add a Comment</Typography>
+//                     <Stack spacing={2}>
+//                         <TextField fullWidth label="Comment" onChange={(e) => setBody(e.target.value)}/>
+//                         <Button variant="contained" color="primary" onClick={handleSubmit}>
+//                             Submit
+//                         </Button>
+//                     </Stack>
+//                 </Box>
+//             </Container>
+//             <NavigationBar />
+//         </div>
+//     )
+// }
+
+// export default Comment
+
 import { useState, useEffect } from 'react';
-import { collection, getDocs, addDoc } from "firebase/firestore";
+import { collection, getDocs, addDoc, query, where, orderBy, onSnapshot } from "firebase/firestore";
 import { db } from "../../utilities/firebase";
-import { Container, Box, Stack, Typography, Button } from '@mui/material';
+import { Container, Box, Stack, Typography, Button, Divider, Avatar } from '@mui/material';
 import TextField from '@mui/material/TextField';
 import AppBar from '../AppBar/AppBar';
 import NavigationBar from '../NavigationBar/NavigationBar';
-// import TextFields from '@mui/icons-material/TextFields';
 import Post from '../Post/Post';
-import { useNavigate } from "react-router-dom";
 import { useParams } from 'react-router-dom';
 
 function Comment({ userName, profilePic }) {
-    console.log("userName: ", userName);
-    // console.log("profilePic: ", profilePic);
-    const navigate = useNavigate();
     const post_id = useParams().post_id;
     const [postInfo, setPostInfo] = useState(null);
     const [body, setBody] = useState("");
+    const [comments, setComments] = useState([]); 
     const [fillInFields, setFillInFields] = useState(false);
 
+    // Fetch post information
     async function getPostInfoFromDB(post_id) {
         try {
             const doc = await getDocs(collection(db, "posts"));
@@ -30,43 +129,59 @@ function Comment({ userName, profilePic }) {
             });
             return posts[0];
         } catch (error) {
-            console.log("Error: ", error);
+            console.error("Error fetching post info: ", error);
         }
     }
 
     useEffect(() => {
         async function fetchPosts() {
-            try {
-                const fetchedPosts = await getPostInfoFromDB(post_id);
-                setPostInfo(fetchedPosts);
-            }
-            catch (error) {
-                console.error("Error fetching posts: ", error);
-            }
+            const fetchedPosts = await getPostInfoFromDB(post_id);
+            setPostInfo(fetchedPosts);
         }
         fetchPosts();
     }, [post_id]);
 
+    // Real-time comment listener
+    useEffect(() => {
+        const commentsRef = collection(db, "comments");
+        const q = query(
+            commentsRef,
+            where("post_id", "==", post_id),
+            orderBy("date", "asc") // Order comments by date
+        );
+
+        const unsubscribe = onSnapshot(q, (snapshot) => {
+            const newComments = snapshot.docs.map((doc) => ({
+                id: doc.id,
+                ...doc.data(),
+            }));
+            setComments(newComments);
+        });
+
+        return () => unsubscribe(); // Clean up listener on component unmount
+    }, [post_id]);
+
+    // Handle new comment submission
     async function handleSubmit() {
         try {
-            const collectionRef = collection(db, 'comments');
+            const collectionRef = collection(db, "comments");
             const comment = {
                 post_id: post_id,
                 body: body,
                 username: userName.displayName,
                 profilePic: profilePic,
-                date: new Date()
+                date: new Date(),
             };
 
             if (!body) {
                 setFillInFields(true);
             } else {
                 await addDoc(collectionRef, comment);
-                navigate('/feed');
-                console.log('Comment added!');
+                setBody(""); // Clear the input field
+                console.log("Comment added!");
             }
         } catch (error) {
-            console.error('Error adding comments:', error);
+            console.error("Error adding comments:", error);
         }
     }
 
@@ -74,7 +189,9 @@ function Comment({ userName, profilePic }) {
         <div>
             <AppBar />
             <Container maxWidth="sm">
-                <p>Comments for {post_id}</p>
+                <Typography variant="h5" gutterBottom>
+                    Comments for {post_id}
+                </Typography>
                 {postInfo ? (
                     <Post post={postInfo} friends={[]} />
                 ) : (
@@ -82,11 +199,47 @@ function Comment({ userName, profilePic }) {
                 )}
             </Container>
 
+            {/* Comment Section */}
             <Container maxWidth="sm">
-                <Box className="comment-box">
+
+                <Divider style={{ margin: "20px 0" }} />
+
+                {/* Display Comments */}
+                <Box className="comments-list">
+                    {comments.length > 0 ? (
+                        comments.map((comment) => (
+                            <Box key={comment.id} className="comment-item" style={{ marginBottom: "20px" }}>
+                                <Stack direction="row" spacing={2} alignItems="center">
+                                    <Avatar src={comment.profilePic} alt={comment.username} />
+                                    <Typography variant="body1" style={{ fontWeight: "bold" }}>
+                                        {comment.username}
+                                    </Typography>
+                                    <Typography variant="body2" color="textSecondary">
+                                        {new Date(comment.date.seconds * 1000).toLocaleString()}
+                                    </Typography>
+                                </Stack>
+                                <Typography variant="body2" style={{ marginTop: "10px" }}>
+                                    {comment.body}
+                                </Typography>
+                                <Divider style={{ margin: "10px 0" }} />
+                            </Box>
+                        ))
+                    ) : (
+                        <Typography variant="body2" color="textSecondary">
+                            No comments yet. Be the first to comment!
+                        </Typography>
+                    )}
+                </Box>
+
+                <Box className="comment-box" style={{ marginTop: "20px" }}>
                     <Typography variant="h6">Add a Comment</Typography>
                     <Stack spacing={2}>
-                        <TextField fullWidth label="Comment" onChange={(e) => setBody(e.target.value)}/>
+                        <TextField
+                            fullWidth
+                            label="Write your comment"
+                            value={body}
+                            onChange={(e) => setBody(e.target.value)}
+                        />
                         <Button variant="contained" color="primary" onClick={handleSubmit}>
                             Submit
                         </Button>
@@ -95,7 +248,7 @@ function Comment({ userName, profilePic }) {
             </Container>
             <NavigationBar />
         </div>
-    )
+    );
 }
 
-export default Comment
\ No newline at end of file
+export default Comment;