import { useCallback } from "react"; import { observer } from "mobx-react-lite"; import { ListGroup, Nav, NavItem, NavLink, TabContent, TabPane, } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; import { NoteLoading } from "src/Loading"; import { Note } from "src/avatar/Avatar"; export default observer(() => { const { abilities5K, abilities7K, abilities9K, isAbilities5KLoading, isAbilities7KLoading, isAbilities9KLoading, avatarID, abilitiesTabPosition, setAbilitiesTabPosition, } = useAvatarStore(); const getProperties = (i: number) => ({ className: abilitiesTabPosition === i ? "active route" : "route", onClick: () => { setAbilitiesTabPosition(i); }, }); const AbilityView = useCallback( ({ tabPosition, isAbilitiesLoading, abilities, }: { tabPosition: number; isAbilitiesLoading: boolean; abilities: Note[]; }) => { return ( <TabPane tabId={tabPosition}> <ListGroup> {isAbilitiesLoading ? ( <NoteLoading loadingCount={50} /> ) : ( abilities.map((ability) => ( <NoteItem {...ability} key={ability.noteID} wantAvatarID={avatarID} /> )) )} </ListGroup> </TabPane> ); }, [avatarID], ); return ( <> <Nav tabs> <NavItem> <NavLink {...getProperties(0)}>⑤K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(1)}>⑦K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(2)}>9K</NavLink> </NavItem> </Nav> <TabContent activeTab={abilitiesTabPosition}> <AbilityView tabPosition={0} isAbilitiesLoading={isAbilities5KLoading} abilities={abilities5K} /> <AbilityView tabPosition={1} isAbilitiesLoading={isAbilities7KLoading} abilities={abilities7K} /> <AbilityView tabPosition={2} isAbilitiesLoading={isAbilities9KLoading} abilities={abilities9K} /> </TabContent> </> ); });