import { observer } from "mobx-react-lite"; import { ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; import { NoteLoading } from "src/Loading"; export default observer(() => { const { favorites5K, favorites7K, favorites9K, favorites10K, favorites14K, favorites24K, favorites48K, isFavorites5KLoading, isFavorites7KLoading, isFavorites9KLoading, isFavorites10KLoading, isFavorites14KLoading, isFavorites24KLoading, isFavorites48KLoading, avatarID, favoritesTabPosition, setFavoritesTabPosition, } = useAvatarStore(); const getProperties = (i: number) => ({ className: favoritesTabPosition === i ? "active route" : "route", onClick: () => { setFavoritesTabPosition(i); }, }); 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={favoritesTabPosition}> <TabPane tabId={0}> <ListGroup> {isFavorites5KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( 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> </TabPane> <TabPane tabId={1}> <ListGroup> {isFavorites7KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( 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> </TabPane> <TabPane tabId={2}> <ListGroup> {isFavorites9KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( 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> </TabPane> <TabPane tabId={3}> <ListGroup> {isFavorites10KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( 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> </TabPane> <TabPane tabId={4}> <ListGroup> {isFavorites14KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( 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> </TabPane> <TabPane tabId={5}> <ListGroup> {isFavorites24KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( 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> </TabPane> <TabPane tabId={6}> <ListGroup> {isFavorites48KLoading ? ( <NoteLoading loadingCount={10} /> ) : ( 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> </TabPane> </TabContent> </> ); });