import { useState } from "react"; import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Button, Col, Modal, Row } from "reactstrap"; import { sprintf } from "sprintf-js"; import { useSiteStore } from "src/Stores"; import NewSiteWindow from "src/site/NewSiteWindow"; import SiteComponent from "src/site/SiteComponent"; import SiteCipherWindow from "src/site/SiteCipherWindow"; import sc0 from "src/assets/sc0.png"; import sc2 from "src/assets/sc2.png"; import sc from "src/assets/sc.png"; import scss from "src/site/SiteWindow.module.scss"; import useGetSites from "src/site/useGetSites"; const EventPB = require("src/Event_pb"); const scs = [sc0, "", sc2]; export default observer(() => { const { siteAvatarID, isSiteWindowOpened, setSiteWindowOpened, setSiteCipherWindowOpened, targetSiteID, setNewSiteWindowOpened, } = useSiteStore(); const { t } = useTranslation(); const [siteID, setSiteID] = useState(""); const [siteName, setSiteName] = useState(""); const { data: sites } = useGetSites(); const onClose = () => { setSiteWindowOpened(false); }; return ( <Modal isOpen={isSiteWindowOpened} toggle={onClose} centered> <Row className="g-0"> <Col className="m-1" xs="auto"> {sites.map( ({ siteID, hasCipher, siteConfigure, siteName, avatarCount }) => ( <Row key={siteID} className={`g-0 ${targetSiteID === siteID ? "target" : ""}`} > <Col className="m-1" xs="auto"> {scs[siteConfigure] && ( <img alt="" src={scs[siteConfigure]} className={scss.sc} /> )}{" "} <span className="route" onClick={() => { if (hasCipher) { setSiteID(siteID); setSiteName(siteName); setSiteCipherWindowOpened(true); } else { SiteComponent.send({ eventID: EventPB.Event.EventID.ENTER_SITE, text: JSON.stringify({ siteID, siteCipher: "" }), }); onClose(); } }} > {siteName} ({sprintf(t("avatarCountText"), avatarCount)}) {hasCipher && ( <> {" "} <img alt="" src={sc} className={scss.sc} /> </> )} </span> </Col> </Row> ), )} </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Button onClick={() => { setNewSiteWindowOpened(true); }} disabled={!siteAvatarID} > {t("siteWindowNew")} </Button> </Col> </Row> <SiteCipherWindow siteID={siteID} siteName={siteName} /> <NewSiteWindow /> </Modal> ); });