From dad8e1314e080f1b000b4dd5f1bf9c02db9cb621 Mon Sep 17 00:00:00 2001 From: Mathew Date: Wed, 26 Jul 2023 12:59:54 +0300 Subject: [PATCH] update post wizard --- src/components/PostWizard.tsx | 52 +++++++++++++++++++++++------------ src/components/Threads.tsx | 38 ++++++++++--------------- 2 files changed, 49 insertions(+), 41 deletions(-) diff --git a/src/components/PostWizard.tsx b/src/components/PostWizard.tsx index 52ac015..a7da9f1 100644 --- a/src/components/PostWizard.tsx +++ b/src/components/PostWizard.tsx @@ -17,9 +17,13 @@ export default function PostWizard({ const thread = replyingTo ? undefined : router.asPath.split("/")[2] ?? "global"; + const textarea = useRef(null); const { mutate: createPost, isLoading: isPosting } = api.posts.create.useMutation({ + onSettled: (e) => { + updateHeight(); + }, onSuccess: async () => { setInput(""); await ctx.posts.invalidate(); @@ -46,6 +50,7 @@ export default function PostWizard({ toast.error(error); }, }); + const submitPost = () => { createPost({ content: input, @@ -54,40 +59,51 @@ export default function PostWizard({ }); }; - const onSubmit = (e: React.FormEvent) => { - e.preventDefault(); - submitPost(); + const updateHeight = () => { + if (textarea.current) { + console.log("here"); + textarea.current.style.height = "auto"; + textarea.current.style.height = `${textarea.current.scrollHeight}px`; + } }; - const onKeyDownTextarea = (event: KeyboardEvent) => { + const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Enter" && event.ctrlKey) { submitPost(); } }; - const postButton = isPosting ? ( -
- ) : ( - input !== "" && ( - - ) - ); + const onInputChange = (event: React.ChangeEvent) => { + setInput(event.target.value); + updateHeight(); + }; return ( {user && } -
+ submitPost()} + >