"use client"; import CommentView from "@/app/[language]/forum/components/CommentView"; import TextView from "@/app/[language]/forum/components/TextView"; import useGetEssay from "@/app/[language]/forum/query/useGetEssay"; import useWipeEssay from "@/app/[language]/forum/query/useWipeEssay"; import EssayTitleView from "@/components/EssayTitleView"; import { useTaehuiStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useParams, useRouter } from "next/navigation"; import { Back, EraserFill, PencilFill } from "react-bootstrap-icons"; import Button from "react-bootstrap/Button"; import ButtonGroup from "react-bootstrap/ButtonGroup"; import Col from "react-bootstrap/Col"; import Row from "react-bootstrap/Row"; import Stack from "react-bootstrap/Stack"; import Swal from "sweetalert2"; export default observer(() => { const t = useTranslations(); const { taehuiAvatarID, isSU } = useTaehuiStore(); const { forumID, essayID } = useParams<{ forumID: string; essayID: string; }>(); const { push } = useRouter(); const { mutateAsync: wipeEssay } = useWipeEssay(); const { data: { forumTitle, title, text, avatarID, avatarName, date, hitCount, essayLater, essayBefore, }, isFetched: isEssayLoaded, } = useGetEssay(essayID); if (!isEssayLoaded) { return null; } const onWipeEssay = async () => { if ( ( await Swal.fire({ title: "Taehui", text: t("wipeEssayText"), icon: "question", showDenyButton: true, }) ).isConfirmed ) { await wipeEssay({ essayID }); push(`/forum/${forumID}`); } }; const isAllowModify = isSU || taehuiAvatarID === avatarID; return ( <Stack gap={2}> <Row> <Col> <h4>{forumTitle}</h4> </Col> {isAllowModify && ( <Col xs="auto"> <ButtonGroup> <Button variant="danger" onClick={onWipeEssay}> <EraserFill /> </Button> <Button variant="warning" onClick={() => { push(`/forum/${forumID}/edit/${essayID}`); }} > <PencilFill /> </Button> <Button variant="secondary" onClick={() => { push(`/forum/${forumID}`); }} > <Back /> </Button> </ButtonGroup> </Col> )} </Row> <hr /> <TextView title={title} text={text} avatarID={avatarID} avatarName={avatarName} date={date} hitCount={hitCount} /> {(essayLater || essayBefore) && ( <> <hr /> {essayLater && ( <EssayTitleView forumID={forumID} forumTitle={t("essayLater")} essay={essayLater} /> )} {essayBefore && ( <EssayTitleView forumID={forumID} forumTitle={t("essayBefore")} essay={essayBefore} /> )} </> )} <hr /> <CommentView /> </Stack> ); });