import { useEffect } from "react"; 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 { getMillis } from "taehui-ts/date"; import Swal from "sweetalert2"; import { wwwAXIOS } from "src/Www"; import { useAvatarStore, useForumStore } 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"; const EssayView = observer(() => { const { t } = useTranslation(); const { forumTitle, title, text, setForumTitle, setTitle, setText } = useForumStore(); const { taehuiAvatarID, totem, isTaehui } = useAvatarStore(); type EssayViewParams = { forumID: string; essayID: string }; const { forumID, essayID } = useParams<EssayViewParams>() as EssayViewParams; const to = useTo(); const { data: essay, isPending: isPendingEssay } = useGetEssay(essayID); useEffect(() => { if (essay) { setForumTitle(essay.forumTitle); setTitle(essay.title); setText(essay.text); } }, [essay, setForumTitle, setText, setTitle]); const onWipeEssay = async () => { if ( ( await Swal.fire({ title: "Taehui", text: t("wipeEssayQuestion"), icon: "question", showDenyButton: true, }) ).isConfirmed ) { const { status } = await wwwAXIOS.delete(`/essay/${essayID}`, { headers: { millis: getMillis(), totem, }, }); if (status === 204) { to(`/forum/${forumID}`); } } }; const onQuit = () => { to(`/forum/${forumID}`); }; if (isPendingEssay || !essay) { return <EssayViewLoading />; } const { avatarID, avatarName, date, hitCount, essayLater, essayBefore } = essay; const isAllowModify = isTaehui || 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 /> </> ); }); export default EssayView;