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 ModeItem from "src/etc/ModeItem"; import { _m12, m0, m1, m2, m3, m4, m5, m6, m7, m8 } from "src/Utility"; import { EtcViewLoading } from "src/Loading"; import TotalNoteFilesView from "src/etc/TotalNoteFilesView"; import TotalTitlesView from "src/etc/TotalTitlesView"; import TotalEdgesView from "src/etc/TotalEdgesView"; import FavoritesView from "./FavoritesView"; export default observer(() => { const { totalDateSet, totalDateValues, signUpDateSet, signUpDateValues, avatarDateSet, avatarDateValues, favorites, favoritesAt, inputModes, autoModes, noteSaltModes, faintNoteModes, judgmentModes, hitPointsModes, noteMobilityModes, longNoteModes, inputFavorModes, noteModifyModes, lowestJudgmentConditionModes, isLoading, getEtc, } = useEtcStore(); const { t } = useTranslation(); useEffect(() => { getEtc(); }, [getEtc]); if (isLoading) { return <EtcViewLoading />; } 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"> <TotalNoteFilesView /> </Col> <Col className="m-1" xs="auto"> <TotalTitlesView /> </Col> <Col className="m-1" xs="auto"> <TotalEdgesView /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <FavoritesView title={t("etcFavorites")} favorites={favorites} /> </Col> <Col className="m-1" xs="auto"> <FavoritesView title={t("etcFavoritesAt")} favorites={favoritesAt} /> </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <ModeItem title={t("etcInputMode")} modes={inputModes} drawings={m7} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcAutoMode")} modes={autoModes} drawings={m0} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcNoteSaltMode")} modes={noteSaltModes} drawings={m1} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcFaintNoteMode")} modes={faintNoteModes} drawings={m2} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcJudgmentMode")} modes={judgmentModes} drawings={m3} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcHitPointsMode")} modes={hitPointsModes} drawings={m4} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcNoteMobilityMode")} modes={noteMobilityModes} drawings={m5} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcLongNoteMode")} modes={longNoteModes} drawings={m6} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcInputFavorMode")} modes={inputFavorModes} drawings={m7} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcNoteModifyMode")} modes={noteModifyModes} drawings={m8} /> </Col> <Col className="m-1" xs="auto"> <ModeItem title={t("etcLowestJudgmentConditionMode")} modes={lowestJudgmentConditionModes} drawings={_m12} /> </Col> </Row> </> ); });