import { lazy, Suspense, useRef } from "react"; import { Routes, Route, Link, useLocation, Navigate } from "react-router-dom"; import { observer } from "mobx-react-lite"; import { Container, Button, Row, Col, Navbar, NavbarBrand } from "reactstrap"; import { useTranslation } from "react-i18next"; import { ToastContainer } from "react-toastify"; import { useEtcStore, useAvatarStore, useNoteStore, useSiteStore, useWowStore, } from "src/Stores"; import SignInWindow from "src/site/SignInWindow"; import useSiteComponent from "src/site/useSiteComponent"; import { AvatarLoading, EtcLoading, NotesLoading, SiteLoading, WowLoading, } from "src/Loading"; import platform from "src/assets/discord-logo-white.png"; import scss from "src/qwilight/QwilightView.module.scss"; const NoteView = lazy(() => import("src/note/NoteView")); const SiteView = lazy(() => import("src/site/SiteView")); const AvatarView = lazy(() => import("src/avatar/AvatarView")); const WowView = lazy(() => import("src/wow/WowView")); const EtcView = lazy(() => import("src/etc/EtcView")); export default observer(() => { const { isLoading: isNoteLoading } = useNoteStore(); const { isLoading: isSiteLoading } = useSiteStore(); const { isLoading: isAvatarLoading } = useAvatarStore(); const { isLoading: isWowLoading } = useWowStore(); const { isLoading: isEtcLoading } = useEtcStore(); const { t } = useTranslation(); const titleComponent = useRef<HTMLDivElement>(null); const siteYellsView = useRef<HTMLDivElement>(null); useSiteComponent(siteYellsView); const { pathname } = useLocation(); const getColor = (isLoading: boolean, route: string) => isLoading ? "warning" : pathname.startsWith(route) ? "primary" : "secondary"; const getColorIfEquals = (isLoading: boolean, route: string) => isLoading ? "warning" : pathname === route ? "primary" : "secondary"; const onPlatform = () => { window.open("https://taehui.ddns.net/qwilight/platform"); }; const getTo = (pathname: string) => ({ ...window.location, pathname, search: "", }); return ( <> <div ref={titleComponent}> <Navbar> <NavbarBrand href="/"> <img alt="" src="/qwilight/logo512.png" className={scss.qwilight} /> </NavbarBrand> <Row className="g-0"> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/note")}> <Button color={getColorIfEquals(isNoteLoading, "/qwilight/note")} > {t("toNote")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/site")}> <Button color={getColorIfEquals(isSiteLoading, "/qwilight/site")} > {t("toSite")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/avatar")}> <Button color={getColor(isAvatarLoading, "/qwilight/avatar")}> {t("toAvatar")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/wow")}> <Button color={getColorIfEquals(isWowLoading, "/qwilight/wow")}> {t("toWow")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/etc")}> <Button color={getColorIfEquals(isEtcLoading, "/qwilight/etc")}> {t("toEtc")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={onPlatform}> <img alt="" className={scss.platform} src={platform} /> </Button> </Col> </Row> </Navbar> </div> <Container> <Routes> <Route path="/qwilight/note" element={ <Suspense fallback={<NotesLoading />}> <NoteView /> </Suspense> } /> <Route path="/qwilight/site" element={ <Suspense fallback={<SiteLoading />}> <SiteView titleComponent={titleComponent} siteYellsView={siteYellsView} /> </Suspense> } /> <Route path="/qwilight/avatar/:wantAvatarName?" element={ <Suspense fallback={<AvatarLoading />}> <AvatarView /> </Suspense> } /> <Route path="/qwilight/wow" element={ <Suspense fallback={<WowLoading />}> <WowView /> </Suspense> } /> <Route path="/qwilight/etc" element={ <Suspense fallback={<EtcLoading />}> <EtcView /> </Suspense> } /> <Route path="/qwilight" element={<Navigate to={getTo("/qwilight/note")} replace />} /> </Routes> </Container> <ToastContainer theme="dark" closeButton={false} hideProgressBar /> <SignInWindow /> </> ); });