import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import useGetAvatarAbility from "@/app/[language]/avatar/query/useGetAvatarAbility"; 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, abilityTabItem, setAbilitiesTabItem } = useAvatarStore(); const { isFetched: isAvatarAbilityLoaded, data: avatarAbility } = useGetAvatarAbility( abilityTabItem, tabItem === "abilities" ? avatarID : undefined, ); const NotesView = useCallback(() => { return ( <ListGroup> {isAvatarAbilityLoaded ? avatarAbility.map((avatarAbility) => ( <ListGroupItem key={avatarAbility.noteID}> <NoteView {...avatarAbility} wantAvatarID={avatarID} /> </ListGroupItem> )) : [...Array(50).keys()].map((i) => ( <ListGroupItem key={i}> <NoteViewLoading /> </ListGroupItem> ))} </ListGroup> ); }, [avatarAbility, avatarID, isAvatarAbilityLoaded]); return ( <> <Tabs activeKey={abilityTabItem} onSelect={(eventKey) => { if (eventKey) { setAbilitiesTabItem(eventKey); } }} > <Tab title="⑤K" eventKey="5K"> <NotesView /> </Tab> <Tab title="⑦K" eventKey="7K"> <NotesView /> </Tab> <Tab title="9K" eventKey="9K"> <NotesView /> </Tab> </Tabs> </> ); });