FrostByte/client-solid/src/NewPost.tsx

64 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-11-14 13:34:14 +01:00
import { JSXElement, Show, createSignal, onMount, useContext } from "solid-js";
2023-11-13 11:50:24 +01:00
import { createPost } from "./api";
import { NewPost } from "./api";
import { useNavigate } from "@solidjs/router";
import { LoginContext } from "./Root";
2023-11-13 12:00:46 +01:00
export function NewPostInputArea(): JSXElement {
2023-11-13 11:50:24 +01:00
const [content, setContent] = createSignal("");
const [waiting, setWaiting] = createSignal(false);
const login_ctx = useContext(LoginContext);
const nav = useNavigate();
2023-11-13 12:00:46 +01:00
const sendPost = (): void => {
2023-11-13 11:50:24 +01:00
setWaiting(true);
const response = createPost({
content: content(),
token: login_ctx?.token(),
} as NewPost);
if (response) {
response.then(() => {
setWaiting(false);
setContent("");
nav("/");
});
}
};
2023-11-14 13:34:14 +01:00
onMount(() => {
if (login_ctx?.token() == "") nav("/");
});
2023-11-13 11:50:24 +01:00
return (
<Show
when={!waiting()}
2023-11-13 12:00:46 +01:00
fallback={
<span class="loading loading-spinner loading-lg self-center"></span>
}
2023-11-13 11:50:24 +01:00
>
<div class="flex flex-col w-full space-y-2">
<textarea
class="textarea textarea-bordered h-32"
placeholder="Speak your mind..."
maxLength={500}
2023-11-13 12:00:46 +01:00
oninput={(input): void => {
2023-11-13 11:50:24 +01:00
setContent(input.target.value);
}}
></textarea>
<button
2023-11-13 12:00:46 +01:00
class={
"btn btn-primary self-end btn-sm" +
(content() == "" ? " btn-disabled" : "")
}
2023-11-13 11:50:24 +01:00
onclick={sendPost}
>
Submit
</button>
</div>
</Show>
);
}