"use client"; import CommentTitleView from "@/app/[language]/forum/components/CommentTitleView"; import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView"; import WantInput from "@/app/[language]/want/components/WantInput"; import Loading from "@/app/[language]/want/loading"; import useGetWant from "@/app/[language]/want/query/useGetWant"; import { useWantStore } from "@/store/Stores"; import { GetWantAPIComment, GetWantAPIEssay } from "@/type/wwwAPI"; import { useTranslations } from "next-intl"; import { useParams } from "next/navigation"; import { useEffect } from "react"; import InfiniteScroll from "react-infinite-scroll-component"; import { Col, ListGroup, ListGroupItemHeading, Row } from "reactstrap"; import { useWant } from "taehui-ts/fe-utilities"; const Page = () => { const t = useTranslations(); const { setTextInput } = useWantStore(); const { wantVariety } = useParams<{ wantVariety: "essay" | "comment"; }>(); const { want } = useWant("/want"); const { fetchNextPage, hasNextPage, data: { pages }, isFetched: isWantLoaded, } = useGetWant(wantVariety, want); useEffect(() => { setTextInput(want); }, [setTextInput, want]); return ( <> <WantInput /> <hr /> {isWantLoaded ? ( <Row className="g-0"> <Col className="m-1"> <ListGroup> <ListGroupItemHeading>{t("wantView")}</ListGroupItemHeading> <InfiniteScroll dataLength={pages.length} next={() => fetchNextPage()} hasMore={hasNextPage} loader={null} > {wantVariety === "essay" && (pages as GetWantAPIEssay[]).flatMap((wantedEssayTitle) => { return ( <EssayTitleView key={wantedEssayTitle.essayID} forumID={wantedEssayTitle.forumID} forumTitle={wantedEssayTitle.forumTitle} essay={wantedEssayTitle} /> ); })} {wantVariety === "comment" && (pages as GetWantAPIComment[]).flatMap( (wantedCommentTitle) => { return ( <CommentTitleView key={wantedCommentTitle.essayID} forumID={wantedCommentTitle.forumID} essayID={wantedCommentTitle.essayID} comment={wantedCommentTitle} /> ); }, )} </InfiniteScroll> </ListGroup> </Col> </Row> ) : ( <Loading /> )} </> ); }; export default Page;