wip

src/shared/notes/replies/list.tsx

@@ -6,7 +6,7 @@ import { Reply } from '@shared/notes';
 import { useNostr } from '@utils/hooks/useNostr';
 import { NDKEventWithReplies } from '@utils/types';
 
-export function ReplyList({ id }: { id: string }) {
+export function ReplyList({ eventId }: { eventId: string }) {
   const { fetchAllReplies, sub } = useNostr();
   const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
 
@@ -14,31 +14,32 @@ export function ReplyList({ id }: { id: string }) {
     let isCancelled = false;
 
     async function fetchRepliesAndSub() {
-      const events = await fetchAllReplies(id);
+      const events = await fetchAllReplies(eventId);
       if (!isCancelled) {
         setData(events);
       }
       // subscribe for new replies
       sub(
         {
-          '#e': [id],
+          '#e': [eventId],
           since: Math.floor(Date.now() / 1000),
         },
         (event: NDKEventWithReplies) => setData((prev) => [event, ...prev]),
         false
       );
     }
+
     fetchRepliesAndSub();
 
     return () => {
       isCancelled = true;
     };
-  }, [id]);
+  }, [eventId]);
 
   if (!data) {
     return (
       <div className="mt-3">
-        <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
+        <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
           <LoaderIcon className="h-5 w-5 animate-spin" />
         </div>
       </div>
@@ -52,12 +53,12 @@ export function ReplyList({ id }: { id: string }) {
           <div className="flex flex-col items-center justify-center gap-2 py-6">
             <h3 className="text-3xl">👋</h3>
             <p className="leading-none text-neutral-600 dark:text-neutral-400">
-              Share your thought on it...
+              Be the first to Reply!
             </p>
           </div>
         </div>
       ) : (
-        data.map((event) => <Reply key={event.id} event={event} root={id} />)
+        data.map((event) => <Reply key={event.id} event={event} root={eventId} />)
       )}
     </div>
   );