From 0061c1a729c4c28af8bb6c3c90291cc16f5abf39 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Sun, 25 Aug 2024 22:02:47 +1000
Subject: [PATCH] small thread fixes

---
 client/src/components/modals/PostCard.tsx | 23 ++++++++++++++---------
 client/src/components/routes/Thread.tsx   | 20 +++++++-------------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/client/src/components/modals/PostCard.tsx b/client/src/components/modals/PostCard.tsx
index a92c6ad..12a4e26 100644
--- a/client/src/components/modals/PostCard.tsx
+++ b/client/src/components/modals/PostCard.tsx
@@ -34,6 +34,7 @@ const PostCard = ({
     const [sumReplyPow, setReplySumPow] = useState(0);
     const [repostedEvent, setRepostedEvent] = useState<Event>();
     const [parsedEvent, setParsedEvent] = useState<Event>(event);
+    const cachedMetadataEvents = JSON.parse(localStorage.getItem("cachedMetadataEvents") || "[]");
 
     useEffect(() => {
         const allRelatedEvents = [event, ...(replies || [])];
@@ -73,15 +74,19 @@ const PostCard = ({
                 </div>
                 {repliedTo && <div className="flex items-center mt-1" >
                     <span className="text-xs text-gray-500">Reply to: </span>
-                    {uniqBy(repliedTo, 'pubkey').map((parsedEvent, index) => (
-                        <div key={index}>
-                            {event.kind === 0 ? (
-                                <img className={`h-5 w-5 rounded-full`} src={getMetadata(parsedEvent)?.picture} />
-                            ) : (
-                                <div className={`h-4 w-4 ${getIconFromHash(parsedEvent.pubkey)} rounded-full`} />
-                            )}
-                        </div>
-                    ))}
+                    {uniqBy(repliedTo, 'pubkey').map((parsedEvent, index) => {
+                        // Move the logic outside of the JSX return statement
+                        const replyMetadata = cachedMetadataEvents.find((e: Event) => e.pubkey === parsedEvent.pubkey && e.kind === 0) || null;
+                        return (
+                            <div key={index}>
+                                {replyMetadata ? (
+                                    <img className={`h-5 w-5 rounded-full`} src={getMetadata(replyMetadata)?.picture} />
+                                ) : (
+                                    <div className={`h-4 w-4 ${getIconFromHash(parsedEvent.pubkey)} rounded-full`} />
+                                )}
+                            </div>
+                        );
+                    })}
                 </div>}
                 <div className={`flex justify-between items-center ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
                     {metadataParsed ?
diff --git a/client/src/components/routes/Thread.tsx b/client/src/components/routes/Thread.tsx
index ec8471f..b8e08eb 100644
--- a/client/src/components/routes/Thread.tsx
+++ b/client/src/components/routes/Thread.tsx
@@ -15,18 +15,12 @@ const Thread = () => {
     let decodeResult = nip19.decode(id as string);
     let hexID = decodeResult.data as string;
     const { noteEvents, metadataEvents } = useFetchEvents(undefined,false,hexID);
-
     // Load cached thread from localStorage
-    const [threadCache, setThreadCache] = useState<Event[]>(
-        JSON.parse(sessionStorage.getItem("cachedThread") || "[]")
-    );
+    const threadCache = JSON.parse(sessionStorage.getItem("cachedThread") || "[]")
+
     // Combine noteEvents and threadCache into a single array
     const allEvents = [...noteEvents, ...threadCache];
 
-    const countReplies = (event: Event) => {
-        return allEvents.filter(e => e.tags.some(tag => tag[0] === 'e' && tag[1] === event.id));
-    }
-
     const repliedList = (event: Event): Event[] => {
         return allEvents.filter(e => event.tags.some(tag => tag[0] === 'p' && tag[1] === e.pubkey));
     }
@@ -36,9 +30,9 @@ const Thread = () => {
         setPrevMentions((prevEvents) => [...prevEvents, event]);
     };
 
-    const OPEvent = allEvents.find(event => event.id === hexID);
+    const OPEvent: Event = allEvents.find(event => event.id === hexID);
     useEffect(() => {
-        if (OPEvent && prevMentions.length == 0) {
+        if (OPEvent && prevMentions.length === 0) {
             const OPMentionIDs = OPEvent.tags.filter(tag => tag[0] === 'e').map(tag => tag[1]);
             subNotesOnce(OPMentionIDs, onEvent);
         }
@@ -52,7 +46,7 @@ const Thread = () => {
         )
         
         const uniqReplyEvents = uniqBy(allEvents, "id");
-        const replyEvents = [...uniqReplyEvents].slice(1)
+        const replyEvents = [...uniqReplyEvents]
         .filter(event => 
             !earlierEvents.map(e => e.id).includes(event.id) &&
             (OPEvent ? OPEvent.id !== event.id : true)
@@ -65,7 +59,7 @@ const Thread = () => {
                     {earlierEvents
                         .filter(event => event.kind === 1)
                         .sort((a, b) => a.created_at - b.created_at).map((event, index) => (
-                            <PostCard event={event} metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null} replies={countReplies(event)} />
+                            <PostCard event={event} metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null} replies={uniqEvents.filter((e: Event) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id))} />
                         ))}
                     <PostCard event={OPEvent} metadata={metadataEvents.find((e) => e.pubkey === OPEvent.pubkey && e.kind === 0) || null} replies={replyEvents} type={'OP'}/>
                 </div>
@@ -77,7 +71,7 @@ const Thread = () => {
                         key={index} 
                         event={event} 
                         metadata={metadataEvents.find((e) => e.pubkey === event.pubkey && e.kind === 0) || null} 
-                        replies={replyEvents.filter((e) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id))} 
+                        replies={replyEvents.filter((e: Event) => e.tags.some((tag) => tag[0] === "e" && tag[1] === event.id))} 
                         repliedTo={repliedList(event)} 
                         />
                     ))}