From 5b3246c07769de42e8ccd72c6d0af9dc8771d013 Mon Sep 17 00:00:00 2001
From: mroxso <24775431+mroxso@users.noreply.github.com>
Date: Sun, 9 Feb 2025 18:26:10 +0100
Subject: [PATCH] Feature: Display Improvements (#40)

* refactor: improve event rendering logic and add no posts found message

* fix errors
---
 components/KIND20Card.tsx              |  4 +--
 components/ProfileFeed.tsx             | 37 +++++++++++++++-----------
 components/ProfileQuickViewFeed.tsx    | 23 ++++++++++++----
 components/QuickViewKind20NoteCard.tsx |  8 +++---
 4 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx
index 36f3d7b..051b148 100644
--- a/components/KIND20Card.tsx
+++ b/components/KIND20Card.tsx
@@ -33,12 +33,12 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
   event,
   showViewNoteCardButton,
 }) => {
-  if (!image) return null;
-
   const { data: userData } = useProfile({
     pubkey,
   })
 
+  if (!image) return null;
+
   const title =
     userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey)
   text = text.replaceAll("\n", " ")
diff --git a/components/ProfileFeed.tsx b/components/ProfileFeed.tsx
index a790e81..5d95e9e 100644
--- a/components/ProfileFeed.tsx
+++ b/components/ProfileFeed.tsx
@@ -36,28 +36,35 @@ const ProfileFeed: React.FC<ProfileFeedProps> = ({ pubkey }) => {
             <Skeleton className="h-4 w-[200px]" />
           </div>
         </div>
-      ) : (
+      ) : events.some(event => getImageUrl(event.tags)) ? (
         <>
-          {events.map((event) => (
-            <div key={event.id} className="py-6">
-              <KIND20Card 
-                key={event.id} 
-                pubkey={event.pubkey} 
-                text={event.content} 
-                image={getImageUrl(event.tags)} 
-                event={event} 
-                tags={event.tags} 
-                eventId={event.id} 
-                showViewNoteCardButton={true}
-              />
-            </div>
-          ))}
+          {events.map((event) => {
+            const imageUrl = getImageUrl(event.tags);
+            return imageUrl ? (
+              <div key={event.id} className="py-6">
+                <KIND20Card 
+                  key={event.id} 
+                  pubkey={event.pubkey} 
+                  text={event.content} 
+                  image={imageUrl} 
+                  event={event} 
+                  tags={event.tags} 
+                  eventId={event.id} 
+                  showViewNoteCardButton={true}
+                />
+              </div>
+            ) : null;
+          })}
           {!isLoading && (
             <div className="flex justify-center p-4">
               <Button className="w-full md:w-auto" onClick={loadMore}>Load More</Button>
             </div>
           )}
         </>
+      ) : (
+        <div className="flex flex-col items-center justify-center py-10 text-gray-500">
+          <p className="text-lg">No posts found :(</p>
+        </div>
       )}
     </>
   );
diff --git a/components/ProfileQuickViewFeed.tsx b/components/ProfileQuickViewFeed.tsx
index e76d706..4ea7f8c 100644
--- a/components/ProfileQuickViewFeed.tsx
+++ b/components/ProfileQuickViewFeed.tsx
@@ -40,18 +40,31 @@ const ProfileQuickViewFeed: React.FC<ProfileQuickViewFeedProps> = ({ pubkey }) =
               <Skeleton className="h-[125px] rounded-xl" />
             </div>
           </>
-        ) : (
+        ) : events.some(event => getImageUrl(event.tags)) ? (
           <>
             {events.map((event) => {
               const imageUrl = getImageUrl(event.tags);
-              return (
-                <QuickViewKind20NoteCard key={event.id} pubkey={event.pubkey} text={event.content} image={imageUrl} event={event} tags={event.tags} eventId={event.id} linkToNote={true} />
-              );
+              return imageUrl ? (
+                <QuickViewKind20NoteCard 
+                  key={event.id} 
+                  pubkey={event.pubkey} 
+                  text={event.content} 
+                  image={imageUrl} 
+                  event={event} 
+                  tags={event.tags} 
+                  eventId={event.id} 
+                  linkToNote={true} 
+                />
+              ) : null;
             })}
           </>
+        ) : (
+          <div className="col-span-3 flex flex-col items-center justify-center py-10 text-gray-500">
+            <p className="text-lg">No posts found :(</p>
+          </div>
         )}
       </div>
-      {!isLoading ? (
+      {!isLoading && events.some(event => getImageUrl(event.tags)) ? (
         <div className="flex justify-center p-4">
           <Button className="w-full" onClick={loadMore}>Load More</Button>
         </div>
diff --git a/components/QuickViewKind20NoteCard.tsx b/components/QuickViewKind20NoteCard.tsx
index 7e249dd..8ca2bbd 100644
--- a/components/QuickViewKind20NoteCard.tsx
+++ b/components/QuickViewKind20NoteCard.tsx
@@ -22,6 +22,10 @@ interface QuickViewKind20NoteCardProps {
 }
 
 const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubkey, text, image, eventId, tags, event, linkToNote }) => {
+  const {data, isLoading} = useProfile({
+    pubkey,
+  });
+
   if (!image) return null;
 
   text = text.replaceAll('\n', ' ');
@@ -29,10 +33,6 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubke
 
   const { width, height } = extractDimensions(event);
 
-  const {data, isLoading} = useProfile({
-    pubkey,
-  });
-
   const card = (
     <Card className="aspect-square">
       <SmallCardContent className="h-full p-0">