import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Badge, Col, ListGroup, Row } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; import { AvatarLoading } from "../Loading"; export default observer(() => { const { favorites5K, favorites7K, favorites9K, favorites10K, favorites14K, favorites24K, favorites48K, isFavorites5KLoading, isFavorites7KLoading, isFavorites9KLoading, isFavorites10KLoading, isFavorites14KLoading, isFavorites24KLoading, isFavorites48KLoading, avatarID, } = useAvatarStore(); const { t } = useTranslation(); return ( <Row className="g-0"> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("avatarFavorites5KText")}</Badge> {isFavorites5KLoading ? ( <AvatarLoading /> ) : ( favorites5K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("avatarFavorites7KText")}</Badge> {isFavorites7KLoading ? ( <AvatarLoading /> ) : ( favorites7K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("avatarFavorites9KText")}</Badge> {isFavorites9KLoading ? ( <AvatarLoading /> ) : ( favorites9K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("avatarFavorites10KText")}</Badge> {isFavorites10KLoading ? ( <AvatarLoading /> ) : ( favorites10K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("avatarFavorites14KText")}</Badge> {isFavorites14KLoading ? ( <AvatarLoading /> ) : ( favorites14K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("avatarFavorites24KText")}</Badge> {isFavorites24KLoading ? ( <AvatarLoading /> ) : ( favorites24K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </Col> <Col className="m-1" xs="auto"> <ListGroup> <Badge color="primary">{t("avatarFavorites48KText")}</Badge> {isFavorites48KLoading ? ( <AvatarLoading /> ) : ( favorites48K.map( ({ noteID, artist, title, genre, levelText, level, fittedText, }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> </Col> </Row> ); });