"use client"; import FitInput from "@/app/[language]/note/components/FitInput"; import NoteItems from "@/app/[language]/note/components/NoteItems"; import PositionInput from "@/app/[language]/note/components/PositionInput"; import SrcInput from "@/app/[language]/note/components/SrcInput"; import WantInput from "@/app/[language]/note/components/WantInput"; import useGetNote from "@/app/[language]/note/query/useGetNote"; import { useNoteStore } from "@/state/Stores"; import { formatText } from "@/utilities/Utility"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useEffect } from "react"; import { Button, Col, Row } from "reactstrap"; import { useIntParam, useWant } from "taehui-ts/fe-utilities"; export default observer(() => { const { setWantAvatar, wantInput, lastPage, setLastPage, viewUnit, lastWant, lastSrc, } = useNoteStore(); const t = useTranslations(); const { want, setWant } = useWant("/note"); const { param: src } = useIntParam("src", 0); const { param: page, setParam: setPage } = useIntParam("page", 1); const { data: { highestCount, totalCount, noteCount }, isFetched: isNoteLoaded, } = useGetNote(); useEffect(() => { if ((want !== lastWant || src !== lastSrc) && page > 1) { setPage(1); } }, [lastSrc, lastWant, page, setPage, src, want]); useEffect(() => { if (isNoteLoaded) { setLastPage(Math.max(1, Math.ceil(noteCount / viewUnit))); } }, [isNoteLoaded, noteCount, setLastPage, viewUnit]); useEffect(() => { setWantAvatar(src === 1 ? want : ""); }, [setWantAvatar, src, want]); const onWant = () => { setWant(wantInput); }; const onClose = () => { setWant(""); }; return ( <> <Row className="g-0"> <Col className="m-1" xs="auto"> <FitInput /> </Col> <Col className="m-1" xs="auto"> <SrcInput /> </Col> <Col className="m-1"> <WantInput /> </Col> <Col className="m-1" xs="auto"> <Button color="success" onClick={onWant}> {t("onWant")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={onClose}> {t("onClose")} </Button> </Col> </Row> <Row className="g-0"> <Col className="m-1"> <NoteItems /> </Col> </Row> {lastPage >= 0 && ( <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <PositionInput /> </Col> </Row> )} {isNoteLoaded && ( <Row className="g-0"> <Col className="m-1" xs="auto"> <span> {t("highestCountText", { highestCount: formatText(highestCount), })} </span> <br /> <span> {t("totalCountText", { totalCount: formatText(totalCount) })} </span> </Col> </Row> )} <Row className="g-0"> <Col className="m-1" xs="auto"> <span dangerouslySetInnerHTML={{ __html: t.raw("bannedNoteFile"), }} /> </Col> </Row> </> ); });