more work

client/src/components/Header/Header.tsx

@@ -6,7 +6,7 @@ export default function Header() {
             <div className="container mx-auto flex justify-between items-center">
                 <a href='/'>
                 <div className="flex items-center">
-                    <img src="tao.png" className="h-8" />
+                    <img src="/tao.png" className="h-8" />
                     <span className="font-bold">The Anon Operation</span>
                 </div>
                 </a>

client/src/components/Home.tsx

@@ -8,7 +8,7 @@ import { uniqBy } from '../utils/utils';
 
 const Home = () => {
   const [events, setEvents] = useState<Event[]>([]);
-  const [filterDifficulty, setFilterDifficulty] = useState(localStorage.getItem('filterDifficulty') || '12');
+  const [filterDifficulty, setFilterDifficulty] = useState(localStorage.getItem('filterDifficulty') || '21');
 
   const onEvent = (event: Event) => {
     setEvents((prevEvents) => [...prevEvents, event]);

client/src/components/Modals/LinkPreview.tsx

@@ -2,19 +2,20 @@ import { getLinkPreview } from 'link-preview-js';
 import { useState, useEffect } from 'react';
 
 
+//Need to move this all server side 
 const LinkModal = ({ url }: { url: string}) => {
     const [linkPreview, setLinkPreview] = useState<LinkPreview | null>(null);
 
     useEffect(() => {
-        getLinkPreview(url)          
-        .then((preview) => setLinkPreview(preview as LinkPreview))
-        .catch((error) => console.error(error));
+      getLinkPreview(url)          
+      .then((preview) => setLinkPreview(preview as LinkPreview))
+      .catch((error) => console.error(error));
 
-    }, [url]);
+  }, [url]);
 
-    if (!linkPreview) {
-      return <></>; // or some loading state
-    }
+  if (!linkPreview) { 
+    return <a className="hover:underline" href={url}>{url}</a>; // or some loading state
+  }
     
   return (
     <div className="link-preview p-1 bg-neutral-800 rounded-lg border border-neutral-800">

client/src/components/Thread/ReplyCard.tsx

@@ -58,18 +58,15 @@ const timeAgo = (unixTime: number) => {
 const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, metadata: Event | null, replyCount: number, repliedTo: Event[] }) => {
     const { comment, file } = parseContent(event);
     const colorCombo = getColorFromHash(event.pubkey, colorCombos);
-    const [events, setEvents] = useState<Event[]>([]);
+    // const [events, setEvents] = useState<Event[]>([]);
 
     let metadataParsed = null;
     if (metadata !== null) {
         metadataParsed = getMetadata(metadata);
     }
 
-    const replyPubkeys = event.tags.filter(tag => tag[0] === 'p');
+    // const replyPubkeys = event.tags.filter(tag => tag[0] === 'p');
 
-    useEffect(() => {
-        console.log(repliedTo)
-    }, []);
 
     return (
         <>

client/src/components/Thread/Thread.tsx

@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom';
 import { useState } from "react";
 import { Event, nip19 } from "nostr-tools"
-import { subNote } from '../../utils/subscriptions';
+import { subNote, subNotesOnce } from '../../utils/subscriptions';
 import { useEffect } from 'react';
 import { uniqBy } from '../../utils/utils';
 import { DocumentTextIcon, FolderPlusIcon } from '@heroicons/react/24/outline';
@@ -21,6 +21,8 @@ const Thread = () => {
     let decodeResult = nip19.decode(id as string);
     const [showForm, setShowForm] = useState(false);
     const [postType, setPostType] = useState("");
+    const [hasRun, setHasRun] = useState(false);
+    const [preOPEvents, setPreOPEvents] = useState(['']);
 
     // Define your callback function for subGlobalFeed
     const onEvent = (event: Event, relay: string) => {
@@ -35,6 +37,7 @@ const Thread = () => {
         }
         // Subscribe to global feed when the component mounts
         // Optionally, return a cleanup function to unsubscribe when the component unmounts
+
         return () => {
             // Your cleanup code here
         };
@@ -42,6 +45,16 @@ const Thread = () => {
 
     const uniqEvents = events.length > 0 ? uniqBy(events, "id") : [];
 
+    useEffect(() => {
+        if (!hasRun && events.length > 0) {
+            let OPNoteEvents = events[0].tags.filter(tag => tag[0] === 'e').map(tag => tag[1]);
+            console.log(OPNoteEvents);
+            setHasRun(true);
+            setPreOPEvents(OPNoteEvents)
+            subNotesOnce(OPNoteEvents, onEvent)
+          }
+    }, [uniqEvents, hasRun]);
+
     const getMetadataEvent = (event: Event) => {
         const metadataEvent = uniqEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
         if (metadataEvent) {
@@ -58,6 +71,13 @@ const Thread = () => {
         return uniqEvents.filter(e => event.tags.some(tag => tag[0] === 'p' && tag[1] === e.pubkey));
     }
 
+    const earlierEvents = uniqEvents
+    .filter(event => 
+      event.kind === 1 &&
+      preOPEvents.includes(event.id)
+    )
+    .sort((a, b) => (b.created_at as any) - (a.created_at as any));
+
     if (!uniqEvents[0]) {
         return (
             <>
@@ -85,6 +105,11 @@ const Thread = () => {
         <>
             <main className="bg-black text-white min-h-screen">
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+                        {earlierEvents
+                            .filter(event => event.kind === 1)
+                            .sort((a, b) => a.created_at - b.created_at).map((event, index) => (
+                                <OPCard event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)}/>
+                            ))}
                     <OPCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
                     <div className="col-span-full flex justify-center space-x-36    ">
                         <DocumentTextIcon
@@ -107,7 +132,7 @@ const Thread = () => {
                         <ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
                     </div>
                     <div className="col-span-full h-0.5 bg-neutral-900"></div>  {/* This is the white line separator */}
-                    {uniqEvents
+                        {uniqEvents
                         .slice(1)
                         .filter(event => event.kind === 1)
                         .sort((a, b) => a.created_at - b.created_at).map((event, index) => (

client/src/utils/subscriptions.ts

@@ -203,3 +203,37 @@ export const subNoteOnce = (
     pubkeys.clear();
   }, 2000);
 };
+
+/** quick subscribe to a note id (nip-19) */
+export const subNotesOnce = (
+  eventIds: string[],
+  onEvent: SubCallback,
+) => {
+  const pubkeys = new Set<string>();
+  sub({
+    cb: (evt, relay) => {
+      pubkeys.add(evt.pubkey);
+      onEvent(evt, relay);
+    },
+    filter: {
+      ids: eventIds,
+      kinds: [1],
+      limit: 1,
+    },
+    unsub: true,
+  });
+
+  setTimeout(() => {
+    // get profile info
+    sub({
+      cb: onEvent,
+      filter: {
+        authors: Array.from(pubkeys),
+        kinds: [0],
+        limit: pubkeys.size,
+      },
+      unsub: true,
+    });
+    pubkeys.clear();
+  }, 2000);
+};