No. of answers to a comment are now getting updated in realtime.

app/postPage2/[postTitle]/page.tsx

@@ -89,7 +89,7 @@ type QuestionType = {
 };
 
 type AnswerType = {
-  // id: string;
+  id: string;
   name: string;
   description: string;
   profilePic: string;
@@ -223,8 +223,8 @@ const PostPage = ({ params: { postTitle } }: Props) => {
         const qAns = query(ansRef, orderBy("createdAt", "desc")); // Order by 'createdAt' in descending order
         const ansUnsub = onSnapshot(qAns, (snapshot) => {
           const answers = snapshot.docs.map((doc) => ({
-            id: doc.id,
             ...(doc.data() as AnswerType),
+            id: doc.id,
           }));
 
           setAnswers(answers);

components/queAnsPage/AnsPost.tsx

@@ -16,12 +16,13 @@ import PostVoteClient from "@/components/post-vote/PostVoteClient";
 import CommentBox from "./CommentBox";
 import PostVoteClientPhone from "../post-vote/PostVoteClientPhone";
 
-import { auth } from "@/utils/firebase";
+import { auth, db } from "@/utils/firebase";
 import { useAuthState } from "react-firebase-hooks/auth";
+import { collection, doc, getDocs, query } from "firebase/firestore";
 
 type Props = {
   answers: {
-    // id: string;
+    id: string;
     name: string;
     profilePic: string;
     // postImage: string;
@@ -38,17 +39,34 @@ type Props = {
   postId: string;
 };
 
+type AnswerType = {
+  // id: string;
+  name: string;
+  description: string;
+  profilePic: string;
+  // postImage: string;
+  likes: number;
+  comments: number;
+  shares: number;
+  answerImageURL: string;
+  createdAt: string;
+  anonymity: boolean;
+  // Add any other fields as necessary
+};
+
 const AnsPost = ({ answers , postTitleWithSpaces , postId }: Props) => {
 
   //to send in postvoteclient for voting system
   const [user] = useAuthState(auth);
+  const [dispAnswer, setDispAnswer] = useState<AnswerType[]>([] as AnswerType[]);
   // console.log(postId);
 
   const pRef = useRef<HTMLDivElement>(null);
 
   // const isAnonymous = answers[0].anonymity;
 
   const [commentInputVisibility , setCommentInputVisibility] = useState(answers.map(() => false))
+  const [commentAdded, setCommentAdded] = useState(false);
 
   const toggleCommentInputVisibility = (index: number) => {
     // Update the visibility of the comment input at the given index
@@ -60,13 +78,40 @@ const AnsPost = ({ answers , postTitleWithSpaces , postId }: Props) => {
   useEffect(() => {
     // Close all comment inputs when the component is unmounted
      setCommentInputVisibility(answers.map(() => false));
+
+
   }, [answers]);
 
-
+  useEffect(()=>{
+    const fetchData = async () => {
+      const updatedAnswers = await Promise.all(
+        answers.map(async (answer) => {
+          // Fetch the 'comments' subcollection for each 'answers' document
+          const commentsCollectionRef = collection(
+            doc(db, 'questions', postId, 'answers', answer.id),
+            'comments'
+          );
+          //console.log("answer", answer);
+          const commentsQuery = query(commentsCollectionRef);
+          const commentsSnapshot = await getDocs(commentsQuery);
+
+          // Add the total number of comments to the 'answers' data
+          return { ...answer, comments: commentsSnapshot.size };
+        })
+      );
+
+      setDispAnswer(updatedAnswers);
+      // Do something with updatedAnswers, such as updating state
+    };
+
+    fetchData();
+  }, [postId, answers, commentAdded]);
 
   return (
-    <div className=" space-y-4">
-      {answers.map((answer: any, key) => (
+
+    <div>
+      {dispAnswer.map((answer: any, key) => (
+
         <div
           key={answer.id}
           className="rounded-md bg-white dark:bg-[#262626] shadow mt-7 space-y-4 break-words overflow-hidden" 
@@ -168,7 +213,9 @@ const AnsPost = ({ answers , postTitleWithSpaces , postId }: Props) => {
                 className="w-fit flex items-center gap-2"
                 onClick={() => toggleCommentInputVisibility(key)}
               >
-                <MessageSquare className="h-4 w-4" /> <span className=' sm:block hidden'>5 Comments</span>
+
+                <MessageSquare className="h-4 w-4" /> <span className=' sm:block hidden'>{answer.comments} Answers</span>
+
               </button>
               <button
                 className="w-fit flex items-center gap-2"
@@ -185,7 +232,7 @@ const AnsPost = ({ answers , postTitleWithSpaces , postId }: Props) => {
 
           {/* Add a comment input that shows or hides when the comments button is clicked */}
           {commentInputVisibility[key] && (
-            <CommentBox postTitleWithSpaces={postTitleWithSpaces} answerId={answer.id} toggleCommentInputVisibility={() => toggleCommentInputVisibility(key)} />
+            <CommentBox postTitleWithSpaces={postTitleWithSpaces} changeHandler={setCommentAdded} answerId={answer.id} toggleCommentInputVisibility={() => toggleCommentInputVisibility(key)} />
           )} 
 
         </div>

components/queAnsPage/CommentBox.tsx

@@ -39,6 +39,7 @@ type Input = z.infer<typeof CommentType>;
 
 type Props = {
   postTitleWithSpaces: string;
+  changeHandler: Function;
   answerId: string;
   toggleCommentInputVisibility: () => void;
 };
@@ -64,6 +65,7 @@ type CommentTypeWithId = CommentType & { id: string };
 
 const CommentBox = ({
   postTitleWithSpaces,
+  changeHandler,
   answerId,
   toggleCommentInputVisibility,
 }: Props) => {
@@ -103,6 +105,7 @@ const CommentBox = ({
       console.log("Comment written with : ", docRef);
 
       form.reset();
+      changeHandler((prev: boolean)=>!prev)
     } else {
       console.log("No such document");
     }
@@ -113,6 +116,7 @@ const CommentBox = ({
     console.log(postTitleWithSpaces);
 
     createCommentPost(data);
+
   };
 
   //fetching all the comments