reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update thread & add reply form

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-12 14:24:07 +07:00
parent 10f2f530c7
commit 0147a70e8f
5 changed files with 57 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/space/components/blocks/thread.tsx
View File

@@ -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">

6
src/app/space/components/notes/metadata.tsx
View File

@@ -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">

64
src/app/space/components/notes/replies/form.tsx
View File

@@ -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>

6
src/app/space/components/notes/replies/list.tsx
View File

@@ -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} />)
)}

6
src/utils/transform.tsx
View File

@@ -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];
}
}