74 lines
2 KiB
TypeScript
74 lines
2 KiB
TypeScript
import { useNavigate } from "@solidjs/router";
|
|
import { JSXElement, Show, createSignal, onMount, useContext } from "solid-js";
|
|
|
|
import { LoginContext } from "../Context/GlobalState";
|
|
import { NewComment, createComment } from "../Util/api";
|
|
|
|
/** 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,
|
|
}: {
|
|
parentPostId: number;
|
|
}): 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,
|
|
} as NewComment);
|
|
|
|
if (response) {
|
|
response.then(() => {
|
|
setWaiting(false);
|
|
setContent("");
|
|
nav("/");
|
|
});
|
|
}
|
|
};
|
|
|
|
// Bail out if not logged in
|
|
onMount(() => {
|
|
if (!login_ctx.loggedIn()) nav("/");
|
|
});
|
|
|
|
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>
|
|
);
|
|
}
|