import { useParams } from "react-router-dom"; import { Button, Col, Row } from "reactstrap"; import { useTranslation } from "react-i18next"; import { observer } from "mobx-react-lite"; import { useTo } from "taehui-ts/fe-utility"; import Swal from "sweetalert2"; import { useAvatarStore } from "src/Stores"; import TextView from "src/forum/TextView"; import CommentView from "src/forum/CommentView"; import EssayTitleView from "src/forum/EssayTitleView"; import { EssayViewLoading } from "src/Loading"; import useGetEssay from "src/forum/useGetEssay"; import useWipeEssay from "src/forum/useWipeEssay"; export default observer(() => { const { t } = useTranslation(); const { taehuiAvatarID, isSU } = useAvatarStore(); type EssayViewParams = { forumID: string; essayID: string }; const { forumID, essayID } = useParams<EssayViewParams>() as EssayViewParams; const to = useTo(); const { mutateAsync: wipeEssay } = useWipeEssay(); const { data: { forumTitle, title, text, avatarID, avatarName, date, hitCount, essayLater, essayBefore, }, isFetched: isEssayLoaded, } = useGetEssay(essayID); const onWipeEssay = async () => { if ( ( await Swal.fire({ title: "Taehui", text: t("wipeEssayQuestion"), icon: "question", showDenyButton: true, }) ).isConfirmed ) { await wipeEssay({ essayID }); to(`/forum/${forumID}`); } }; const onQuit = () => { to(`/forum/${forumID}`); }; if (!isEssayLoaded) { return <EssayViewLoading />; } const isAllowModify = isSU || taehuiAvatarID === avatarID; return ( <> <Row className="g-0"> {isAllowModify && ( <> <Col className="m-1" xs="auto"> <Button color="danger" onClick={onWipeEssay}> {t("wipeEssay")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="warning" onClick={() => { to(`/forum/${forumID}/${essayID}/m`); }} > {t("doModifyEssay")} </Button> </Col> </> )} <Col className="m-1 text-end"> <Button color="danger" onClick={onQuit}> {t("quit")} </Button> </Col> </Row> <hr /> <TextView forumTitle={forumTitle} title={title} text={text} avatarID={avatarID} avatarName={avatarName} date={date} hitCount={hitCount} /> <hr /> {essayLater && ( <EssayTitleView forumID={forumID} forumTitle={t("essayLater")} essay={essayLater} /> )} {essayBefore && ( <EssayTitleView forumID={forumID} forumTitle={t("essayBefore")} essay={essayBefore} /> )} <hr /> <CommentView /> </> ); });