import { useEffect, useState } from "react"; import { Col, Row } from "reactstrap"; import { useParams } from "react-router-dom"; import { getLanguage } from "taehui-ts/language"; import { useWindowArea } from "taehui-ts/fe-utility"; import ForumItem from "src/forum/ForumItem"; import { ForumsLoading } from "src/Loading"; import { wwwAXIOS } from "src/Www"; import { GetForumsAPI } from "src/wwwAPI"; const ForumsView = () => { const [forums, setForums] = useState<GetForumsAPI>([]); const [isLoading, setLoading] = useState(true); const line = useWindowArea().windowLength < 992 ? 1 : 2; const { forumGroup } = useParams<{ forumGroup: string }>(); useEffect(() => { (async () => { const { data, status } = await wwwAXIOS.get<GetForumsAPI>( forumGroup ? `/forums/${forumGroup}` : "/forums", { params: { language: getLanguage() }, }, ); if (status === 200) { setForums(data); setLoading(false); } })(); }, [forumGroup]); if (isLoading) { return <ForumsLoading />; } 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;