import { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { Col, ListGroup, Badge, Row } from "reactstrap"; import { observer } from "mobx-react-lite"; import { useWowStore } from "src/Stores"; import { Avatar } from "src/wow/Wow"; import AvatarItem from "src/wow/AvatarItem"; import { WowLoading } from "src/Loading"; const getAvatars = (avatars: Avatar[]) => { return avatars.map(({ avatarID, avatarName, text: value }) => ( <AvatarItem key={avatarID} avatarID={avatarID} avatarName={avatarName} text={value} /> )); }; export default observer(() => { const { isLoading, totalAvatars, highestAvatars, standAvatars, bandAvatars, totalAvatarsAt, highestAvatarsAt, standAvatarsAt, bandAvatarsAt, ability5KAvatars0, ability5KAvatars1, ability5KAvatars2, ability5KAvatars3, ability5KAvatars4, ability7KAvatars0, ability7KAvatars1, ability7KAvatars2, ability7KAvatars3, ability7KAvatars4, ability9KAvatars0, ability9KAvatars1, ability9KAvatars2, ability9KAvatars3, ability9KAvatars4, levelAvatars0, levelAvatars1, levelAvatars2, levelAvatars3, levelAvatars4, getWow, } = useWowStore(); const { t } = useTranslation(); useEffect(() => { getWow(t); }, [getWow, t]); if (isLoading) { return <WowLoading />; } return ( <> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("totalAvatars")}</Badge> {getAvatars(totalAvatars)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("highestAvatars")}</Badge> {getAvatars(highestAvatars)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("standAvatars")}</Badge> {getAvatars(standAvatars)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("bandAvatars")}</Badge> {getAvatars(bandAvatars)} </ListGroup> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <ListGroup> <Badge>{t("totalAvatarsAt")}</Badge> {getAvatars(totalAvatarsAt)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge>{t("highestAvatarsAt")}</Badge> {getAvatars(highestAvatarsAt)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge>{t("standAvatarsAt")}</Badge> {getAvatars(standAvatarsAt)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge>{t("bandAvatarsAt")}</Badge> {getAvatars(bandAvatarsAt)} </ListGroup> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability5KAvatars0")}</Badge> {getAvatars(ability5KAvatars0)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability5KAvatars1")}</Badge> {getAvatars(ability5KAvatars1)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability5KAvatars2")}</Badge> {getAvatars(ability5KAvatars2)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability5KAvatars3")}</Badge> {getAvatars(ability5KAvatars3)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability5KAvatars4")}</Badge> {getAvatars(ability5KAvatars4)} </ListGroup> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability7KAvatars0")}</Badge> {getAvatars(ability7KAvatars0)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability7KAvatars1")}</Badge> {getAvatars(ability7KAvatars1)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability7KAvatars2")}</Badge> {getAvatars(ability7KAvatars2)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability7KAvatars3")}</Badge> {getAvatars(ability7KAvatars3)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability7KAvatars4")}</Badge> {getAvatars(ability7KAvatars4)} </ListGroup> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability9KAvatars0")}</Badge> {getAvatars(ability9KAvatars0)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability9KAvatars1")}</Badge> {getAvatars(ability9KAvatars1)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability9KAvatars2")}</Badge> {getAvatars(ability9KAvatars2)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability9KAvatars3")}</Badge> {getAvatars(ability9KAvatars3)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="success">{t("ability9KAvatars4")}</Badge> {getAvatars(ability9KAvatars4)} </ListGroup> </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="info">{t("levelAvatars0")}</Badge> {getAvatars(levelAvatars0)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="info">{t("levelAvatars1")}</Badge> {getAvatars(levelAvatars1)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="info">{t("levelAvatars2")}</Badge> {getAvatars(levelAvatars2)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="info">{t("levelAvatars3")}</Badge> {getAvatars(levelAvatars3)} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="info">{t("levelAvatars4")}</Badge> {getAvatars(levelAvatars4)} </ListGroup> </Col> </Row> </> ); });