import { useEffect } from "react"; import { observer } from "mobx-react-lite"; import { Col, Row } from "reactstrap"; import { useTranslation } from "react-i18next"; import { useEtcStore } from "src/Stores"; import DateView from "src/etc/DateView"; import Mode from "src/etc/Mode"; import { m0, m1, m2, m3, m4, m5, m6, m7, m8, _m12 } from "src/Utility"; import { EtcLoading } from "src/Loading"; import TotalNoteFiles from "src/etc/TotalNoteFiles"; import TotalTitles from "src/etc/TotalTitles"; import TotalEdges from "src/etc/TotalEdges"; import FavoriteNoteFiles from "./FavoriteNoteFiles"; export default observer(() => { const { totalDateSet, totalDateValues, signUpDateSet, signUpDateValues, avatarDateSet, avatarDateValues, favoriteNoteFileValues, favoriteNoteFileAtValues, inputModeValues, autoModeValues, noteSaltModeValues, faintNoteModeValues, judgmentModeValues, hitPointsModeValues, noteMobilityModeValues, longNoteModeValues, inputFavorModeValues, noteModifyModeValues, lowestJudgmentConditionModeValues, isLoading, getEtc, } = useEtcStore(); const { t } = useTranslation(); useEffect(() => { getEtc(); }, [getEtc]); if (isLoading) { return <EtcLoading />; } return ( <> <Row className="g-0"> <Col className="m-1" xs="auto"> <DateView title={t("etcTotal")} dateSet={totalDateSet} dateValues={totalDateValues} /> </Col> <Col className="m-1" xs="auto"> <DateView title={t("etcSignUp")} dateSet={signUpDateSet} dateValues={signUpDateValues} /> </Col> <Col className="m-1" xs="auto"> <DateView title={t("etcAvatar")} dateSet={avatarDateSet} dateValues={avatarDateValues} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <TotalNoteFiles /> </Col> <Col className="m-1" xs="auto"> <TotalTitles /> </Col> <Col className="m-1" xs="auto"> <TotalEdges /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <FavoriteNoteFiles title={t("etcFavoriteNoteFiles")} favoriteNoteFiles={favoriteNoteFileValues} /> </Col> <Col className="m-1" xs="auto"> <FavoriteNoteFiles title={t("etcFavoriteNoteFilesAt")} favoriteNoteFiles={favoriteNoteFileAtValues} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <Mode title={t("etcInputMode")} values={inputModeValues} drawings={m7} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcAutoMode")} values={autoModeValues} drawings={m0} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcNoteSaltMode")} values={noteSaltModeValues} drawings={m1} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcFaintNoteMode")} values={faintNoteModeValues} drawings={m2} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcJudgmentMode")} values={judgmentModeValues} drawings={m3} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcHitPointsMode")} values={hitPointsModeValues} drawings={m4} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcNoteMobilityMode")} values={noteMobilityModeValues} drawings={m5} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcLongNoteMode")} values={longNoteModeValues} drawings={m6} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcInputFavorMode")} values={inputFavorModeValues} drawings={m7} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcNoteModifyMode")} values={noteModifyModeValues} drawings={m8} /> </Col> <Col className="m-1" xs="auto"> <Mode title={t("etcLowestJudgmentConditionMode")} values={lowestJudgmentConditionModeValues} drawings={_m12} /> </Col> </Row> </> ); });