import usePostComment from "@/app/[language]/forum/query/usePostComment"; import usePutComment from "@/app/[language]/forum/query/usePutComment"; import useWipeComment from "@/app/[language]/forum/query/useWipeComment"; import AvatarTitle from "@/components/AvatarTitle"; import { useTaehuiStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useParams } from "next/navigation"; import { useMemo, useState } from "react"; import ReactTextareaAutosize from "react-textarea-autosize"; import { toast } from "react-toastify"; import { Button, Col, Collapse, Row } from "reactstrap"; import Swal from "sweetalert2"; import { getDatetime } from "taehui-ts/date"; export default observer( ({ commentID, text, avatarID, avatarName, date, level, }: { commentID: number; text: string; date: string; avatarID: string; avatarName: string; level: number; }) => { const t = useTranslations(); const { totem, taehuiAvatarID, taehuiAvatarName, isSU } = useTaehuiStore(); const { essayID } = useParams<{ essayID: string }>(); const [textInput, setTextInput] = useState(""); const [targetTextInput, setTargetTextInput] = useState(""); const [isTargetOpened, setTargetOpened] = useState(false); const isAllowModify = useMemo( () => isSU || taehuiAvatarID === avatarID, [isSU, avatarID, taehuiAvatarID], ); const { mutateAsync: wipeComment } = useWipeComment(); const { mutateAsync: putComment } = usePutComment(); const { mutateAsync: postComment } = usePostComment(); return ( <div style={{ marginLeft: `${level * 3.5}rem` }}> <Row key={commentID} className="g-0 route" onClick={() => { if (totem && !isTargetOpened) { setTargetOpened(true); } }} > <AvatarTitle avatarID={avatarID} avatarName={avatarName}> {isTargetOpened && isAllowModify ? ( <Row className="g-0"> <Col className="m-1"> <ReactTextareaAutosize className="form-control" placeholder={t("text")} defaultValue={text} onChange={({ target: { value } }) => { setTextInput(value); }} /> </Col> <Col className="m-1" xs="auto"> <Button color="warning" onClick={async () => { if (textInput) { await putComment({ commentID, text: textInput }); setTargetOpened(false); } else { toast.error(t("failedValidation")); } }} > {t("doModifyComment")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={async () => { if ( ( await Swal.fire({ title: "Taehui", text: t("wipeCommentQuestion"), icon: "question", showDenyButton: true, }) ).isConfirmed ) { await wipeComment({ commentID, totem }); } }} > {t("wipeComment")} </Button> </Col> </Row> ) : ( <span className="ln">{text}</span> )} </AvatarTitle> <Col className="m-1" xs="auto"> <span>{getDatetime(date)}</span> </Col> </Row> <Collapse isOpen={isTargetOpened} style={{ marginLeft: "3.5rem" }}> <Row className="g-0"> <AvatarTitle avatarID={taehuiAvatarID} avatarName={taehuiAvatarName} > <Row className="g-0"> <Col className="m-1"> <ReactTextareaAutosize className="form-control" placeholder={t("text")} value={targetTextInput} onChange={({ target: { value } }) => { setTargetTextInput(value); }} /> </Col> <Col className="m-1" xs="auto"> <Button color="success" onClick={async () => { if (targetTextInput) { await postComment({ essayID, targetCommentID: commentID, text: targetTextInput, }); setTargetOpened(false); } else { toast.error(t("failedValidation")); } }} > {t("postComment")} </Button> </Col> </Row> </AvatarTitle> </Row> </Collapse> </div> ); }, );