import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Badge, ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; import { NoteLoading } from "src/Loading"; import { FC, PropsWithChildren, useCallback } from "react"; export default observer(() => { const { lasts5K, lasts7K, lasts9K, lasts10K, lasts14K, lasts24K, lasts48K, isLasts5KLoading, isLasts7KLoading, isLasts9KLoading, isLasts10KLoading, isLasts14KLoading, isLasts24KLoading, isLasts48KLoading, lastsTabPosition, setLastsTabPosition, } = useAvatarStore(); const { t } = useTranslation(); const { avatarID } = useAvatarStore(); const getProperties = (i: number) => ({ className: lastsTabPosition === i ? "active route" : "route", onClick: () => { setLastsTabPosition(i); }, }); const LastView = useCallback<FC<PropsWithChildren>>( ({ children }) => { return ( <ListGroup> <Badge color="primary">{t("avatarLastsText")}</Badge> {children} </ListGroup> ); }, [t], ); return ( <> <Nav tabs> <NavItem> <NavLink {...getProperties(0)}>⑤K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(1)}>⑦K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(2)}>9K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(3)}>⑩K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(4)}>⑭K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(5)}>24</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(6)}>48</NavLink> </NavItem> </Nav> <TabContent activeTab={lastsTabPosition}> <TabPane tabId={0}> <LastView> {isLasts5KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( lasts5K.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} /> ), ) )} </LastView> </TabPane> <TabPane tabId={1}> <LastView> {isLasts7KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( lasts7K.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} /> ), ) )} </LastView> </TabPane> <TabPane tabId={2}> <LastView> {isLasts9KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( lasts9K.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} /> ), ) )} </LastView> </TabPane> <TabPane tabId={3}> <LastView> {isLasts10KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( lasts10K.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} /> ), ) )} </LastView> </TabPane> <TabPane tabId={4}> <LastView> {isLasts14KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( lasts14K.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} /> ), ) )} </LastView> </TabPane> <TabPane tabId={5}> <LastView> {isLasts24KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( lasts24K.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} /> ), ) )} </LastView> </TabPane> <TabPane tabId={6}> <LastView> {isLasts48KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( lasts48K.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} /> ), ) )} </LastView> </TabPane> </TabContent> </> ); });