From 43639e8ab8768f42384c8d0fffa47665cb0b8674 Mon Sep 17 00:00:00 2001 From: David Lougheed Date: Mon, 9 Sep 2024 12:03:19 -0400 Subject: [PATCH] refact: start creating single router --- src/components/App.js | 49 ++++++++++++++++--- ...orerContent.js => DataExplorerContent.tsx} | 12 +---- src/components/DataManagerContent.js | 36 ++++++-------- 3 files changed, 57 insertions(+), 40 deletions(-) rename src/components/{DataExplorerContent.js => DataExplorerContent.tsx} (51%) diff --git a/src/components/App.js b/src/components/App.js index 646974b0b..f1f3c5900 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -22,8 +22,9 @@ import { Layout, message, Modal } from "antd"; import { BENTO_URL_NO_TRAILING_SLASH, OPENID_CONFIG_URL } from "@/config"; import eventHandler from "@/events"; import SessionWorker from "@/session.worker"; -import { nop } from "@/utils/misc"; +import { useService } from "@/modules/services/hooks"; import { fetchUserDependentData } from "@/modules/user/actions"; +import { nop } from "@/utils/misc"; import NotificationDrawer from "./notifications/NotificationDrawer"; import AutoAuthenticate from "./AutoAuthenticate"; @@ -31,12 +32,27 @@ import RequireAuth from "./RequireAuth"; import SiteHeader from "./SiteHeader"; import SiteFooter from "./SiteFooter"; import SitePageLoading from "./SitePageLoading"; -import { useService } from "@/modules/services/hooks"; -// Lazy-load route components +// --- Begin route element components ---------------------------------------------------------------------------------- +// - Lazy-load route components + const OverviewContent = lazy(() => import("./OverviewContent")); + const DataExplorerContent = lazy(() => import("./DataExplorerContent")); +const ExplorerSearchContent = lazy(() => import("@/components/explorer/ExplorerSearchContent")); +const ExplorerIndividualContent = lazy(() => import("@/components/explorer/ExplorerIndividualContent")); +const ExplorerGenomeBrowserContent = lazy(() => import("@/components/explorer/ExplorerGenomeBrowserContent")); + const DataManagerContent = lazy(() => import("./DataManagerContent")); +const ManagerProjectDatasetContent = lazy(() => import("@/components/manager/projects/ManagerProjectDatasetContent")); +const ManagerAccessContent = lazy(() => import("@/components/manager/access/ManagerAccessContent")); +const ManagerDropBoxContent = lazy(() => import("@/components/manager/ManagerDropBoxContent")); +const ManagerIngestionContent = lazy(() => import("@/components/manager/ManagerIngestionContent")); +const ManagerAnalysisContent = lazy(() => import("@/components/manager/ManagerAnalysisContent")); +const ManagerExportContent = lazy(() => import("@/components/manager/ManagerExportContent")); +const ManagerRunsContent = lazy(() => import("@/components/manager/runs/ManagerRunsContent")); +const ManagerDRSContent = lazy(() => import("@/components/manager/drs/ManagerDRSContent")); + const ReferenceGenomesContent = lazy(() => import("./ReferenceGenomesContent")); const CBioPortalContent = lazy(() => import("./CBioPortalContent")); const NotificationsContent = lazy(() => import("./notifications/NotificationsContent")); @@ -44,6 +60,8 @@ const ServiceContent = lazy(() => import("./ServiceContent")); const ServiceDetail = lazy(() => import("./services/ServiceDetail")); const UserProfileContent = lazy(() => import("./UserProfileContent")); +// --------------------------------------------------------------------------------------------------------------------- + const SIGN_IN_WINDOW_FEATURES = "scrollbars=no, toolbar=no, menubar=no, width=800, height=600"; const CALLBACK_PATH = "/callback"; @@ -237,13 +255,18 @@ const App = () => { } /> } - /> + > + } /> + } /> + } /> + } /> + {/* Reference content is available to everyone to view, at least, so wrap it in an AutoAuthenticate (to re-authenticate if we were before) rather than requiring auth. */} { } /> } - /> + > + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + { } /> - } /> + } /> diff --git a/src/components/DataExplorerContent.js b/src/components/DataExplorerContent.tsx similarity index 51% rename from src/components/DataExplorerContent.js rename to src/components/DataExplorerContent.tsx index a8e468820..b0b2e2c12 100644 --- a/src/components/DataExplorerContent.js +++ b/src/components/DataExplorerContent.tsx @@ -1,12 +1,9 @@ import { useEffect } from "react"; -import { Navigate, Route, Routes } from "react-router-dom"; +import { Outlet } from "react-router-dom"; import { SITE_NAME } from "@/constants"; import { useCanQueryAtLeastOneProjectOrDataset } from "@/modules/authz/hooks"; -import ExplorerGenomeBrowserContent from "./explorer/ExplorerGenomeBrowserContent"; -import ExplorerIndividualContent from "./explorer/ExplorerIndividualContent"; -import ExplorerSearchContent from "./explorer/ExplorerSearchContent"; import ForbiddenContent from "./ForbiddenContent"; const DataExplorerContent = () => { @@ -22,12 +19,7 @@ const DataExplorerContent = () => { } return ( - - } /> - } /> - } /> - } /> - + ); }; export default DataExplorerContent; diff --git a/src/components/DataManagerContent.js b/src/components/DataManagerContent.js index 6883ee971..6dde1cd55 100644 --- a/src/components/DataManagerContent.js +++ b/src/components/DataManagerContent.js @@ -1,5 +1,5 @@ -import { Suspense, lazy, useEffect } from "react"; -import { Navigate, Route, Routes } from "react-router-dom"; +import { Suspense, useEffect } from "react"; +import { Outlet } from "react-router-dom"; import { Menu, Skeleton } from "antd"; @@ -9,15 +9,6 @@ import { matchingMenuKeys, transformMenuItem } from "@/utils/menu"; import SitePageHeader from "./SitePageHeader"; -const ManagerProjectDatasetContent = lazy(() => import("./manager/projects/ManagerProjectDatasetContent")); -const ManagerAccessContent = lazy(() => import("./manager/access/ManagerAccessContent")); -const ManagerDropBoxContent = lazy(() => import("./manager/ManagerDropBoxContent")); -const ManagerIngestionContent = lazy(() => import("./manager/ManagerIngestionContent")); -const ManagerAnalysisContent = lazy(() => import("./manager/ManagerAnalysisContent")); -const ManagerExportContent = lazy(() => import("./manager/ManagerExportContent")); -const ManagerRunsContent = lazy(() => import("./manager/runs/ManagerRunsContent")); -const ManagerDRSContent = lazy(() => import("./manager/drs/ManagerDRSContent")); - const styles = { menu: { marginLeft: "-24px", @@ -112,17 +103,18 @@ const DataManagerContent = () => { } > - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + + {/**/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/* } />*/} + {/**/} );