update dependencies and better handle repost

src/shared/notes/kinds/repost.tsx

@@ -1,8 +1,11 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { useQuery } from '@tanstack/react-query';
 import { nip19 } from 'nostr-tools';
 import { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useNDK } from '@libs/ndk/provider';
+
 import {
   ArticleNote,
   FileNote,
@@ -15,28 +18,67 @@ import {
 } from '@shared/notes';
 import { User } from '@shared/user';
 
-import { useEvent } from '@utils/hooks/useEvent';
+export function Repost({ event }: { event: NDKEvent }) {
+  const embedEvent: null | NDKEvent =
+    event.content.length > 0 ? JSON.parse(event.content) : null;
 
-export function Repost({ event, root }: { event: NDKEvent; root?: string }) {
-  const rootPost = root ?? event.tags.find((el) => el[0] === 'e')?.[1];
-  const { status, data } = useEvent(rootPost, null, event.content);
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(
+    ['repost', event.id],
+    async () => {
+      const id = event.tags.find((el) => el[0] === 'e')[1];
+      if (id === undefined) throw new Error('wrong id');
 
-  const renderKind = useCallback(
-    (repostEvent: NDKEvent) => {
-      switch (repostEvent.kind) {
-        case NDKKind.Text:
-          return <TextNote content={repostEvent.content} />;
-        case NDKKind.Article:
-          return <ArticleNote event={repostEvent} />;
-        case 1063:
-          return <FileNote event={repostEvent} />;
-        default:
-          return <UnknownNote event={repostEvent} />;
-      }
+      const ndkEvent = await ndk.fetchEvent(id);
+      if (!ndkEvent) throw new Error('Event not found');
+
+      return ndkEvent;
     },
-    [data]
+    {
+      enabled: embedEvent === null,
+      refetchOnWindowFocus: false,
+    }
   );
 
+  const renderKind = useCallback((repostEvent: NDKEvent) => {
+    switch (repostEvent.kind) {
+      case NDKKind.Text:
+        return <TextNote content={repostEvent.content} />;
+      case NDKKind.Article:
+        return <ArticleNote event={repostEvent} />;
+      case 1063:
+        return <FileNote event={repostEvent} />;
+      default:
+        return <UnknownNote event={repostEvent} />;
+    }
+  }, []);
+
+  if (embedEvent) {
+    return (
+      <div className="h-min w-full px-3 pb-3">
+        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+          <div className="relative flex flex-col">
+            <div className="isolate flex flex-col -space-y-4">
+              <RepostUser pubkey={event.pubkey} />
+              <User
+                pubkey={embedEvent.pubkey}
+                time={embedEvent.created_at}
+                isRepost={true}
+              />
+            </div>
+            <div className="-mt-2 flex items-start gap-3">
+              <div className="w-11 shrink-0" />
+              <div className="relative z-20 flex-1">
+                {renderKind(embedEvent)}
+                <NoteActions id={embedEvent.id} pubkey={embedEvent.pubkey} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (status === 'loading') {
     return (
       <div className="h-min w-full px-3 pb-3">

src/shared/widgets/other/learnNostr.tsx

@@ -47,9 +47,7 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
                         )}
                       </div>
                     </div>
-                    <button type="button">
-                      <ArrowRightIcon className="h-5 w-5 text-white" />
-                    </button>
+                    <ArrowRightIcon className="h-5 w-5 text-white" />
                   </button>
                 ))
               ) : (

src/utils/hooks/useEvent.ts

@@ -7,12 +7,17 @@ import { useStorage } from '@libs/storage/provider';
 
 import { toRawEvent } from '@utils/rawEvent';
 
-export function useEvent(id: string, naddr?: AddressPointer, embed?: string) {
+export function useEvent(
+  id: undefined | string,
+  naddr?: undefined | AddressPointer,
+  embed?: undefined | string
+) {
   const { db } = useStorage();
   const { ndk } = useNDK();
   const { status, data } = useQuery(
     ['event', id],
     async () => {
+      // return event refer from naddr
       if (naddr) {
         const rEvents = await ndk.fetchEvents({
           kinds: [naddr.kind],
@@ -20,11 +25,10 @@ export function useEvent(id: string, naddr?: AddressPointer, embed?: string) {
           authors: [naddr.pubkey],
         });
         const rEvent = [...rEvents].slice(-1)[0];
-
         return rEvent;
       }
 
-      // return embed event (nostr.band api) or repost
+      // return embed event (nostr.band api)
       if (embed) {
         const event: NDKEvent = JSON.parse(embed);
         return event;
@@ -36,7 +40,7 @@ export function useEvent(id: string, naddr?: AddressPointer, embed?: string) {
 
       // get event from relay if event in db not present
       const event = await ndk.fetchEvent(id);
-      if (!event) throw new Error(`Event not found: ${id.toString()}`);
+      if (!event) throw new Error(`Event not found: ${id}`);
 
       const rawEvent = toRawEvent(event);
       await db.createEvent(rawEvent);
@@ -45,7 +49,6 @@ export function useEvent(id: string, naddr?: AddressPointer, embed?: string) {
     },
     {
       enabled: !!ndk,
-      refetchOnMount: false,
       refetchOnWindowFocus: false,
     }
   );