import usePutCommentary from "@/app/[language]/commentary/query/usePutCommentary"; import useWipeCommentary from "@/app/[language]/commentary/query/useWipeCommentary"; import { GetCommentaryAPI } from "@/type/wwwAPI"; import { useTranslations } from "next-intl"; import { useState } from "react"; import ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; import { Button, Col, Collapse, Input, ListGroupItem, Row } from "reactstrap"; import { getDatetime } from "taehui-ts/date"; export default function CommentaryItem({ commentary: { commentaryID, avatarName, text, date }, }: { commentary: GetCommentaryAPI[number]; }) { const t = useTranslations(); const [isModifyOpened, setModifyOpened] = useState(false); const [avatarCipher, setAvatarCipher] = useState(""); const [textInput, setTextInput] = useState(""); const { mutateAsync: wipeCommentary } = useWipeCommentary(); const { mutateAsync: putCommentary } = usePutCommentary(); return ( <ListGroupItem> <Row className="g-0"> <Col className="m-1" xs="auto"> <span>{avatarName}</span> </Col> <Col className="m-1 route" onClick={() => { setModifyOpened(true); }} > {isModifyOpened ? ( <ReactTextareaAutosize className="form-control" defaultValue={text} placeholder={t("text")} onChange={({ target: { value } }) => { setTextInput(value); }} /> ) : ( <span className="ln">{text}</span> )} </Col> <Col className="m-1" xs="auto"> <span>{getDatetime(date)}</span> </Col> </Row> <Collapse isOpen={isModifyOpened}> <Row className="g-0"> <Col className="m-1"> <Input valid={!!avatarCipher} invalid={!avatarCipher} type="password" placeholder={t("avatarCipher")} value={avatarCipher} onChange={({ target: { value } }) => { setAvatarCipher(value); }} /> </Col> <Col className="m-1" xs="auto"> <Button color="warning" onClick={async () => { if (avatarCipher && textInput) { await putCommentary({ commentaryID, avatarCipher, text: textInput, }); } else { toast.error(t("failedValidation")); } }} > {t("doModifyCommentary")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={async () => { if (avatarCipher) { await wipeCommentary({ commentaryID, avatarCipher }); } else { toast.error(t("failedValidation")); } }} > {t("wipeCommentary")} </Button> </Col> </Row> </Collapse> </ListGroupItem> ); }