import { GetAvatar } from "@/avatar/useGetAvatar"; import useGetAvatarFavorites from "@/avatar/useGetAvatarFavorites"; import { NoteLoading } from "@/Loading"; import NoteItem from "@/note/NoteItem"; import { useAvatarStore } from "@/Stores"; import { getInputMode } from "@/Utility"; import { observer } from "mobx-react-lite"; import { useCallback } from "react"; import { ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; export default observer(({ avatar: { avatarID } }: { avatar: GetAvatar }) => { const { tabPosition, favoritesTabPosition, setFavoritesTabPosition } = useAvatarStore(); const { isFetched: isAvatarFavoritesLoaded, data: avatarFavorites } = useGetAvatarFavorites( getInputMode(favoritesTabPosition), tabPosition === 0 ? avatarID : undefined, ); const getProperties = (i: number) => ({ className: favoritesTabPosition === i ? "active route" : "route", onClick: () => { setFavoritesTabPosition(i); }, }); const FavoriteView = useCallback( ({ tabPosition }: { tabPosition: number }) => { return ( <TabPane tabId={tabPosition}> <ListGroup> {isAvatarFavoritesLoaded ? ( avatarFavorites.map((avatarFavorite) => ( <NoteItem {...avatarFavorite} key={avatarFavorite.noteID} wantAvatarID={avatarID} /> )) ) : ( <NoteLoading loadingCount={50} /> )} </ListGroup> </TabPane> ); }, [avatarFavorites, isAvatarFavoritesLoaded], ); 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} /> <FavoriteView tabPosition={1} /> <FavoriteView tabPosition={2} /> <FavoriteView tabPosition={3} /> <FavoriteView tabPosition={4} /> <FavoriteView tabPosition={5} /> <FavoriteView tabPosition={6} /> <FavoriteView tabPosition={7} /> </TabContent> </> ); });