From 6f1ea730a7f3f61b930cd48ad4ea03623447052e Mon Sep 17 00:00:00 2001
From: mroxso <24775431+mroxso@users.noreply.github.com>
Date: Tue, 11 Feb 2025 22:08:17 +0100
Subject: [PATCH] Feature: Hide failed images (#43)

* fix: handle image loading errors in KIND20Card and QuickViewKind20NoteCard components

* refactor: streamline KIND20Card component structure and improve readability
---
 components/KIND20Card.tsx              | 113 +++++++++++++------------
 components/ProfileFeed.tsx             |  22 +++--
 components/QuickViewKind20NoteCard.tsx |   6 +-
 3 files changed, 72 insertions(+), 69 deletions(-)

diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx
index 051b148..c9dbd96 100644
--- a/components/KIND20Card.tsx
+++ b/components/KIND20Card.tsx
@@ -1,6 +1,7 @@
 import type React from "react"
 import { useProfile } from "nostr-react"
 import { nip19 } from "nostr-tools"
+import { useState } from "react"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
@@ -36,8 +37,9 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
   const { data: userData } = useProfile({
     pubkey,
   })
+  const [imageError, setImageError] = useState(false);
 
-  if (!image) return null;
+  if (!image || imageError) return null;
 
   const title =
     userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey)
@@ -49,69 +51,70 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
 
   return (
     <>
-      <Card>
-        <CardHeader>
-          <CardTitle>
-            <Link href={hrefProfile} style={{ textDecoration: "none" }}>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <div style={{ display: "flex", alignItems: "center" }}>
-                      <Avatar>
-                        <AvatarImage src={profileImageSrc} />
-                      </Avatar>
-                      <span className="break-all" style={{ marginLeft: "10px" }}>
-                        {title}
-                      </span>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{title}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </Link>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-0">
-          <div className="px-2 sm:px-4">
-            <div className="w-full">
-              <div className="relative w-full" style={{ paddingBottom: "100%" }}>
-                {image && (
+
+      <div key={event.id} className="py-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <Link href={hrefProfile} style={{ textDecoration: "none" }}>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <div style={{ display: "flex", alignItems: "center" }}>
+                        <Avatar>
+                          <AvatarImage src={profileImageSrc} />
+                        </Avatar>
+                        <span className="break-all" style={{ marginLeft: "10px" }}>
+                          {title}
+                        </span>
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{title}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </Link>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <div className="px-2 sm:px-4">
+              <div className="w-full">
+                <div className="relative w-full" style={{ paddingBottom: "100%" }}>
                   <Image
-                    src={image || "/placeholder.svg"}
+                    src={image}
                     alt={text}
                     fill
                     className="rounded-lg object-contain"
-                    // sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    onError={() => setImageError(true)}
                   />
-                )}
+                </div>
               </div>
             </div>
-          </div>
-          <div className="p-4">
-            <div className="break-word overflow-hidden">{text}</div>
-            <hr className="my-4" />
-            <div className="space-x-4 flex justify-between items-start">
-              <div className="flex space-x-4">
-                <ReactionButton event={event} />
-                <ZapButton event={event} />
-                {showViewNoteCardButton && <ViewNoteButton event={event} />}
-              </div>
-              <div className="flex space-x-2">
-                <ViewCopyButton event={event} />
-                <ViewRawButton event={event} />
+            <div className="p-4">
+              <div className="break-word overflow-hidden">{text}</div>
+              <hr className="my-4" />
+              <div className="space-x-4 flex justify-between items-start">
+                <div className="flex space-x-4">
+                  <ReactionButton event={event} />
+                  <ZapButton event={event} />
+                  {showViewNoteCardButton && <ViewNoteButton event={event} />}
+                </div>
+                <div className="flex space-x-2">
+                  <ViewCopyButton event={event} />
+                  <ViewRawButton event={event} />
+                </div>
               </div>
             </div>
-          </div>
-        </CardContent>
-        <CardFooter>
-          <div className="grid grid-cols-1">
-            <small className="text-muted">{createdAt.toLocaleString()}</small>
-            {uploadedVia && <small className="text-muted">Uploaded via {uploadedVia}</small>}
-          </div>
-        </CardFooter>
-      </Card>
+          </CardContent>
+          <CardFooter>
+            <div className="grid grid-cols-1">
+              <small className="text-muted">{createdAt.toLocaleString()}</small>
+              {uploadedVia && <small className="text-muted">Uploaded via {uploadedVia}</small>}
+            </div>
+          </CardFooter>
+        </Card>
+      </div>
     </>
   )
 }
diff --git a/components/ProfileFeed.tsx b/components/ProfileFeed.tsx
index 5d95e9e..5d284d3 100644
--- a/components/ProfileFeed.tsx
+++ b/components/ProfileFeed.tsx
@@ -41,18 +41,16 @@ const ProfileFeed: React.FC<ProfileFeedProps> = ({ pubkey }) => {
           {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>
+              <KIND20Card
+                key={event.id}
+                pubkey={event.pubkey}
+                text={event.content}
+                image={imageUrl}
+                event={event}
+                tags={event.tags}
+                eventId={event.id}
+                showViewNoteCardButton={true}
+              />
             ) : null;
           })}
           {!isLoading && (
diff --git a/components/QuickViewKind20NoteCard.tsx b/components/QuickViewKind20NoteCard.tsx
index 8ca2bbd..d288c4c 100644
--- a/components/QuickViewKind20NoteCard.tsx
+++ b/components/QuickViewKind20NoteCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useProfile } from "nostr-react";
 import {
   nip19,
@@ -25,8 +25,9 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubke
   const {data, isLoading} = useProfile({
     pubkey,
   });
+  const [imageError, setImageError] = useState(false);
 
-  if (!image) return null;
+  if (!image || imageError) return null;
 
   text = text.replaceAll('\n', ' ');
   const encodedNoteId = nip19.noteEncode(event.id)
@@ -45,6 +46,7 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubke
               sizes="(max-width: 768px) 100vw, 300px"
               className='rounded lg:rounded-lg object-cover' 
               priority
+              onError={() => setImageError(true)}
             />
           </div>
         </div>