import { lazy, Suspense, useRef } from "react"; import { Link, Navigate, Route, Routes, useLocation } from "react-router-dom"; import { observer } from "mobx-react-lite"; import { Button, Col, Container, Navbar, NavbarBrand, Row } from "reactstrap"; import { useTranslation } from "react-i18next"; import { ToastContainer } from "react-toastify"; import { useAvatarStore, useEtcStore, useHOFStore, useNoteStore, useSiteStore, } from "src/Stores"; import SignInWindow from "src/site/SignInWindow"; import useSiteComponent from "src/site/useSiteComponent"; import { AvatarViewLoading, EtcViewLoading, HOFViewLoading, NoteViewLoading, SiteViewLoading, } 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 HOFView = lazy(() => import("src/hof/HOFView")); const EtcView = lazy(() => import("src/etc/EtcView")); export default observer(() => { const { isLoading: isNoteLoading } = useNoteStore(); const { isLoading: isSiteViewLoading } = useSiteStore(); const { isLoading: isAvatarViewLoading } = useAvatarStore(); const { isLoading: isHOFViewLoading } = useHOFStore(); const { isLoading: isEtcViewLoading } = 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(isSiteViewLoading, "/qwilight/site")} > {t("toSite")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/avatar")}> <Button color={getColor(isAvatarViewLoading, "/qwilight/avatar")} > {t("toAvatar")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/hof")}> <Button color={getColorIfEquals(isHOFViewLoading, "/qwilight/hof")} > {t("toHOF")} </Button> </Link> </Col> <Col className="m-1" xs="auto"> <Link to={getTo("/qwilight/etc")}> <Button color={getColorIfEquals(isEtcViewLoading, "/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/:want?" element={ <Suspense fallback={<NoteViewLoading />}> <NoteView /> </Suspense> } /> <Route path="/qwilight/site" element={ <Suspense fallback={<SiteViewLoading />}> <SiteView titleComponent={titleComponent} siteYellsView={siteYellsView} /> </Suspense> } /> <Route path="/qwilight/avatar/:want?" element={ <Suspense fallback={<AvatarViewLoading />}> <AvatarView /> </Suspense> } /> <Route path="/qwilight/hof" element={ <Suspense fallback={<HOFViewLoading />}> <HOFView /> </Suspense> } /> <Route path="/qwilight/etc" element={ <Suspense fallback={<EtcViewLoading />}> <EtcView /> </Suspense> } /> <Route path="/qwilight" element={<Navigate to={getTo("/qwilight/note")} replace />} /> </Routes> </Container> <ToastContainer theme="dark" closeButton={false} hideProgressBar /> <SignInWindow /> </> ); });