Updated the recent posts section on the homepage

components/Post.tsx

@@ -125,7 +125,7 @@ const Post = ({post}: Props) => {
           <Link
             href={`/postPage2/${post.title.split(' ').join('-')}`}
             className='w-fit flex items-center gap-2'>
-            <MessageSquare className='h-4 w-4' /> <span className=' sm:block hidden'>5 Answers</span>
+            <MessageSquare className='h-4 w-4' /> <span className=' sm:block hidden'>{post.comments} Answers</span>
           </Link>
           <Link href={`/r/post/${post.id}`} className='w-fit flex items-center gap-2'>
             <Share className='h-4 w-4' /> <span className=' sm:block hidden'>Share</span>

components/PostFeed.tsx

@@ -5,7 +5,7 @@ import Post from './Post'
 import { postData } from '@/lib/data'
 
 import {db} from '@/utils/firebase'
-import { collection, onSnapshot, orderBy, query } from 'firebase/firestore'
+import { collection, getDocs, onSnapshot, orderBy, query } from 'firebase/firestore'
 
 type Props = {}
 
@@ -34,8 +34,25 @@ const PostFeed = (props: Props) => {
     const collectionRef = collection(db, 'questions');
     const q = query(collectionRef, orderBy('createdAt', 'desc'));
 
-    const unsub = onSnapshot(q, (snapshot) => {
-      setPosts(snapshot.docs.map((doc) => ({id: doc.id, ...doc.data()} as PostType)));
+    const unsub = onSnapshot(q, async(snapshot) => {
+      const postsData =[];
+
+      for (const doc of snapshot.docs) {
+
+        // Fetch the 'answers' subcollection for each question
+        const answersCollectionRef = collection(doc.ref, 'answers');
+        const answersQuery = query(answersCollectionRef);
+
+        const answersSnapshot = await getDocs(answersQuery);
+        const numAnswers = answersSnapshot.size;
+
+        // Add the total number of answers to the question data
+        const questionData = { id: doc.id, comments: numAnswers, ...doc.data() } as PostType;
+
+        postsData.push(questionData);
+      }
+
+      setPosts(postsData);
     })
 
     return () => {

components/RightHandFeed/RightHandFeed.tsx

@@ -1,11 +1,60 @@
 import { RecentPosts } from '@/lib/data'
-import React from 'react'
+import React, {useEffect, useState} from 'react'
+import { db } from '@/utils/firebase'
+import { collection, getDocs, limit, onSnapshot, orderBy, query } from 'firebase/firestore'
 
 import RightHandFeedCard from './RightHandFeedCard'
 
 type Props = {}
 
+type PostType = {
+  id: string;
+  name: string;
+  title: string;
+  profilePic: string;
+  voteAmt: number;
+  comments: number;
+  createdAt: string;
+  anonymity: boolean;
+  // Add any other fields as necessary
+}
+
 const RightHandFeed = (props: Props) => {
+
+  const [posts , setPosts] = useState<PostType[]>([]);
+
+  useEffect(() => {
+
+    const collectionRef = collection(db, 'questions');
+    const q = query(collectionRef, orderBy('createdAt', 'desc'), limit(5));
+
+    const unsub = onSnapshot(q, async(snapshot) => {
+      const postsData =[];
+
+      for (const doc of snapshot.docs) {
+
+        // Fetch the 'answers' subcollection for each question
+        const answersCollectionRef = collection(doc.ref, 'answers');
+        const answersQuery = query(answersCollectionRef);
+
+        const answersSnapshot = await getDocs(answersQuery);
+        const numAnswers = answersSnapshot.size;
+
+        // Add the total number of answers to the question data
+        const questionData = { id: doc.id, comments: numAnswers, ...doc.data() } as PostType;
+
+        postsData.push(questionData);
+      }
+
+      //console.log(postsData)
+      setPosts(postsData);
+    })
+
+    return () => {
+      unsub()
+    }
+  }, [])
+
   return (
     <div className='  px-6 py-4'>
 
@@ -14,8 +63,8 @@ const RightHandFeed = (props: Props) => {
       </div>
 
         {
-            RecentPosts.map((post, index) => (
-                <div key={index} className='flex gap-4 items-center justify-center mx-auto mt-4'>
+            posts.map((post, index) => (
+                <div key={index} className='flex gap-4 items-start mt-3'>
                     <RightHandFeedCard post={post}/>
                 </div>
             ))

components/RightHandFeed/RightHandFeedCard.tsx

@@ -1,43 +1,59 @@
 import Image from "next/image";
 import React from "react";
 import { Separator } from "../ui/separator";
+import { Button } from "../ui/button";
+import Link from "next/link";
 
 type Props = {
   post: {
-    title: string;
-    image: string;
-    points: number;
-    comments: number;
-    date: string;
+  id: string;
+  name: string;
+  title: string;
+  profilePic: string;
+  voteAmt: number;
+  comments: number;
+  createdAt: string;
+  anonymity: boolean;
   };
 };
 
 const RightHandFeedCard = ({ post }: Props) => {
+
+  const isAnonymous = post.anonymity
   return (
     <div className="">
-        <Separator className=" my-1" />
-      <div className="flex gap-4 items-center">
-        <div className="w-[5rem] h-[4rem] rounded-lg overflow-hidden">
-          <Image
-            // src={post.image}
-            src='/oppenheimer.jpg'
-            alt="fetch error"
-            width={200}
-            height={150}
-            className="w-full h-full object-cover"
-          />
-        </div>
-        <div className="  ">
-          <h3 className="font-medium text-lg">{post.title}</h3>
-          <div className="text-sm flex gap-1 ">
-            <p className="text-zinc-500">{post.points} points</p>
-            <svg viewBox="0 0 48 48" className=" mt-1 w-3 h-3" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M24 36C30.6274 36 36 30.6274 36 24C36 17.3725 30.6274 12 24 12C17.3726 12 12 17.3725 12 24C12 30.6274 17.3726 36 24 36Z" fill="#333333"></path> </g></svg>
-            <p className="text-zinc-500">{post.comments} comments</p>
-            {/* <p className='text-zinc-500'>{post.date}</p> */}
+  <Separator className="mb-1" />
+  <div className="flex gap-3 flex-col">
+  <div className='flex max-h-40 mt-1 space-x-3 text-gray-500'>
+            <div className="">
+                    <div className=' relative w-full rounded-full overflow-hidden'>
+                        <Image
+                        width={30}
+                        height={30}
+                        objectFit="cover"
+                        src={isAnonymous ? ('https://qph.cf2.quoracdn.net/main-qimg-73e139be8bfc1267eeed8ed6a2802109-lq') : (post.profilePic)}
+                        alt='profile picture'
+                        referrerPolicy='no-referrer'
+                        />
+                    </div>
+            </div>
+            <Separator orientation='vertical' className=' h-5 mt-1 '/>
+        <span className=''>{isAnonymous ? 'Anonymous' : post.name}</span>
           </div>
-        </div>
+    <div className="flex flex-col">
+    <Link href={`/postPage2/${post.title.split(' ').join('-')}`}>
+      <h3 className="font-medium text-lg mb-1">{post.title.length>27?`${post.title.substring(0,27)}...`:post.title}</h3>
+    </Link>
+      <div className="text-sm flex gap-1">
+        <p className="text-zinc-500">{post.voteAmt?post.voteAmt:0} supports</p>
+        <svg viewBox="0 0 48 48" className="mt-1 w-3 h-3" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M24 36C30.6274 36 36 30.6274 36 24C36 17.3725 30.6274 12 24 12C17.3726 12 12 17.3725 12 24C12 30.6274 17.3726 36 24 36Z" fill="#333333"></path>
+        </svg>
+        <p className="text-zinc-500">{post.comments} answers</p>
       </div>
     </div>
+  </div>
+</div>
   );
 };
 

utils/firebase.js

@@ -10,13 +10,13 @@ import { getStorage } from "firebase/storage";
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_APP_ID,
-  measurementId: process.env.NEXT_PUBLIC_MEASURE_ID
+    apiKey: process.env.NEXT_PUBLIC_API_KEY,
+    authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+    projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+    storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+    messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
+    appId: process.env.NEXT_PUBLIC_APP_ID,
+    measurementId: process.env.NEXT_PUBLIC_MEASURE_ID
 };
 
 // Initialize Firebase