import { useEffect } from "react"; import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Button, Col, Input, Row } from "reactstrap"; import { sprintf } from "sprintf-js"; import { useWant, useIntParam } from "taehui-ts/fe-utility"; import { useNoteStore } from "src/Stores"; import NoteItems from "src/note/NoteItems"; import FitInput from "src/note/FitInput"; import SrcInput from "src/note/SrcInput"; import PositionInput from "src/note/PositionInput"; import { formatText } from "src/Utility"; import useGetNote from "src/note/useGetNote"; export default observer(() => { const { lastWant, setLastWant, lastSrc, setLastSrc, input, setInput, lastPage, setLastPage, viewUnit, } = useNoteStore(); const { want, setWant } = useWant("/qwilight/note"); const { param: page, setParam: setPage } = useIntParam("page", 1); const { param: src } = useIntParam("src", 0); const { t } = useTranslation(); const { data: { highestCount, totalCount, noteCount }, isFetched: isNoteLoaded, } = useGetNote(); useEffect(() => { if ((want !== lastWant || src !== lastSrc) && page > 1) { setPage(1); } setLastWant(want); setLastSrc(src); }, [lastSrc, lastWant, page, setLastSrc, setLastWant, setPage, src, want]); useEffect(() => { if (isNoteLoaded) { setLastPage(Math.max(1, Math.ceil(noteCount / viewUnit))); } }, [isNoteLoaded, noteCount, setLastPage, viewUnit]); useEffect(() => { setInput(want); }, [setInput, want]); const onWant = () => { setWant(input); }; 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"> <Input type="search" value={input} onChange={({ target: { value } }) => { setInput(value); }} onKeyDown={({ key }) => { if (key === "Enter") { onWant(); } }} /> </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> {sprintf(t("highestCountText"), formatText(highestCount))} </span> <br /> <span>{sprintf(t("totalCountText"), formatText(totalCount))}</span> </Col> </Row> )} <Row className="g-0"> <Col className="m-1" xs="auto"> <span dangerouslySetInnerHTML={{ __html: sprintf( t("bannedNoteFile"), '<a href="mailto://taehui@taehui.ddns.net">taehui@taehui.ddns.net</a>', ), }} /> </Col> </Row> </> ); });