From bdd9843f4d488ccb34171f9813ddcafc954d8c5a Mon Sep 17 00:00:00 2001 From: Tom Sherman Date: Fri, 19 Jul 2024 23:56:32 +0100 Subject: [PATCH] WIP Ignore errors while prototyping WIP WIP Simple formatting WIP --- .vscode/launch.json | 9 +- .../[postAuthor]/[postRkey]/_lib/actions.tsx | 43 ++- .../[postRkey]/_lib/comment-client.tsx | 32 +- .../editor-state-to-comment-content.test.ts | 153 ++++++++ .../_lib/editor-state-to-comment-content.ts | 94 +++++ .../frontpage/lib/components/ui/textarea.tsx | 303 ++++++++++++++- .../lib/components/ui/toggle-group.tsx | 61 +++ .../frontpage/lib/components/ui/toggle.tsx | 45 +++ packages/frontpage/lib/utils.ts | 9 + packages/frontpage/package.json | 10 + pnpm-lock.yaml | 351 +++++++++++++++++- 11 files changed, 1062 insertions(+), 48 deletions(-) create mode 100644 packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/editor-state-to-comment-content.test.ts create mode 100644 packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/editor-state-to-comment-content.ts create mode 100644 packages/frontpage/lib/components/ui/toggle-group.tsx create mode 100644 packages/frontpage/lib/components/ui/toggle.tsx diff --git a/.vscode/launch.json b/.vscode/launch.json index 5cf078b5..2580d91b 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -15,7 +15,7 @@ }, "args": [], "cwd": "${workspaceFolder}/packages-rs/drainpipe", - "envFile": "${workspaceFolder}/packages-rs/drainpipe/.env" + "envFile": "${workspaceFolder}/packages-rs/drainpipe/.env" }, { "type": "lldb", @@ -30,6 +30,13 @@ }, "args": [], "cwd": "${workspaceFolder}" + }, + { + "name": "Frontpage: debug full stack", + "type": "node-terminal", + "request": "launch", + "cwd": "${workspaceFolder}", + "command": "pnpm --filter=frontpage run dev" } ] } diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/actions.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/actions.tsx index 1713213d..282ef4e1 100644 --- a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/actions.tsx +++ b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/actions.tsx @@ -1,10 +1,6 @@ "use server"; -import { - CommentCollection, - createComment, - deleteComment, -} from "@/lib/data/atproto/comment"; +import { CommentCollection, deleteComment } from "@/lib/data/atproto/comment"; import { DID } from "@/lib/data/atproto/did"; import { deletePost } from "@/lib/data/atproto/post"; import { createVote, deleteVote } from "@/lib/data/atproto/vote"; @@ -12,16 +8,17 @@ import { getComment, uncached_doesCommentExist } from "@/lib/data/db/comment"; import { getPost } from "@/lib/data/db/post"; import { getVoteForComment } from "@/lib/data/db/vote"; import { ensureUser } from "@/lib/data/user"; -import { revalidatePath } from "next/cache"; +import { createHeadlessEditor } from "@lexical/headless"; +import { SerializedEditorState, RootNode } from "lexical"; +import { editorStateToCommentContent } from "./editor-state-to-comment-content"; -export async function createCommentAction( - input: { parentRkey?: string; postRkey: string; postAuthorDid: DID }, - _prevState: unknown, - formData: FormData, -) { - const content = formData.get("comment") as string; +export async function createCommentAction(input: { + parentRkey?: string; + postRkey: string; + postAuthorDid: DID; + content: SerializedEditorState; +}) { const user = await ensureUser(); - console.log(input); const [post, comment] = await Promise.all([ getPost(input.postAuthorDid, input.postRkey), @@ -41,13 +38,16 @@ export async function createCommentAction( throw new Error(`[naughty] Cannot comment on deleted post. ${user.did}`); } - const { rkey } = await createComment({ - content, - post, - parent: comment, - }); - await waitForComment(rkey); - revalidatePath(`/post`); + const state = createHeadlessEditor().parseEditorState(input.content); + editorStateToCommentContent(state); + + // const { rkey } = await createComment({ + // content, + // post, + // parent: comment, + // }); + // await waitForComment(rkey); + // revalidatePath(`/post`); } const MAX_POLLS = 15; @@ -97,3 +97,6 @@ export async function commentUnvoteAction(commentId: number) { await deleteVote(vote.rkey); } +function $getDepth(node: RootNode) { + throw new Error("Function not implemented."); +} diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx index 4d214035..d2d9cd61 100644 --- a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx +++ b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx @@ -11,7 +11,7 @@ import { AlertDialogTrigger, } from "@/lib/components/ui/alert-dialog"; import { Button } from "@/lib/components/ui/button"; -import { Textarea } from "@/lib/components/ui/textarea"; +import { EditableTextArea, Textarea } from "@/lib/components/ui/textarea"; import { SimpleTooltip } from "@/lib/components/ui/tooltip"; import { useToast } from "@/lib/components/ui/use-toast"; import { @@ -27,6 +27,7 @@ import { useState, useId, startTransition, + useTransition, } from "react"; import { VoteButton, @@ -37,6 +38,7 @@ import { DID } from "@/lib/data/atproto/did"; import { InputLengthIndicator } from "@/lib/components/input-length-indicator"; import { MAX_COMMENT_LENGTH } from "@/lib/data/db/constants"; import type { CommentModel } from "@/lib/data/db/comment"; +import { LexicalEditor } from "lexical"; export type CommentClientProps = Pick< CommentModel, @@ -224,7 +226,6 @@ export function NewComment({ postRkey, postAuthorDid, extraButton, - textAreaRef, onActionDone, }: { parentRkey?: string; @@ -235,23 +236,28 @@ export function NewComment({ extraButton?: React.ReactNode; textAreaRef?: React.RefObject; }) { + const editorRef = useRef(null); const [input, setInput] = useState(""); - const [_, action, isPending] = useActionState( - createCommentAction.bind(null, { parentRkey, postRkey, postAuthorDid }), - undefined, - ); + const [isPending, startTransition] = useTransition(); + const id = useId(); const textAreaId = `${id}-comment`; return (
{ event.preventDefault(); - startTransition(() => { - action(new FormData(event.currentTarget)); + startTransition(async () => { + const state = editorRef.current?.getEditorState().toJSON(); + if (!state) throw new Error("Empty comment"); + console.log(state); + await createCommentAction({ + parentRkey, + postRkey, + postAuthorDid, + content: state, + }); onActionDone?.(); - setInput(""); }); }} aria-busy={isPending} @@ -269,7 +275,7 @@ export function NewComment({ }} >
-