finished css and small bug fixes

feliciahmq · Jul 9, 2024 · bde5f3b · bde5f3b
1 parent 936a8bc
commit bde5f3b
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 55 deletions.
diff --git a/src/components/forumcards/ForumCards.css b/src/components/forumcards/ForumCards.css
@@ -139,7 +139,7 @@
             display: inline-block;
         }
 
-        .forum-card-like {
+        .forum-card-like, .forum-card-comment {
             display: flex;
             align-items: center;
             gap: 2px;

diff --git a/src/components/forumcards/ForumCards.jsx b/src/components/forumcards/ForumCards.jsx
@@ -41,6 +41,7 @@ function ForumCards({ forumDetail }) {
     const [showResults, setShowResults] = useState(false);
     const [isLiked, setIsLiked] = useState(false);
     const [likeCount, setLikeCount] = useState(0);
+    const [commentCount, setCommentCount] = useState(0);
 
     useEffect(() => {
         const fetchUser = async () => {
@@ -52,6 +53,22 @@ function ForumCards({ forumDetail }) {
             }
         };
 
+        const fetchAndCountComments = async () => {
+            const commentsRef = collection(db, 'Forum', forumDetail.id, 'Comments');
+            const commentsSnapshot = await getDocs(commentsRef);
+
+            const fetchedComments = await Promise.all(commentsSnapshot.docs.map(async doc => {
+                const comment = { id: doc.id, ...doc.data() };
+                const repliesRef = collection(db, 'Forum', forumDetail.id, 'Comments', doc.id, 'Replies');
+                const repliesSnapshot = await getDocs(repliesRef);
+                comment.replies = repliesSnapshot.docs.map(replyDoc => ({ id: replyDoc.id, ...replyDoc.data() }));
+                return comment;
+            }));
+
+            const totalCount = countCommentsAndReplies(fetchedComments);
+            setCommentCount(totalCount);
+        };
+
         const checkLikeStatus = async () => {
             if (currentUser) {
                 const likesRef = collection(db, 'Forum', forumDetail.id, 'Likes');
@@ -70,6 +87,7 @@ function ForumCards({ forumDetail }) {
         fetchUser();
         checkLikeStatus();
         getLikeCount();
+        fetchAndCountComments();
 
         if (currentUser) {
             if (currentUser.uid === forumDetail.userID) {
@@ -251,6 +269,12 @@ function ForumCards({ forumDetail }) {
         }
     };
 
+    const countCommentsAndReplies = (comments) => {
+        return comments.reduce((total, comment) => {
+            return total + 1 + (comment.replies ? countCommentsAndReplies(comment.replies) : 0);
+        }, 0);
+    };
+
     const tagColors = {
         "Questions": "#FF4B2B",  
         "Modding": "#4CAF50",  
@@ -360,6 +384,7 @@ function ForumCards({ forumDetail }) {
                     </div>
                     <div className="forum-card-comment forum-card-icon">
                         <FaCommentDots fill="grey"/>
+                        <span>{commentCount}</span>
                     </div>
                 </div>
                 <div className="forum-card-share forum-card-icon" onClick={handleShare}>
@@ -370,4 +395,5 @@ function ForumCards({ forumDetail }) {
         </div>
     );
 }
+
 export default ForumCards;
diff --git a/src/components/header/likecounter/LikeCounter.jsx b/src/components/header/likecounter/LikeCounter.jsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { db } from '../../../lib/firebaseConfig';
 import { doc, getDoc, setDoc, onSnapshot, collection } from 'firebase/firestore';
 import { useAuth } from '../../../Auth';
@@ -11,28 +11,27 @@ export const LikeCountProvider = ({ children }) => {
     const { currentUser } = useAuth();
     const [likeCount, setLikeCount] = useState(0);
 
-    useEffect(() => {
+    const fetchLikeCount = useCallback(async () => {
         if (currentUser) {
-            const fetchLikeCount = async () => {
-                const likeCountDoc = doc(db, 'Users', currentUser.uid, 'likeCount', 'counter');
+            const likeCountDoc = doc(db, 'Users', currentUser.uid, 'likeCount', 'counter');
+            try {
                 const likeCountSnapshot = await getDoc(likeCountDoc);
-
                 if (likeCountSnapshot.exists()) {
                     setLikeCount(likeCountSnapshot.data().count);
                 } else {
-                    try {
-                        await setDoc(likeCountDoc, { count: 0 });
-                        setLikeCount(0);
-                    } catch (err) {
-                        console.log(err.message);
-                    }
+                    await setDoc(likeCountDoc, { count: 0 });
+                    setLikeCount(0);
                 }
-            };
-
-            fetchLikeCount();
+            } catch (err) {
+                console.log(err.message);
+            }
         }
     }, [currentUser]);
 
+    useEffect(() => {
+        fetchLikeCount();
+    }, [fetchLikeCount]);
+
     useEffect(() => {
         if (currentUser) {
             const unsubscribe = onSnapshot(doc(db, 'Users', currentUser.uid, 'likeCount', 'counter'), (doc) => {
@@ -52,21 +51,21 @@ export const LikeCountProvider = ({ children }) => {
         }
     };
 
-    const increaseLikeCount = () => {
+    const increaseLikeCount = useCallback(() => {
         setLikeCount((prevCount) => {
             const newCount = prevCount + 1;
             updateLikeCountInFirestore(newCount);
             return newCount;
         });
-    };
+    }, [updateLikeCountInFirestore]);
 
-    const decreaseLikeCount = () => {
+    const decreaseLikeCount = useCallback(() => {
         setLikeCount((prevCount) => {
             const newCount = prevCount > 0 ? prevCount - 1 : 0;
             updateLikeCountInFirestore(newCount);
             return newCount;
         });
-    };
+    }, [updateLikeCountInFirestore]);
 
     useEffect(() => {
         if (currentUser) {
@@ -82,7 +81,7 @@ export const LikeCountProvider = ({ children }) => {
 
             return () => unsubscribe();
         }
-    }, [currentUser]);
+    }, [currentUser, decreaseLikeCount]);
 
     return (
         <LikeCounter.Provider value={{ likeCount, increaseLikeCount, decreaseLikeCount }}>

diff --git a/src/pages/forumpost/ForumPost.css b/src/pages/forumpost/ForumPost.css
@@ -225,7 +225,7 @@
             display: inline-block;
         }
 
-        .forum-card-like {
+        .forum-card-like, .forum-card-comment {
             display: flex;
             align-items: center;
             gap: 2px;
@@ -310,7 +310,6 @@
 
 .comment {
     border-left: 1px solid rgb(194, 194, 194);
-    margin: 16px;
     padding: 8px;
 
     .comment-header {
@@ -323,6 +322,7 @@
 
     .comment-profile {
         display: flex;
+        cursor: pointer;
         flex-direction: row;
         align-items: center;
         gap: 4px;
@@ -339,6 +339,7 @@
 
     .comment-content {
         margin: 0;
+        padding-bottom: 8px;
     }
 
     .comment-reply-button {
@@ -363,6 +364,8 @@
     }
 
     .comment-reply {
+        margin: 8px 0;
+
         textarea {
             font-size: 16px;
             border-radius: 12px;