import { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { useParams } from "react-router-dom"; import { Col, ListGroup, ListGroupItemHeading, Row } from "reactstrap"; import InfiniteScroll from "react-infinite-scroll-component"; import { wwwAXIOS } from "src/Www"; import { WantViewLoading } from "src/Loading"; import EssayTitleView from "src/forum/EssayTitleView"; import WantInput from "src/want/WantInput"; import CommentTitleView from "src/forum/CommentTitleView"; import { GetWantAPI, GetWantAPIComment, GetWantAPIEssay } from "src/wwwAPI"; const WantView = () => { const [isLoading, setLoading] = useState(true); const [wantedEssayTitles, setWantedEssayTitles] = useState<GetWantAPIEssay[]>( [], ); const [wantedCommentTitles, setWantedCommentTitles] = useState< GetWantAPIComment[] >([]); const [page, setPage] = useState(1); const [isNext, setNext] = useState(true); const { t } = useTranslation(); const { wantVariety, wantInput } = useParams<{ wantVariety: "essay" | "comment"; wantInput: string; }>(); const getWantedItems = useCallback( async (page: number) => { const { status, data } = await wwwAXIOS.get<GetWantAPI>( `/want/${wantVariety}/${wantInput}/${page}`, ); if (status === 200) { if (data.length) { switch (wantVariety) { case "essay": setWantedEssayTitles((prevState) => [ ...prevState, ...(data as GetWantAPIEssay[]), ]); break; case "comment": setWantedCommentTitles((prevState) => [ ...prevState, ...(data as GetWantAPIComment[]), ]); break; } setPage(page + 1); } else { setNext(false); } return true; } else { return false; } }, [wantInput, wantVariety], ); useEffect(() => { (async () => { switch (wantVariety) { case "essay": setWantedEssayTitles([]); break; case "comment": setWantedCommentTitles([]); break; } if (await getWantedItems(1)) { setLoading(false); } })(); }, [getWantedItems, wantVariety]); return ( <> <WantInput /> <hr /> {isLoading ? ( <WantViewLoading /> ) : ( <Row className="g-0"> <Col className="m-1"> <ListGroup> <ListGroupItemHeading>{t("wantView")}</ListGroupItemHeading> <InfiniteScroll dataLength={wantedEssayTitles.length} next={() => getWantedItems(page)} hasMore={isNext} loader={null} > {wantVariety === "essay" && wantedEssayTitles.map((wantedEssayTitle) => { return ( <EssayTitleView key={wantedEssayTitle.essayID} forumID={wantedEssayTitle.forumID} forumTitle={wantedEssayTitle.forumTitle} essay={wantedEssayTitle} /> ); })} {wantVariety === "comment" && wantedCommentTitles.map((wantedCommentTitle) => { return ( <CommentTitleView key={wantedCommentTitle.essayID} forumID={wantedCommentTitle.forumID} essayID={wantedCommentTitle.essayID} comment={wantedCommentTitle} /> ); })} </InfiniteScroll> </ListGroup> </Col> </Row> )} </> ); }; export default WantView;