import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import useGetAvatarLasts from "@/app/[language]/avatar/query/useGetAvatarLasts"; 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, lastsTabItem, setLastsTabItem } = useAvatarStore(); const { isFetched: isAvatarLastsLoaded, data: avatarLasts } = useGetAvatarLasts(lastsTabItem, tabItem === "lasts" ? avatarID : undefined); const NotesView = useCallback(() => { return ( <ListGroup> {isAvatarLastsLoaded ? avatarLasts.map((avatarLast) => ( <ListGroupItem key={avatarLast.noteID}> <NoteView {...avatarLast} wantAvatarID={avatarID} /> </ListGroupItem> )) : [...Array(50).keys()].map((i) => ( <ListGroupItem key={i}> <NoteViewLoading /> </ListGroupItem> ))} </ListGroup> ); }, [avatarID, avatarLasts, isAvatarLastsLoaded]); return ( <> <Tabs activeKey={lastsTabItem} onSelect={(eventKey) => { if (eventKey) { setLastsTabItem(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> </> ); });