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 { useIntParam, useWant } 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"; export default observer(() => { const { totalCount, highestCount, setInput, lastPage, isLoading, getNote, input, pageUnit, viewUnit, } = useNoteStore(); const { t } = useTranslation(); const { param: page, setParam: setPage } = useIntParam("page", 1); const { param: fit } = useIntParam("fit", 0); const { param: src } = useIntParam("src", 0); const { want, setWant } = useWant("/qwilight/note"); useEffect(() => { setInput(want); }, [setInput, want]); useEffect(() => { getNote(want, page, fit, src, setPage); }, [getNote, fit, src, want, pageUnit, page, viewUnit, setPage]); 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> )} {!isLoading && ( <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> </> ); });