import { useCallback } from "react"; 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"; import { Note } from "src/avatar/Avatar"; export default observer(() => { const { favorites6K, favorites5K, favorites7K, favorites9K, favorites10K, favorites14K, favorites24K, favorites48K, isFavorites6KLoading, isFavorites5KLoading, isFavorites7KLoading, isFavorites9KLoading, isFavorites10KLoading, isFavorites14KLoading, isFavorites24KLoading, isFavorites48KLoading, avatarID, favoritesTabPosition, setFavoritesTabPosition, } = useAvatarStore(); const getProperties = (i: number) => ({ className: favoritesTabPosition === i ? "active route" : "route", onClick: () => { setFavoritesTabPosition(i); }, }); const FavoriteView = useCallback( ({ tabPosition, isFavoritesLoading, favorites, }: { tabPosition: number; isFavoritesLoading: boolean; favorites: Note[]; }) => { return ( <TabPane tabId={tabPosition}> <ListGroup> {isFavoritesLoading ? ( <NoteLoading loadingCount={50} /> ) : ( favorites.map((favorite) => ( <NoteItem {...favorite} key={favorite.noteID} wantAvatarID={avatarID} /> )) )} </ListGroup> </TabPane> ); }, [avatarID], ); return ( <> <Nav tabs> <NavItem> <NavLink {...getProperties(0)}>6K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(1)}>⑤K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(2)}>⑦K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(3)}>9K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(4)}>⑩K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(5)}>⑭K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(6)}>24</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(7)}>48</NavLink> </NavItem> </Nav> <TabContent activeTab={favoritesTabPosition}> <FavoriteView tabPosition={0} isFavoritesLoading={isFavorites6KLoading} favorites={favorites6K} /> <FavoriteView tabPosition={1} isFavoritesLoading={isFavorites5KLoading} favorites={favorites5K} /> <FavoriteView tabPosition={2} isFavoritesLoading={isFavorites7KLoading} favorites={favorites7K} /> <FavoriteView tabPosition={3} isFavoritesLoading={isFavorites9KLoading} favorites={favorites9K} /> <FavoriteView tabPosition={4} isFavoritesLoading={isFavorites10KLoading} favorites={favorites10K} /> <FavoriteView tabPosition={5} isFavoritesLoading={isFavorites14KLoading} favorites={favorites14K} /> <FavoriteView tabPosition={6} isFavoritesLoading={isFavorites24KLoading} favorites={favorites24K} /> <FavoriteView tabPosition={7} isFavoritesLoading={isFavorites48KLoading} favorites={favorites48K} /> </TabContent> </> ); });