"use client"; import CommentaryItem from "@/app/[language]/commentary/components/CommentaryItem"; import useGetCommentary from "@/app/[language]/commentary/query/useGetCommentary"; import usePostCommentary from "@/app/[language]/commentary/query/usePostCommentary"; import { useTranslations } from "next-intl"; import { useState } from "react"; import { PencilFill } from "react-bootstrap-icons"; import Button from "react-bootstrap/Button"; import FormControl from "react-bootstrap/FormControl"; import InputGroup from "react-bootstrap/InputGroup"; import InputGroupText from "react-bootstrap/InputGroupText"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; import Stack from "react-bootstrap/Stack"; import ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; import { getDatetime } from "taehui-lib/date"; export default function Page() { const t = useTranslations(); const [avatarName, setAvatarName] = useState(""); const [avatarCipher, setAvatarCipher] = useState(""); const [input, setInput] = useState(""); const { data: commentary, isFetched: isCommentaryLoaded } = useGetCommentary(); const { mutateAsync: postCommentary } = usePostCommentary(); return ( <Stack gap={2}> <InputGroup> <InputGroupText>{t("avatarName")}</InputGroupText> <FormControl type="text" value={avatarName} isValid={avatarName.length > 0} isInvalid={avatarName.length === 0} placeholder={t("avatarName")} onChange={({ target: { value } }) => setAvatarName(value)} /> </InputGroup> <InputGroup> <InputGroupText>{t("avatarCipher")}</InputGroupText> <FormControl type="password" value={avatarCipher} isInvalid={avatarCipher.length === 0} placeholder={t("avatarCipher")} onChange={({ target: { value } }) => setAvatarCipher(value)} /> </InputGroup> <InputGroup> <InputGroupText>{t("text")}</InputGroupText> <FormControl as={ReactTextareaAutosize} value={input} isValid={input.length > 0} isInvalid={input.length === 0} placeholder={t("text")} onChange={({ target: { value } }) => setInput(value)} /> <Button variant="success" onClick={async () => { if (avatarName && avatarCipher && input) { await postCommentary({ avatarName, avatarCipher, text: input, }); setAvatarName(""); setAvatarCipher(""); setInput(""); } else { toast.error(t("failedValidation")); } }} > <PencilFill /> </Button> </InputGroup> <hr /> <ListGroup> {isCommentaryLoaded ? ( commentary.map((commentary) => ( <ListGroupItem key={commentary.commentaryID}> <CommentaryItem commentary={commentary} /> </ListGroupItem> )) ) : ( <ListGroupItem> <CommentaryItem commentary={{ commentaryID: -1, avatarName: "Loading...", text: "", date: getDatetime(), }} /> </ListGroupItem> )} </ListGroup> </Stack> ); }