From e95a62899ea7014c1f100d3e5e10aff7ba38fb64 Mon Sep 17 00:00:00 2001
From: highperfocused <24775431+mroxso@users.noreply.github.com>
Date: Tue, 18 Mar 2025 23:36:21 +0100
Subject: [PATCH] add comments fetching and filtering to CommentCard and
 CommentsComponent

---
 components/CommentCard.tsx        | 33 ++++++++++++++++++++++++++++++-
 components/CommentsCompontent.tsx |  8 +++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/components/CommentCard.tsx b/components/CommentCard.tsx
index 6a35025..64505ea 100644
--- a/components/CommentCard.tsx
+++ b/components/CommentCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useProfile } from "nostr-react";
+import { useProfile, useNostrEvents } from "nostr-react";
 import {
   nip19,
 } from "nostr-tools";
@@ -41,6 +41,14 @@ const NoteCard: React.FC<CommentCardProps> = ({ pubkey, text, eventId, tags, eve
   const { data: userData } = useProfile({
     pubkey,
   });
+  
+  // Fetch comments related to this event
+  const { events: commentEvents } = useNostrEvents({
+    filter: {
+      kinds: [1],
+      '#e': [eventId],
+    },
+  });
 
   const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey);
   const imageSrc = text.match(/https?:\/\/[^ ]*\.(png|jpg|gif|jpeg)/g);
@@ -111,6 +119,29 @@ const NoteCard: React.FC<CommentCardProps> = ({ pubkey, text, eventId, tags, eve
             </div>
             <ViewRawButton event={event} />
           </div>
+          
+          {/* Comments section */}
+          {commentEvents && commentEvents.length > 0 && (
+            <div className="mt-4">
+              {/* <h3 className="text-lg font-medium mb-2">Comments ({commentEvents.length})</h3> */}
+              <div className="space-y-3">
+                {commentEvents.map((commentEvent) => (
+                  // <div key={commentEvent.id} className="border p-3 rounded-md">
+                  //   <div className="flex items-center mb-2">
+                  //     <span className="text-sm font-medium">
+                  //       {nip19.npubEncode(commentEvent.pubkey).substring(0, 10)}...
+                  //     </span>
+                  //     <span className="text-xs ml-2 text-gray-500">
+                  //       {new Date(commentEvent.created_at * 1000).toLocaleString()}
+                  //     </span>
+                  //   </div>
+                  //   <p className="text-sm">{commentEvent.content}</p>
+                  // </div>
+                  <NoteCard key={commentEvent.id} pubkey={commentEvent.pubkey} text={commentEvent.content} eventId={commentEvent.id} tags={commentEvent.tags} event={commentEvent} />
+                ))}
+              </div>
+            </div>
+          )}
         </CardContent>
         <CardFooter>
           <small className="text-muted">{createdAt.toLocaleString()}</small>
diff --git a/components/CommentsCompontent.tsx b/components/CommentsCompontent.tsx
index 8f913a2..ee4bffb 100644
--- a/components/CommentsCompontent.tsx
+++ b/components/CommentsCompontent.tsx
@@ -19,10 +19,16 @@ const CommentsCompontent: React.FC<CommentsCompontentProps> = ({ pubkey, event }
         },
     });
 
+    // filter out all events with more then 1 "e" tag. other tags are ok
+    // this shows only the top level comments
+    let filteredEvents = events.filter((event) => {
+        return event.tags.filter((tag) => tag[0] === 'e').length === 1;
+    });
+
     return (
         <>
             <h1 className='text-xl'>Comments</h1>
-            {events.map((event) => (
+            {filteredEvents.map((event) => (
                 <div key={event.id} className="py-6">
                     <CommentCard key={event.id} pubkey={event.pubkey} text={event.content} eventId={event.id} tags={event.tags} event={event} />
                 </div>