improve error handling for useevent hook

src/shared/notes/child.tsx

@@ -4,12 +4,22 @@ import { User } from '@shared/user';
 import { useEvent } from '@utils/hooks/useEvent';
 
 export function ChildNote({ id, isRoot }: { id: string; isRoot?: boolean }) {
-  const { status, data } = useEvent(id);
+  const { isFetching, isError, data } = useEvent(id);
 
-  if (status === 'pending' || !data) {
+  if (isFetching) {
     return <NoteSkeleton />;
   }
 
+  if (isError) {
+    return (
+      <div className="relative flex gap-3">
+        <div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
+          Failed to fetch event
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="relative flex gap-3">
       <div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">

src/shared/notes/mentions/note.tsx

@@ -20,7 +20,7 @@ export const MentionNote = memo(function MentionNote({
   id: string;
   editing?: boolean;
 }) {
-  const { status, data } = useEvent(id);
+  const { isFetching, isError, data } = useEvent(id);
   const { addWidget } = useWidget();
 
   const renderKind = (event: NDKEvent) => {
@@ -36,7 +36,7 @@ export const MentionNote = memo(function MentionNote({
     }
   };
 
-  if (status === 'pending') {
+  if (isFetching) {
     return (
       <div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
         <NoteSkeleton />
@@ -44,6 +44,14 @@ export const MentionNote = memo(function MentionNote({
     );
   }
 
+  if (isError) {
+    return (
+      <div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+        Failed to fetch event
+      </div>
+    );
+  }
+
   return (
     <div className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
       <div className="mt-3 px-3">

src/shared/widgets/thread.tsx

@@ -21,7 +21,7 @@ import { useNostr } from '@utils/hooks/useNostr';
 import { Widget } from '@utils/types';
 
 export function ThreadWidget({ widget }: { widget: Widget }) {
-  const { status, data } = useEvent(widget.content);
+  const { isFetching, isError, data } = useEvent(widget.content);
   const { getEventThread } = useNostr();
 
   const renderKind = useCallback(
@@ -59,16 +59,22 @@ export function ThreadWidget({ widget }: { widget: Widget }) {
     <WidgetWrapper>
       <TitleBar id={widget.id} title={widget.title} />
       <WVList className="flex-1 overflow-y-auto px-3 pb-5">
-        {status === 'pending' ? (
+        {isFetching ? (
           <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 px-3 py-3 dark:bg-neutral-950">
             <LoaderIcon className="h-5 w-5 animate-spin" />
           </div>
         ) : (
           <>
             <div className="flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950">
-              <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
-              {renderKind(data)}
-              <NoteActions event={data} />
+              {isError ? (
+                <div>Failed to fetch event</div>
+              ) : (
+                <>
+                  <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
+                  {renderKind(data)}
+                  <NoteActions event={data} />
+                </>
+              )}
             </div>
             <NoteReplyForm rootEvent={data} />
             <ReplyList eventId={data.id} />