import { Col, Row } from "reactstrap"; import { useParams } from "react-router-dom"; import { useWindowArea } from "taehui-ts/fe-utility"; import ForumItem from "src/forum/ForumItem"; import { ForumsViewLoading } from "src/Loading"; import useGetForums from "src/forum/useGetForums"; const ForumsView = () => { const line = useWindowArea().windowLength < 992 ? 1 : 2; type ForumsViewParams = { forumGroup: string }; const { forumGroup } = useParams<ForumsViewParams>() as ForumsViewParams; const { data: forums, isFetched: isForumsLoaded } = useGetForums(forumGroup); if (!isForumsLoaded) { return <ForumsViewLoading />; } return ( <> {[...Array(Math.ceil(forums.length / line)).keys()].map((i) => ( <Row key={i} className="g-0"> {forums.slice(line * i, line * i + line).map((forum) => ( <Col key={forum.forumID} className="m-1"> <ForumItem forum={forum} /> </Col> ))} </Row> ))} </> ); }; export default ForumsView;