update single note screen

src/shared/notes/replies/list.tsx

@@ -8,42 +8,51 @@ import { NDKEventWithReplies } from '@utils/types';
 
 export function RepliesList({ id }: { id: string }) {
   const { ndk } = useNDK();
-  const { status, data } = useQuery(['note-replies', id], async () => {
-    const events = await ndk.fetchEvents({
-      kinds: [1],
-      '#e': [id],
-    });
+  const { status, data } = useQuery(
+    ['note-replies', id],
+    async () => {
+      try {
+        const events = await ndk.fetchEvents({
+          kinds: [1],
+          '#e': [id],
+        });
 
-    const array = [...events] as unknown as NDKEventWithReplies[];
+        const array = [...events] as unknown as NDKEventWithReplies[];
 
-    if (array.length > 0) {
-      const replies = new Set();
-      array.forEach((event) => {
-        const tags = event.tags.filter((el) => el[0] === 'e' && el[1] !== id);
-        if (tags.length > 0) {
-          tags.forEach((tag) => {
-            const rootIndex = array.findIndex((el) => el.id === tag[1]);
-            if (rootIndex) {
-              const rootEvent = array[rootIndex];
-              if (rootEvent.replies) {
-                rootEvent.replies.push(event);
-              } else {
-                rootEvent.replies = [event];
-              }
-              replies.add(event.id);
+        if (array.length > 0) {
+          const replies = new Set();
+          array.forEach((event) => {
+            const tags = event.tags.filter((el) => el[0] === 'e' && el[1] !== id);
+            if (tags.length > 0) {
+              tags.forEach((tag) => {
+                const rootIndex = array.findIndex((el) => el.id === tag[1]);
+                if (rootIndex !== -1) {
+                  const rootEvent = array[rootIndex];
+                  if (rootEvent && rootEvent.replies) {
+                    rootEvent.replies.push(event);
+                  } else {
+                    rootEvent.replies = [event];
+                  }
+                  replies.add(event.id);
+                }
+              });
             }
           });
+          const cleanEvents = array.filter((ev) => !replies.has(ev.id));
+          return cleanEvents;
         }
-      });
-      const cleanEvents = array.filter((ev) => !replies.has(ev.id));
-      return cleanEvents;
-    }
-    return array;
-  });
+
+        return array;
+      } catch (e) {
+        throw new Error(e);
+      }
+    },
+    { enabled: !!ndk }
+  );
 
   if (status === 'loading') {
     return (
-      <div className="mt-3">
+      <div className="mt-5 pb-10">
         <div className="flex flex-col">
           <div className="rounded-xl bg-white/10 px-3 py-3">
             <NoteSkeleton />
@@ -53,19 +62,29 @@ export function RepliesList({ id }: { id: string }) {
     );
   }
 
-  return (
-    <div className="mt-3 pb-10">
-      <div className="mb-2">
-        <h5 className="text-lg font-semibold text-white">{data?.length || 0} replies</h5>
+  if (status === 'error') {
+    return (
+      <div className="mt-5 pb-10">
+        <div className="flex flex-col">
+          <div className="rounded-xl bg-white/10 px-3 py-3">
+            <p>Error: failed to get replies</p>
+          </div>
+        </div>
       </div>
-      <div className="flex flex-col">
+    );
+  }
+
+  return (
+    <div className="mt-5 pb-10">
+      <h5 className="mb-5 text-lg font-semibold text-white">
+        {data?.length || 0} replies
+      </h5>
+      <div className="flex flex-col gap-3">
         {data?.length === 0 ? (
-          <div className="px=3">
-            <div className="flex w-full items-center justify-center rounded-xl bg-white/10">
-              <div className="flex flex-col items-center justify-center gap-2 py-6">
-                <h3 className="text-3xl">👋</h3>
-                <p className="leading-none text-white/50">Share your thought on it...</p>
-              </div>
+          <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10">
+            <div className="flex flex-col items-center justify-center gap-2 py-6">
+              <h3 className="text-3xl">👋</h3>
+              <p className="leading-none text-white/50">Share your thought on it...</p>
             </div>
           </div>
         ) : (