import { useMemo, useState } from "react"; import { observer } from "mobx-react-lite"; import { useParams } from "react-router-dom"; import ReactTextareaAutosize from "react-textarea-autosize"; import Swal from "sweetalert2"; import { Button, Col, Collapse, Row } from "reactstrap"; import { useTranslation } from "react-i18next"; import { getDatetime } from "taehui-ts/date"; import { toast } from "react-toastify"; import { useAvatarStore } from "src/Stores"; import AvatarTitle from "src/AvatarTitle"; import useWipeComment from "src/forum/useWipeComment"; import usePutComment from "src/forum/usePutComment"; import usePostComment from "src/forum/usePostComment"; export default observer( ({ commentID, text, avatarID, avatarName, date, level, }: { commentID: number; text: string; date: string; avatarID: string; avatarName: string; level: number; }) => { const { t } = useTranslation(); const { totem, taehuiAvatarID, taehuiAvatarName, isSU } = useAvatarStore(); type CommentItemParams = { essayID: string }; const { essayID } = useParams<CommentItemParams>() as CommentItemParams; 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"> <AvatarTitle avatarID={avatarID} avatarName={avatarName}> <div className="route" onClick={() => { if (totem && !isTargetOpened) { setTargetOpened(true); } }} > {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> )} </div> </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> ); }, );