"use client"; import CommentaryItem from "@/app/[language]/commentary/components/CommentaryItem"; import Loading from "@/app/[language]/commentary/loading"; 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 ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; import { Button, Col, Input, ListGroup, Row } from "reactstrap"; const Page = () => { const t = useTranslations(); const [avatarName, setAvatarName] = useState(""); const [avatarCipher, setAvatarCipher] = useState(""); const [textInput, setTextInput] = useState(""); const { data: commentary, isFetched: isCommentaryLoaded } = useGetCommentary(); const { mutateAsync: postCommentary } = usePostCommentary(); return ( <> <Row className="g-0"> <Col className="m-1"> <Input placeholder={t("avatarName")} valid={!!avatarName} invalid={!avatarName} onChange={({ target: { value } }) => { setAvatarName(value); }} /> </Col> <Col className="m-1"> <Input valid={!!avatarCipher} invalid={!avatarCipher} type="password" placeholder={t("avatarCipher")} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> </Col> </Row> <Row className="g-0"> <Col className="m-1"> <ReactTextareaAutosize className="form-control" value={textInput} placeholder={t("text")} onChange={({ target: { value } }) => { setTextInput(value); }} /> </Col> <Col className="m-1" xs="auto"> <Button color="success" onClick={async () => { if (avatarName && avatarCipher && textInput) { await postCommentary({ avatarName, avatarCipher, text: textInput, }); } else { toast.error(t("failedValidation")); } }} > {t("postCommentary")} </Button> </Col> </Row> {isCommentaryLoaded ? ( <Row className="g-0"> <Col className="m-1"> <ListGroup> {commentary.map((commentary) => ( <CommentaryItem key={commentary.commentaryID} commentary={commentary} /> ))} </ListGroup> </Col> </Row> ) : ( <Loading /> )} </> ); }; export default Page;