From 53e62cee803ad05546cbf655728abcaa7051f543 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Wed, 17 Apr 2024 07:30:52 +0700
Subject: [PATCH] fix: prevent app crash in some cases

---
 .../ark/src/components/note/buttons/pin.tsx   | 65 +++++++------
 .../ark/src/components/note/preview/image.tsx | 95 ++++++++++---------
 .../src/components/note/primitives/thread.tsx | 74 ++++++++-------
 3 files changed, 121 insertions(+), 113 deletions(-)

diff --git a/packages/ark/src/components/note/buttons/pin.tsx b/packages/ark/src/components/note/buttons/pin.tsx
index 6125f4e31..b439b19f6 100644
--- a/packages/ark/src/components/note/buttons/pin.tsx
+++ b/packages/ark/src/components/note/buttons/pin.tsx
@@ -4,39 +4,42 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 import { useTranslation } from "react-i18next";
 import { useColumnContext } from "../../column/provider";
 import { useNoteContext } from "../provider";
+import { toast } from "sonner";
 
 export function NotePin() {
-	const event = useNoteContext();
+  const { t } = useTranslation();
+  const { addColumn } = useColumnContext();
+  const event = useNoteContext();
 
-	const { t } = useTranslation();
-	const { addColumn } = useColumnContext();
+  const pin = async () => {
+    if (!event) toast.error("Something is wrong!");
+    await addColumn({
+      kind: COL_TYPES.thread,
+      title: "Thread",
+      content: event?.id,
+    });
+  };
 
-	return (
-		<Tooltip.Provider>
-			<Tooltip.Root delayDuration={150}>
-				<Tooltip.Trigger asChild>
-					<button
-						type="button"
-						onClick={async () =>
-							await addColumn({
-								kind: COL_TYPES.thread,
-								title: "Thread",
-								content: event.id,
-							})
-						}
-						className="inline-flex items-center justify-center gap-2 pl-2 pr-3 text-sm font-medium rounded-full h-7 w-max bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800 dark:bg-neutral-900"
-					>
-						<PinIcon className="size-4" />
-						{t("note.buttons.pin")}
-					</button>
-				</Tooltip.Trigger>
-				<Tooltip.Portal>
-					<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
-						{t("note.buttons.pinTooltip")}
-						<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
-					</Tooltip.Content>
-				</Tooltip.Portal>
-			</Tooltip.Root>
-		</Tooltip.Provider>
-	);
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={() => pin()}
+            className="inline-flex items-center justify-center gap-2 pl-2 pr-3 text-sm font-medium rounded-full h-7 w-max bg-neutral-100 hover:bg-neutral-200 dark:hover:bg-neutral-800 dark:bg-neutral-900"
+          >
+            <PinIcon className="size-4" />
+            {t("note.buttons.pin")}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+            {t("note.buttons.pinTooltip")}
+            <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
 }
diff --git a/packages/ark/src/components/note/preview/image.tsx b/packages/ark/src/components/note/preview/image.tsx
index 883ac33c7..5f850553e 100644
--- a/packages/ark/src/components/note/preview/image.tsx
+++ b/packages/ark/src/components/note/preview/image.tsx
@@ -3,59 +3,60 @@ import { downloadDir } from "@tauri-apps/api/path";
 import { Window } from "@tauri-apps/api/window";
 import { download } from "@tauri-apps/plugin-upload";
 import { SyntheticEvent, useState } from "react";
+import { useNoteContext } from "../provider";
 
 export function ImagePreview({ url }: { url: string }) {
-	const [downloaded, setDownloaded] = useState(false);
+  const event = useNoteContext();
+  const [downloaded, setDownloaded] = useState(false);
 
-	const downloadImage = async (e: { stopPropagation: () => void }) => {
-		try {
-			e.stopPropagation();
+  const downloadImage = async (e: { stopPropagation: () => void }) => {
+    try {
+      e.stopPropagation();
 
-			const downloadDirPath = await downloadDir();
-			const filename = url.substring(url.lastIndexOf("/") + 1);
-			await download(url, `${downloadDirPath}/${filename}`);
+      const downloadDirPath = await downloadDir();
+      const filename = url.substring(url.lastIndexOf("/") + 1);
+      await download(url, `${downloadDirPath}/${filename}`);
 
-			setDownloaded(true);
-		} catch (e) {
-			console.error(e);
-		}
-	};
+      setDownloaded(true);
+    } catch (e) {
+      console.error(e);
+    }
+  };
 
-	const open = async () => {
-		const name = new URL(url).pathname.split("/").pop();
-		return new Window("image-viewer", {
-			url,
-			title: name,
-		});
-	};
+  const open = async () => {
+    return new Window(`image-viewer-${event.id}`, {
+      url,
+      title: "Image Viewer",
+    });
+  };
 
-	const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
-		event.currentTarget.src = "/fallback-image.jpg";
-	};
+  const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
+    event.currentTarget.src = "/fallback-image.jpg";
+  };
 
-	return (
-		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-		<div onClick={open} className="relative mt-1 mb-2.5 group">
-			<img
-				src={url}
-				alt={url}
-				loading="lazy"
-				decoding="async"
-				style={{ contentVisibility: "auto" }}
-				onError={fallback}
-				className="object-cover w-full h-auto border rounded-xl border-neutral-200/50 dark:border-neutral-800/50"
-			/>
-			<button
-				type="button"
-				onClick={(e) => downloadImage(e)}
-				className="absolute z-10 items-center justify-center hidden size-10 bg-white/10 text-black/70 backdrop-blur-xl rounded-lg right-2 top-2 group-hover:inline-flex hover:bg-blue-500 hover:text-white"
-			>
-				{downloaded ? (
-					<CheckCircleIcon className="size-5" />
-				) : (
-					<DownloadIcon className="size-5" />
-				)}
-			</button>
-		</div>
-	);
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    <div onClick={open} className="relative mt-1 mb-2.5 group">
+      <img
+        src={url}
+        alt={url}
+        loading="lazy"
+        decoding="async"
+        style={{ contentVisibility: "auto" }}
+        onError={fallback}
+        className="object-cover w-full h-auto border rounded-xl border-neutral-200/50 dark:border-neutral-800/50"
+      />
+      <button
+        type="button"
+        onClick={(e) => downloadImage(e)}
+        className="absolute z-10 items-center justify-center hidden size-10 bg-white/10 text-black/70 backdrop-blur-xl rounded-lg right-2 top-2 group-hover:inline-flex hover:bg-blue-500 hover:text-white"
+      >
+        {downloaded ? (
+          <CheckCircleIcon className="size-5" />
+        ) : (
+          <DownloadIcon className="size-5" />
+        )}
+      </button>
+    </div>
+  );
 }
diff --git a/packages/ark/src/components/note/primitives/thread.tsx b/packages/ark/src/components/note/primitives/thread.tsx
index 236d23b90..d95904111 100644
--- a/packages/ark/src/components/note/primitives/thread.tsx
+++ b/packages/ark/src/components/note/primitives/thread.tsx
@@ -3,41 +3,45 @@ import { useEvent } from "../../../hooks/useEvent";
 import { User } from "../../user";
 
 export function ThreadNote({ eventId }: { eventId: string }) {
-	const { isLoading, data } = useEvent(eventId);
+  const { isLoading, isError, data } = useEvent(eventId);
 
-	if (isLoading) {
-		return <div>Loading...</div>;
-	}
+  if (isLoading || !data) {
+    return <div>Loading...</div>;
+  }
 
-	return (
-		<Note.Provider event={data}>
-			<Note.Root className="flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950">
-				<div className="flex items-center justify-between px-3 h-16">
-					<User.Provider pubkey={data.pubkey}>
-						<User.Root className="flex h-16 items-center gap-3 flex-1">
-							<User.Avatar className="size-10 shrink-0 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
-							<div className="flex flex-1 flex-col">
-								<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
-								<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
-									<User.Time time={data.created_at} />
-									<span>·</span>
-									<User.NIP05 pubkey={data.pubkey} />
-								</div>
-							</div>
-						</User.Root>
-					</User.Provider>
-					<Note.Menu />
-				</div>
-				<Note.Thread className="mb-2" />
-				<Note.Content className="min-w-0 px-3" />
-				<div className="flex items-center justify-between px-3 h-14">
-					<Note.Pin />
-					<div className="inline-flex items-center gap-4">
-						<Note.Repost />
-						<Note.Zap />
-					</div>
-				</div>
-			</Note.Root>
-		</Note.Provider>
-	);
+  if (isError) {
+    return <div>Error</div>;
+  }
+
+  return (
+    <Note.Provider event={data}>
+      <Note.Root className="flex flex-col rounded-xl bg-neutral-50 dark:bg-neutral-950">
+        <div className="flex items-center justify-between px-3 h-16">
+          <User.Provider pubkey={data.pubkey}>
+            <User.Root className="flex h-16 items-center gap-3 flex-1">
+              <User.Avatar className="size-10 shrink-0 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
+              <div className="flex flex-1 flex-col">
+                <User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
+                <div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
+                  <User.Time time={data.created_at} />
+                  <span>·</span>
+                  <User.NIP05 pubkey={data.pubkey} />
+                </div>
+              </div>
+            </User.Root>
+          </User.Provider>
+          <Note.Menu />
+        </div>
+        <Note.Thread className="mb-2" />
+        <Note.Content className="min-w-0 px-3" />
+        <div className="flex items-center justify-between px-3 h-14">
+          <Note.Pin />
+          <div className="inline-flex items-center gap-4">
+            <Note.Repost />
+            <Note.Zap />
+          </div>
+        </div>
+      </Note.Root>
+    </Note.Provider>
+  );
 }