add trending notes

2023-06-16 10:01:20 +07:00
parent efea63b0a0
commit f8de44fe9f
38 changed files with 155 additions and 308 deletions
--- a/src/shared/notes/replies/form.tsx
+++ b/src/shared/notes/replies/form.tsx
@@ -0,0 +1,80 @@
+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("");
+
+	const submitEvent = () => {
+		const signer = new NDKPrivateKeySigner(account.privkey);
+		ndk.signer = signer;
+
+		const event = new NDKEvent(ndk);
+		// build event
+		event.content = value;
+		event.kind = 1;
+		event.created_at = dateToUnix();
+		event.pubkey = account.pubkey;
+		event.tags = [["e", id]];
+
+		// publish event
+		event.publish();
+
+		// reset form
+		setValue("");
+	};
+
+	return (
+		<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>
+		</div>
+	);
+}