import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import useGetAvatarFavorites from "@/app/[language]/avatar/query/useGetAvatarFavorites"; import NoteView, { NoteViewLoading, } from "@/app/[language]/note/components/NoteView"; import { useAvatarStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useCallback } from "react"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; import Tab from "react-bootstrap/Tab"; import Tabs from "react-bootstrap/Tabs"; export default observer(({ avatar: { avatarID } }: { avatar: GetAvatar }) => { const { tabItem, favoritesTabItem, setFavoritesTabItem } = useAvatarStore(); const { isFetched: isAvatarFavoritesLoaded, data: avatarFavorites } = useGetAvatarFavorites( favoritesTabItem, tabItem === "favorites" ? avatarID : undefined, ); const NotesView = useCallback(() => { return ( <ListGroup> {isAvatarFavoritesLoaded ? avatarFavorites.map((avatarFavorite) => ( <ListGroupItem key={avatarFavorite.noteID}> <NoteView {...avatarFavorite} wantAvatarID={avatarID} /> </ListGroupItem> )) : [...Array(50).keys()].map((i) => ( <ListGroupItem key={i}> <NoteViewLoading /> </ListGroupItem> ))} </ListGroup> ); }, [avatarFavorites, avatarID, isAvatarFavoritesLoaded]); return ( <> <Tabs activeKey={favoritesTabItem} onSelect={(eventKey) => { if (eventKey) { setFavoritesTabItem(eventKey); } }} > <Tab title="6K" eventKey="6K"> <NotesView /> </Tab> <Tab title="⑤K" eventKey="5K"> <NotesView /> </Tab> <Tab title="⑦K" eventKey="7K"> <NotesView /> </Tab> <Tab title="9K" eventKey="9K"> <NotesView /> </Tab> <Tab title="⑩K" eventKey="10K"> <NotesView /> </Tab> <Tab title="⑭K" eventKey="14K"> <NotesView /> </Tab> <Tab title="24" eventKey="24K"> <NotesView /> </Tab> <Tab title="48" eventKey="48K"> <NotesView /> </Tab> </Tabs> </> ); });