App.tsx

import { ReactElement, lazy } from "react";
import { createBrowserRouter, RouterProvider, Outlet, useLocation } from "react-router-dom";
import Providers from "compendium/Providers";
import { ConnectivityPage, ServiceCategory } from "compendium/Schema";
import ExternalPageNavBar from "compendium/components/global/ExternalPageNavBar";
import GeantFooter from "compendium/components/global/GeantFooter";
import Landing from "compendium/pages/Landing";
import CompendiumData from "compendium/pages/CompendiumData";
import PrivacyModal from "compendium/matomo/PrivacyModal";

// Organization
const BudgetPage = lazy(() => import("compendium/pages/Organization/Budget"));
const ChargingStructurePage = lazy(() => import("compendium/pages/Organization/ChargingStructure"));
const ECProjectsPage = lazy(() => import("compendium/pages/Organization/ECProjects"));
const FundingSourcePage = lazy(() => import("compendium/pages/Organization/FundingSource"));
const ParentOrganisationPage = lazy(() => import("compendium/pages/Organization/ParentOrganisation"));
const StaffGraphPage = lazy(() => import("compendium/pages/Organization/StaffGraph"));
const StaffGraphAbsolutePage = lazy(() => import("compendium/pages/Organization/StaffGraphAbsolute"));
const SubOrganisationPage = lazy(() => import("compendium/pages/Organization/SubOrganisation"));

// Standards & Policies
const AuditsPage = lazy(() => import("compendium/pages/Standards&Policies/Audits"));
const BusinessContinuityPage = lazy(() => import("compendium/pages/Standards&Policies/BusinessContinuity"));
const CentralProcurementPage = lazy(() => import("compendium/pages/Standards&Policies/CentralProcurement"));
const CorporateStrategyPage = lazy(() => import("compendium/pages/Standards&Policies/CorporateStrategy"));
const CrisisExercisesPage = lazy(() => import("compendium/pages/Standards&Policies/CrisisExercises"));
const CrisisManagementPage = lazy(() => import("compendium/pages/Standards&Policies/CrisisManagement"));
const EOSCListingsPage = lazy(() => import("compendium/pages/Standards&Policies/EOSCListings"));
const PolicyPage = lazy(() => import("compendium/pages/Standards&Policies/Policy"));
const SecurityControlsPage = lazy(() => import("compendium/pages/Standards&Policies/SecurityControls"));
const ServiceLevelTargetsPage = lazy(() => import("compendium/pages/Standards&Policies/ServiceLevelTargets"));
const ServiceManagementFrameworkPage = lazy(() => import("compendium/pages/Standards&Policies/ServiceManagementFramework"));
const ServicesOfferedPage = lazy(() => import("compendium/pages/Standards&Policies/ServicesOffered"));

// Connected Users
const ConnectedInstitutionsURLsPage = lazy(() => import("compendium/pages/ConnectedUsers/ConnectedInstitutionsURLs"));
const ConnectedUserPage = lazy(() => import("compendium/pages/ConnectedUsers/ConnectedUser"));
const RemoteCampusesPage = lazy(() => import("compendium/pages/ConnectedUsers/RemoteCampuses"));

// Network
const AlienWavePage = lazy(() => import("compendium/pages/Network/AlienWave"));
const AlienWaveInternalPage = lazy(() => import("compendium/pages/Network/AlienWaveInternal"));
const AutomationPage = lazy(() => import("compendium/pages/Network/Automation"));
const CapacityCoreIPPage = lazy(() => import("compendium/pages/Network/CapacityCoreIP"));
const CapacityLargestLinkPage = lazy(() => import("compendium/pages/Network/CapacityLargestLink"));
const CertificateProviderPage = lazy(() => import("compendium/pages/Network/CertificateProvider"));
const DarkFibreLeasePage = lazy(() => import("compendium/pages/Network/DarkFibreLease"));
const DarkFibreInstalledPage = lazy(() => import("compendium/pages/Network/DarkFibreInstalled"));
const ExternalConnectionsPage = lazy(() => import("compendium/pages/Network/ExternalConnections"));
const FibreLightPage = lazy(() => import("compendium/pages/Network/FibreLight"));
const IRUDurationPage = lazy(() => import("compendium/pages/Network/IRUDuration"));
const MonitoringToolsPage = lazy(() => import("compendium/pages/Network/MonitoringTools"));
const NetworkFunctionVirtualisationPage = lazy(() => import("compendium/pages/Network/NetworkFunctionVirtualisation"));
const NetworkMapUrlPage = lazy(() => import("compendium/pages/Network/NetworkMapUrls"));
const NonRAndEPeerPage = lazy(() => import("compendium/pages/Network/NonRAndEPeer"));
const OPsAutomationPage = lazy(() => import("compendium/pages/Network/OPsAutomation"));
const PassiveMonitoringPage = lazy(() => import("compendium/pages/Network/PassiveMonitoring"));
const PertTeamPage = lazy(() => import("compendium/pages/Network/PertTeam"));
const SiemVendorsPage = lazy(() => import("compendium/pages/Network/SiemVendors"));
const TrafficRatioPage = lazy(() => import("compendium/pages/Network/TrafficRatio"));
const TrafficUrlPage = lazy(() => import("compendium/pages/Network/TrafficUrl"));
const TrafficVolumePage = lazy(() => import("compendium/pages/Network/TrafficVolume"));
const NetworkWeatherMapPage = lazy(() => import("compendium/pages/Network/WeatherMap"));

// Services Matrix
const ServicesPage = lazy(() => import("compendium/pages/Services/Services"));

// Survey
const SurveyLanding = lazy(() => import('compendium/survey/Landing'));
const SurveyContainerComponent = lazy(() => import('compendium/survey/SurveyContainerComponent'));
const SurveyManagementComponent = lazy(() => import('compendium/survey/management/SurveyManagementComponent'));
const UserManagementComponent = lazy(() => import('compendium/survey/management/UserManagementComponent'));

const GlobalLayout = () => {
  // this component is needed to provide a global layout for the app, including the navbar and footer,
  // and make them part of the react-router-dom context
  const { pathname } = useLocation();
  // hacky workaround for supporting a landing page on the root path, as well as any undefined path
  const hasOutlet = pathname !== "/"
  return (
    <>
      <Providers>
        <ExternalPageNavBar />
        <main className="grow">
          {hasOutlet ? <Outlet /> : <Landing />}
        </main>
        <PrivacyModal />
      </Providers>
      <GeantFooter />
    </>
  )
}

const router = createBrowserRouter([
  {
    "path": "",
    "element": <GlobalLayout />,
    "children": [
      { path: "/budget", element: <BudgetPage /> },
      { path: "/funding", element: <FundingSourcePage /> },
      { path: "/employment", element: <StaffGraphPage key={"staffgraph"} /> },
      { path: "/traffic-ratio", element: <TrafficRatioPage /> },
      { path: "/roles", element: <StaffGraphPage roles key={"staffgraphroles"} /> },
      { path: "/employee-count", element: <StaffGraphAbsolutePage /> },
      { path: "/charging", element: <ChargingStructurePage /> },
      { path: "/suborganisations", element: <SubOrganisationPage /> },
      { path: "/parentorganisation", element: <ParentOrganisationPage /> },
      { path: "/ec-projects", element: <ECProjectsPage /> },
      { path: "/policy", element: <PolicyPage /> },
      { path: "/traffic-volume", element: <TrafficVolumePage /> },
      { path: "/data", element: <CompendiumData /> },
      { path: "/institutions-urls", element: <ConnectedInstitutionsURLsPage /> },
      { path: "/connected-proportion", element: <ConnectedUserPage page={ConnectivityPage.ConnectedProportion} key={ConnectivityPage.ConnectedProportion} /> },
      { path: "/connectivity-level", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityLevel} key={ConnectivityPage.ConnectivityLevel} /> },
      { path: "/connectivity-growth", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityGrowth} key={ConnectivityPage.ConnectivityGrowth} /> },
      { path: "/connection-carrier", element: <ConnectedUserPage page={ConnectivityPage.ConnectionCarrier} key={ConnectivityPage.ConnectionCarrier} /> },
      { path: "/connectivity-load", element: <ConnectedUserPage page={ConnectivityPage.ConnectivityLoad} key={ConnectivityPage.ConnectivityLoad} /> },
      { path: "/commercial-charging-level", element: <ConnectedUserPage page={ConnectivityPage.CommercialChargingLevel} key={ConnectivityPage.CommercialChargingLevel} /> },
      { path: "/commercial-connectivity", element: <ConnectedUserPage page={ConnectivityPage.CommercialConnectivity} key={ConnectivityPage.CommercialConnectivity} /> },
      { path: "/network-services", element: <ServicesPage category={ServiceCategory.network_services} key={ServiceCategory.network_services} /> },
      { path: "/isp-support-services", element: <ServicesPage category={ServiceCategory.isp_support} key={ServiceCategory.isp_support} /> },
      { path: "/security-services", element: <ServicesPage category={ServiceCategory.security} key={ServiceCategory.security} /> },
      { path: "/identity-services", element: <ServicesPage category={ServiceCategory.identity} key={ServiceCategory.identity} /> },
      { path: "/collaboration-services", element: <ServicesPage category={ServiceCategory.collaboration} key={ServiceCategory.collaboration} /> },
      { path: "/multimedia-services", element: <ServicesPage category={ServiceCategory.multimedia} key={ServiceCategory.multimedia} /> },
      { path: "/storage-and-hosting-services", element: <ServicesPage category={ServiceCategory.storage_and_hosting} key={ServiceCategory.storage_and_hosting} /> },
      { path: "/professional-services", element: <ServicesPage category={ServiceCategory.professional_services} key={ServiceCategory.professional_services} /> },
      { path: "/dark-fibre-lease", element: <DarkFibreLeasePage national key={"darkfibrenational"} /> },
      { path: "/dark-fibre-lease-international", element: <DarkFibreLeasePage key={"darkfibreinternational"} /> },
      { path: "/dark-fibre-installed", element: <DarkFibreInstalledPage /> },
      { path: "/remote-campuses", element: <RemoteCampusesPage /> },
      { path: "/eosc-listings", element: <EOSCListingsPage /> },
      { path: "/fibre-light", element: <FibreLightPage /> },
      { path: "/monitoring-tools", element: <MonitoringToolsPage /> },
      { path: "/pert-team", element: <PertTeamPage /> },
      { path: "/passive-monitoring", element: <PassiveMonitoringPage /> },
      { path: "/alien-wave", element: <AlienWavePage /> },
      { path: "/alien-wave-internal", element: <AlienWaveInternalPage /> },
      { path: "/external-connections", element: <ExternalConnectionsPage /> },
      { path: "/ops-automation", element: <OPsAutomationPage /> },
      { path: "/network-automation", element: <AutomationPage /> },
      { path: "/traffic-stats", element: <TrafficUrlPage /> },
      { path: "/weather-map", element: <NetworkWeatherMapPage /> },
      { path: "/network-map", element: <NetworkMapUrlPage /> },
      { path: "/nfv", element: <NetworkFunctionVirtualisationPage /> },
      { path: "/certificate-providers", element: <CertificateProviderPage /> },
      { path: "/siem-vendors", element: <SiemVendorsPage /> },
      { path: "/capacity-largest-link", element: <CapacityLargestLinkPage /> },
      { path: "/capacity-core-ip", element: <CapacityCoreIPPage /> },
      { path: "/non-rne-peers", element: <NonRAndEPeerPage /> },
      { path: "/iru-duration", element: <IRUDurationPage /> },
      { path: "/audits", element: <AuditsPage /> },
      { path: "/business-continuity", element: <BusinessContinuityPage /> },
      { path: "/crisis-management", element: <CrisisManagementPage /> },
      { path: "/crisis-exercise", element: <CrisisExercisesPage /> },
      { path: "/central-procurement", element: <CentralProcurementPage /> },
      { path: "/security-control", element: <SecurityControlsPage /> },
      { path: "/services-offered", element: <ServicesOfferedPage /> },
      { path: "/service-management-framework", element: <ServiceManagementFrameworkPage /> },
      { path: "/service-level-targets", element: <ServiceLevelTargetsPage /> },
      { path: "/corporate-strategy", element: <CorporateStrategyPage /> },

      // survey
      { path: "/survey/admin/surveys", element: <SurveyManagementComponent /> },
      { path: "/survey/admin/users", element: <UserManagementComponent /> },
      { path: "/survey/admin/inspect/:year", element: <SurveyContainerComponent loadFrom={"/api/response/inspect/"} /> },
      { path: "/survey/admin/try/:year", element: <SurveyContainerComponent loadFrom={"/api/response/try/"} /> },
      { path: "/survey/response/:year/:nren", element: <SurveyContainerComponent loadFrom={"/api/response/load/"} /> },
      { path: "/survey/*", element: <SurveyLanding /> },
      { path: "/*", element: <Landing /> },
    ]
  }
]);

function App(): ReactElement {
  return (
    <div className="app">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;