From 0147a70e8f5ede8db49343692fa5e8153d6455ea Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 12 Jun 2023 14:24:07 +0700
Subject: [PATCH] update thread & add reply form

---
 src/app/space/components/blocks/thread.tsx    |  4 ++
 src/app/space/components/notes/metadata.tsx   |  6 +-
 .../space/components/notes/replies/form.tsx   | 64 ++++++++++++-------
 .../space/components/notes/replies/list.tsx   |  6 ++
 src/utils/transform.tsx                       |  6 +-
 5 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/src/app/space/components/blocks/thread.tsx b/src/app/space/components/blocks/thread.tsx
index 3eeeac49..10c09034 100644
--- a/src/app/space/components/blocks/thread.tsx
+++ b/src/app/space/components/blocks/thread.tsx
@@ -1,6 +1,7 @@
 import { Kind1 } from "@app/space/components/notes/kind1";
 import { Kind1063 } from "@app/space/components/notes/kind1063";
 import { NoteMetadata } from "@app/space/components/notes/metadata";
+import { NoteReplyForm } from "@app/space/components/notes/replies/form";
 import { RepliesList } from "@app/space/components/notes/replies/list";
 import { NoteSkeleton } from "@app/space/components/notes/skeleton";
 import { NoteDefaultUser } from "@app/space/components/user/default";
@@ -54,6 +55,9 @@ export function ThreadBlock({ params }: { params: any }) {
 								<NoteMetadata id={params.content} eventPubkey={data.pubkey} />
 							</div>
 						</div>
+						<div className="mt-3 bg-zinc-900 rounded-md">
+							<NoteReplyForm id={data.id} />
+						</div>
 					</div>
 				)}
 				<div className="px-3">
diff --git a/src/app/space/components/notes/metadata.tsx b/src/app/space/components/notes/metadata.tsx
index eef4a942..d02d4663 100644
--- a/src/app/space/components/notes/metadata.tsx
+++ b/src/app/space/components/notes/metadata.tsx
@@ -68,7 +68,11 @@ export function NoteMetadata({
 	const { data } = useSWR(["note-metadata", ndk, id], fetcher);
 
 	return (
-		<div className="inline-flex items-center gap-2 w-full h-12 mt-4">
+		<div
+			onClick={(e) => e.stopPropagation()}
+			onKeyDown={(e) => e.stopPropagation()}
+			className="inline-flex items-center gap-2 w-full h-12 mt-4"
+		>
 			{!data ? (
 				<>
 					<div className="w-20 group inline-flex items-center gap-1.5">
diff --git a/src/app/space/components/notes/replies/form.tsx b/src/app/space/components/notes/replies/form.tsx
index ebf83c2e..aeab8537 100644
--- a/src/app/space/components/notes/replies/form.tsx
+++ b/src/app/space/components/notes/replies/form.tsx
@@ -1,12 +1,16 @@
 import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
+import { DEFAULT_AVATAR } from "@stores/constants";
 import { dateToUnix } from "@utils/date";
+import { useProfile } from "@utils/hooks/useProfile";
 import { useContext, useState } from "react";
 
 export function NoteReplyForm({ id }: { id: string }) {
 	const ndk = useContext(RelayContext);
 	const account = useActiveAccount((state: any) => state.account);
+	const { user } = useProfile(account.npub);
 
 	const [value, setValue] = useState("");
 
@@ -30,30 +34,44 @@ export function NoteReplyForm({ id }: { id: string }) {
 	};
 
 	return (
-		<div className="flex gap-2.5 py-4">
-			<div className="relative h-24 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
-				<div>
-					<textarea
-						name="content"
-						onChange={(e) => setValue(e.target.value)}
-						placeholder="Reply to this thread..."
-						className="relative h-24 w-full resize-none rounded-md border border-black/5 px-3.5 py-3 text-base shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
-						spellCheck={false}
-					/>
-				</div>
-				<div className="absolute bottom-2 w-full px-2">
-					<div className="flex w-full items-center justify-between bg-zinc-800">
-						<div className="flex items-center gap-2 divide-x divide-zinc-700" />
-						<div className="flex items-center gap-2">
-							<button
-								type="button"
-								onClick={() => submitEvent()}
-								disabled={value.length === 0 ? true : false}
-								className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-							>
-								Reply
-							</button>
+		<div className="flex flex-col">
+			<div className="relative w-full flex-1 overflow-hidden">
+				<textarea
+					name="content"
+					onChange={(e) => setValue(e.target.value)}
+					placeholder="Reply to this thread..."
+					className="relative h-20 w-full resize-none rounded-md px-5 py-5 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-white dark:placeholder:text-zinc-500"
+					spellCheck={false}
+				/>
+			</div>
+			<div className="border-t border-zinc-800 w-full py-3 px-5">
+				<div className="flex w-full items-center justify-between">
+					<div className="inline-flex items-center gap-2">
+						<div className="relative h-8 w-8 shrink-0 rounded">
+							<Image
+								src={user?.image || DEFAULT_AVATAR}
+								alt={account.npub}
+								className="h-8 w-8 rounded bg-white object-cover"
+							/>
 						</div>
+						<div>
+							<p className="mb-px leading-none text-sm text-zinc-400">
+								Reply as
+							</p>
+							<p className="leading-none text-sm font-medium text-zinc-100">
+								{user?.nip05 || user?.name}
+							</p>
+						</div>
+					</div>
+					<div className="flex items-center gap-2">
+						<button
+							type="button"
+							onClick={() => submitEvent()}
+							disabled={value.length === 0 ? true : false}
+							className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							Reply
+						</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/app/space/components/notes/replies/list.tsx b/src/app/space/components/notes/replies/list.tsx
index d06c9f9e..1df39bbf 100644
--- a/src/app/space/components/notes/replies/list.tsx
+++ b/src/app/space/components/notes/replies/list.tsx
@@ -33,6 +33,12 @@ export function RepliesList({ id }: { id: string }) {
 							<div className="h-4 w-44 animate-pulse rounded-sm bg-zinc-800" />
 						</div>
 					</div>
+				) : data.length === 0 ? (
+					<div className="px=3">
+						<div className="w-full h-24 flex items-center justify-center rounded-md bg-zinc-900">
+							<p className="text-zinc-300 font-medium">No replies...</p>
+						</div>
+					</div>
 				) : (
 					data.map((event: NDKEvent) => <Reply key={event.id} data={event} />)
 				)}
diff --git a/src/utils/transform.tsx b/src/utils/transform.tsx
index 89d5088e..8d413694 100644
--- a/src/utils/transform.tsx
+++ b/src/utils/transform.tsx
@@ -87,11 +87,7 @@ export function getQuoteID(arr: string[]) {
 		if (tags[0][0] === "e") {
 			quoteID = tags[0][1];
 		} else {
-			tags.forEach((tag) => {
-				if (tag[0] === "e") {
-					quoteID = tag[1];
-				}
-			});
+			quoteID = tags.find((t) => t[0] === "e")?.[1];
 		}
 	}