update post wizard

pingpad-io · Jul 26, 2023 · dad8e13 · dad8e13
1 parent e73c2a9
commit dad8e13
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 41 deletions.
diff --git 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<HTMLTextAreaElement>(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<HTMLTextAreaElement>) => {
+	const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
 		if (event.key === "Enter" && event.ctrlKey) {
 			submitPost();
 		}
 	};
 
-	const postButton = isPosting ? (
-		<div className="btn-outline loading btn-circle btn" />
-	) : (
-		input !== "" && (
-			<button className="btn-outline btn-primary btn w-16" type="submit">
-				Twot
-			</button>
-		)
-	);
+	const onInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+		setInput(event.target.value);
+		updateHeight();
+	};
 
 	return (
 		<GlassBar>
 			{user && <PostWizardAuthed userId={user.id} />}
-			<form className="flex w-full flex-row gap-4" onSubmit={onSubmit}>
+			<form
+				className="flex w-full flex-row gap-4"
+				onSubmit={(_e) => submitPost()}
+			>
 				<textarea
-					className="border-base-300 textarea textarea-xs text-base h-4 textarea-bordered shrink grow"
+					ref={textarea}
+					className="textarea min-h-2 text-base h-2 overflow-hidden resize-none shrink grow"
+					rows={1}
 					placeholder={placeholder}
-					onKeyDown={(e) => onKeyDownTextarea(e)}
+					onKeyDown={onKeyDown}
+					onChange={onInputChange}
 					value={input}
-					onChange={(e) => setInput(e.target.value)}
 					disabled={isPosting}
 				/>
-				{postButton}
+				{isPosting ? (
+					<div className="btn-outline loading btn-circle btn" />
+				) : (
+					input !== "" && (
+						<button className="btn-outline btn-primary btn w-16" type="submit">
+							Twot
+						</button>
+					)
+				)}
 			</form>
 		</GlassBar>
 	);

diff --git a/src/components/Threads.tsx b/src/components/Threads.tsx
@@ -4,17 +4,17 @@ import { BiLabel } from "react-icons/bi";
 import { useUser } from "@supabase/auth-helpers-react";
 import Link from "next/link";
 import { toast } from "react-hot-toast";
-import { BsPlus } from "react-icons/bs";
+import { BsPlus, BsStar } from "react-icons/bs";
 import ModalWizard from "./ModalWizard";
 import { ThreadLink } from "./ThreadLink";
 import ThreadWizard from "./ThreadWizard";
 import { Thread } from "~/server/api/routers/threads";
+import { useRouter } from "next/router";
 
 export function GlobalThreads() {
 	const { data: threads } = api.threads.get.useQuery({});
-	const globalThreads = threads?.filter((thread) => thread.authorId === null);
 
-	const globalThreadList = globalThreads?.map((thread) => {
+	const globalThreadList = threads?.map((thread) => {
 		if (!thread.name) return null;
 
 		return <ThreadEntry key={thread.id} thread={thread} />;
@@ -23,24 +23,16 @@ export function GlobalThreads() {
 	return <div className="card-content">{globalThreadList}</div>;
 }
 
-export function UserThreads() {
-	const { data: threads } = api.threads.get.useQuery({});
-	const userThreads = threads?.filter((thread) => thread.authorId !== null);
-
-	const userThreadList = userThreads?.map((thread) => {
-		return <ThreadEntry thread={thread} key={thread.id} />;
-	});
-
-	return <div className="card-content">{userThreadList}</div>;
-}
-
 const ThreadEntry = ({ thread }: { thread: Thread }) => {
-	const user = useUser();
-	const ctx = api.useContext();
-
 	if (!thread || !thread.name) return null;
 
+	const user = useUser();
+	const ctx = api.useContext();
+	const router = useRouter();
+	const currentThread = router.asPath.split("/")[2] ?? "";
 	const isGlobal = thread.authorId === null;
+	const isCurrent = currentThread === thread.name;
+
 	const deleteThread = api.threads.delete.useMutation({
 		onSuccess: async () => {
 			await ctx.threads.invalidate();
@@ -58,9 +50,12 @@ const ThreadEntry = ({ thread }: { thread: Thread }) => {
 			className="flex flex-row place-items-center gap-2 px-4 py-2"
 		>
 			<ThreadLink thread={thread.name}>
-				<span className="flex flex-row items-center gap-2">
-					{isGlobal && <BiLabel />}
-					<span className="hover:underline">{thread.title}</span>
+				<span
+					className={`flex flex-row items-center gap-2 ${
+						isCurrent && "font-bold"
+					}`}
+				>
+					<span className={"hover:underline "}>{thread.title}</span>
 					<span className={"text-sm"}>{thread.posts.length}</span>
 					<FiMessageSquare />
 				</span>
@@ -92,9 +87,6 @@ export default function Threads() {
 			<div className="card-content">
 				<GlobalThreads />
 			</div>
-			<div className="card-content">
-				<UserThreads />
-			</div>
 		</div>
 	);
 }