"use client"; import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView"; import PositionInput from "@/app/[language]/forum/components/PositionInput"; import useGetForum from "@/app/[language]/forum/query/useGetForum"; import { useForumStore, useTaehuiStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import Link from "next/link"; import { useParams } from "next/navigation"; import { useEffect } from "react"; import { Badge, Button, Col, ListGroup, ListGroupItemHeading, Row, } from "reactstrap"; import { useIntParam, useTo } from "taehui-ts/fe-utilities"; export default observer(() => { const { taehuiLevel } = useTaehuiStore(); const { viewUnit, setLastPage } = useForumStore(); const t = useTranslations(); const { forumID } = useParams<{ forumID: string; }>(); const { param: page } = useIntParam("page", 1); const to = useTo(); const { data: { title, essays, essayCount, level }, isFetched: isForumLoaded, } = useGetForum(forumID, page, viewUnit); useEffect(() => { if (isForumLoaded) { setLastPage(Math.ceil(essayCount / viewUnit)); } }, [essayCount, isForumLoaded, setLastPage, viewUnit]); return ( <> <Row className="g-0"> <Col className="m-1"> <ListGroupItemHeading> <Badge>{title}</Badge> </ListGroupItemHeading> <ListGroup> {isForumLoaded && essays.map((essay) => ( <EssayTitleView forumID={forumID} essay={essay} key={essay.essayID} /> ))} </ListGroup> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <PositionInput /> </Col> </Row> <Row className="g-0"> {taehuiLevel >= level && ( <Col className="m-1 text-end"> <Link href={`/forum/${forumID}/edit`}> <Button color="success">{t("postEssay")}</Button> </Link> </Col> )} <Col className="m-1 text-end" xs={taehuiLevel >= level ? "auto" : undefined} > <Button color="danger" onClick={() => { to("/forums"); }} > {t("quit")} </Button> </Col> </Row> </> ); });