FrostByte/client-solid/src/Components/NewComment.tsx

74 lines
2.1 KiB
TypeScript

import { useNavigate } from "@solidjs/router";
import { JSXElement, Show, createSignal, useContext } from "solid-js";
import { LoginContext } from "../Context/GlobalState";
import { NewComment, createComment } from "../Util/api";
interface NewCommentInputAreaProps {
parentPostId: number;
parentCommentId: number | null;
}
/** NewCommentInputArea is a component that allows users to submit a comment on a **post or comment**.
* @param {Object} props The properties for the NewCommentInputArea component.
* @param {number} props.parentPostId The id of the post that the comment is a reply to.
* @returns {JSXElement} A JSXElement that contains a textarea and a submit button.
*/
export function NewCommentInputArea({
parentPostId,
parentCommentId,
}: NewCommentInputAreaProps): JSXElement {
const [content, setContent] = createSignal("");
const [waiting, setWaiting] = createSignal(false);
// We assumte this context is always available
const login_ctx = useContext(LoginContext)!;
const nav = useNavigate();
const sendComment = (): void => {
setWaiting(true);
const response = createComment({
content: content(),
user_token: login_ctx.token(),
parent_post_id: parentPostId,
parent_comment_id: parentCommentId,
} as NewComment);
if (response) {
response.then(() => {
setWaiting(false);
setContent("");
nav("/post/" + parentPostId);
});
}
};
return (
<Show
when={!waiting()}
fallback={<span class="loading loading-spinner loading-lg self-center" />}
>
<div class="flex w-full flex-col space-y-2">
<textarea
class="textarea textarea-bordered h-32"
placeholder="Reply to post..."
maxLength={500}
onInput={(input): void => {
setContent(input.target.value);
}}
/>
<button
class={
"btn btn-primary btn-sm self-end" +
(content() == "" ? " btn-disabled" : "")
}
onClick={sendComment}
>
Submit
</button>
</div>
</Show>
);
}