import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import useGetAvatarLasts from "@/app/[language]/avatar/query/useGetAvatarLasts"; import NoteItem from "@/app/[language]/note/components/NoteItem"; import { NoteLoading } from "@/components/Loading"; import { useAvatarStore } from "@/store/Stores"; import { getInputMode } from "@/utilities/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, lastsTabPosition, setLastsTabPosition } = useAvatarStore(); const { isFetched: isAvatarLastsLoaded, data: avatarLasts } = useGetAvatarLasts( getInputMode(lastsTabPosition), tabPosition === 1 ? avatarID : undefined, ); const getProperties = (i: number) => ({ className: lastsTabPosition === i ? "active route" : "route", onClick: () => { setLastsTabPosition(i); }, }); const LastView = useCallback( ({ tabPosition }: { tabPosition: number }) => { return ( <TabPane tabId={tabPosition}> <ListGroup> {isAvatarLastsLoaded ? ( avatarLasts.map((avatarLast) => ( <NoteItem {...avatarLast} key={avatarLast.noteID} wantAvatarID={avatarID} /> )) ) : ( <NoteLoading loadingCount={50} /> )} </ListGroup> </TabPane> ); }, [avatarID, avatarLasts, isAvatarLastsLoaded], ); 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={lastsTabPosition}> <LastView tabPosition={0} /> <LastView tabPosition={1} /> <LastView tabPosition={2} /> <LastView tabPosition={3} /> <LastView tabPosition={4} /> <LastView tabPosition={5} /> <LastView tabPosition={6} /> <LastView tabPosition={7} /> </TabContent> </> ); });