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 { lasts5K, lasts7K, lasts9K, lasts10K, lasts14K, lasts24K, lasts48K, isLasts5KLoading, isLasts7KLoading, isLasts9KLoading, isLasts10KLoading, isLasts14KLoading, isLasts24KLoading, isLasts48KLoading, avatarID, lastsTabPosition, setLastsTabPosition, } = useAvatarStore(); const getProperties = (i: number) => ({ className: lastsTabPosition === i ? "active route" : "route", onClick: () => { setLastsTabPosition(i); }, }); const LastView = useCallback( ({ tabPosition, isLastsLoading, lasts, }: { tabPosition: number; isLastsLoading: boolean; lasts: Note[]; }) => { return ( <TabPane tabId={tabPosition}> <ListGroup> {isLastsLoading ? ( <NoteLoading loadingCount={50} /> ) : ( lasts.map((last) => ( <NoteItem {...last} key={last.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> <NavItem> <NavLink {...getProperties(3)}>⑩K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(4)}>⑭K</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(5)}>24</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(6)}>48</NavLink> </NavItem> </Nav> <TabContent activeTab={lastsTabPosition}> <LastView tabPosition={0} isLastsLoading={isLasts5KLoading} lasts={lasts5K} /> <LastView tabPosition={1} isLastsLoading={isLasts7KLoading} lasts={lasts7K} /> <LastView tabPosition={2} isLastsLoading={isLasts9KLoading} lasts={lasts9K} /> <LastView tabPosition={3} isLastsLoading={isLasts10KLoading} lasts={lasts10K} /> <LastView tabPosition={4} isLastsLoading={isLasts14KLoading} lasts={lasts14K} /> <LastView tabPosition={5} isLastsLoading={isLasts24KLoading} lasts={lasts24K} /> <LastView tabPosition={6} isLastsLoading={isLasts48KLoading} lasts={lasts48K} /> </TabContent> </> ); });