import { useState } from "react"; import { Col, Collapse, ListGroupItem, Row, Spinner } from "reactstrap"; import { runInAction } from "mobx"; import { observer } from "mobx-react-lite"; import LevelData from "src/avatar/LevelData"; import { wwwAXIOS } from "src/Www"; import { toDate } from "src/Utility"; import { AvatarWwwLevelsAPI, LevelAPI } from "src/wwwAPI"; export default observer(({ levelID, title, date }: AvatarWwwLevelsAPI) => { const [isLevelDataOpened, setLevelDataOpened] = useState(false); const [isLoading, setLoading] = useState(false); const [levelData, setLevelData] = useState<LevelAPI>(); return ( <ListGroupItem> <Row className="g-0 route" onClick={async () => { if (isLevelDataOpened) { setLevelDataOpened(false); } else { setLoading(true); const { status, data } = await wwwAXIOS.get<LevelAPI>("/level", { params: { levelID, }, }); if (status === 200) { runInAction(() => { setLevelData(data); setLevelDataOpened(true); setLoading(false); }); } } }} > <Col className="m-1" xs="auto"> <span>{title}</span> {isLoading && <Spinner size="sm" />} <br /> <span className="fittedText">{toDate(date)}</span> </Col> </Row> <Collapse isOpen={isLevelDataOpened}> {levelData && <LevelData levelData={levelData} />} </Collapse> </ListGroupItem> ); });