import { Link, useParams } from "react-router-dom"; import { Badge, Button, Col, ListGroup, ListGroupItemHeading, Row, } from "reactstrap"; import { runInAction } from "mobx"; import { observer } from "mobx-react-lite"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { getLanguage } from "taehui-ts/language"; import { usePage, useTo } from "taehui-ts/fe-utility"; import { wwwAXIOS } from "src/Www"; import EssayTitleView from "src/forum/EssayTitleView"; import PositionInput from "src/forum/PositionInput"; import { useAvatarStore, useForumStore } from "src/Stores"; import { ForumLoading } from "src/Loading"; import { EssayAPIEssay, GetForumAPI } from "src/wwwAPI"; const ForumView = observer(() => { const { taehuiLevel } = useAvatarStore(); const { forumTitle, viewUnit, level, setForumTitle, setLastPage, setLevel } = useForumStore(); const [isLoading, setLoading] = useState(true); const [essays, setEssays] = useState<EssayAPIEssay[]>([]); const { t } = useTranslation(); const { forumID } = useParams<{ forumID: string }>(); const { page } = usePage(); const to = useTo(); useEffect(() => { (async () => { const { data, status } = await wwwAXIOS.get<GetForumAPI>( `/forum/${forumID}`, { params: { page, viewUnit, language: getLanguage(), }, }, ); if (status === 200) { runInAction(() => { setForumTitle(data.title); setEssays(data.essays); setLastPage(Math.ceil(data.essayCount / viewUnit)); setLevel(data.level); setLoading(false); }); } })(); }, [forumID, page, setForumTitle, setLastPage, setLevel, viewUnit]); if (isLoading) { return <ForumLoading />; } return ( <> <Row className="g-0"> <Col className="m-1"> <ListGroup> <ListGroupItemHeading> <Badge>{forumTitle}</Badge> </ListGroupItemHeading> {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 to={`/forum/${forumID}/w`}> <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> </> ); }); export default ForumView;