frontend/src/navigation/Router.tsx

import { lazy, Suspense } from "react";
import LoadingScreen from "../app/LoadingScreen";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { Typography } from "@mui/material";
import { useAuth0 } from "@auth0/auth0-react";
import Teams from "pages/Teams";
import Users from "pages/Users";
import TeamPage from "pages/Team";
import Header from "app/Header";
import Logout from "pages/Logout";
import Devices from "pages/Devices";
import DevicePage from "pages/Device";
import GroupsPage from "pages/Groups";
import GroupPage from "pages/Group";
import { ErrorBoundary } from "react-error-boundary";
import DeviceComponent from "pages/DeviceComponent";

const DeviceHistory = lazy(() => import("pages/DeviceHistory"));

interface Props {
  toggleTheme: () => void;
}

export const appendToUrl = (appendage: number | string) => {
  const basePath = location.pathname.replace(/\/$/, ""); 
  return(`${basePath}/${appendage}`);
};

export default function Router(props: Props) {

  const { toggleTheme } = props;
  const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();

  const RelativeRoutes = () => {
    return (
      <Routes>
        <Route path="teams/*" element={<TeamsRoute/>} />
        <Route path="devices/*" element={<DevicesRoute/>} />
        <Route path="groups/*" element={<GroupsRoute/>} />
      </Routes>
    )
  }

  const TeamsRoute = () => {
    return (
      <Routes>
        <Route
          path="" // "/settings/basic"
          element={<Teams />}
        />
        <Route
          path="/:teamID" // "/settings/basic"
          element={<TeamPage />}
        />
        <Route
          path="/:teamID/*" // "/settings/basic"
          element={<RelativeRoutes />}
        />
      </Routes>
    );
  };

  const DevicesRoute = () => {
    return (
      <div>
        <Routes>
          <Route
            key="Devices page route"
            path="" // "/settings/basic"
            element={<Devices key={"Devices page"} />}
          />
          <Route
            path="/:deviceID" // "/settings/basic"
            element={<DevicePage />}
          />
          <Route
            path="/:deviceID/components/:componentID" // "/settings/basic"
            element={<DeviceComponent />}
          />
          <Route
            path="/:deviceID/history" // "/settings/basic"
            element={<DeviceHistory />}
          />
          <Route
            path="/:deviceID/*" // "/settings/basic"
            element={<RelativeRoutes />}
          />
        </Routes>
      </div>
    );
  };

  const GroupsRoute = () => {
    return (
      <div>
        <Routes>
          <Route
            path="/" 
            element={
              <ErrorBoundary FallbackComponent={ErrorFallback}>
                <GroupsPage />
              </ErrorBoundary>
            }
          />
          <Route
            path="/:groupID" 
            element={
              <ErrorBoundary FallbackComponent={ErrorFallback}>
                <GroupPage />
              </ErrorBoundary>
            }
          />
          <Route
            key="Devices page route"
            path="/:groupID/devices/" 
            element={<Devices key={"Devices page"}/>}
          />
          <Route
            path="/:groupID/devices/:deviceID" 
            element={<DevicePage />}
          />
          <Route
            path="/:groupID/devices/:deviceID/*" 
            element={<RelativeRoutes />}
          />
        </Routes>
      </div>
    );
  };

  if (isLoading) return null;
  if (!isAuthenticated) {
    loginWithRedirect()
    return (
      null
    )
  }

  function ErrorFallback({ error }: { error: Error }) {
    return <div>Something went wrong: {error.stack}</div>;
  }

  return (
    <Suspense fallback={<LoadingScreen />}>
      <BrowserRouter>
        <Header
          toggleTheme={toggleTheme}
          // teams={teams}
          // setTeams={setTeams}
        />
        <Routes>
          
          {/* Redirects */}
          <Route path="/callback" element={<Navigate to="/" />} />
          {/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
          {/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
          
          {/* Page routes */}
          <Route index element={<Typography>Hello!</Typography>} />
          <Route path="users" element={<Users/>} />
          <Route path="/logout" element={<Logout />} />
{/* 
          <ErrorBoundary FallbackComponent={ErrorFallback}>
            <Route path="*" element={<RelativeRoutes/>} />
          </ErrorBoundary> */}

          <Route path="*" element={<RelativeRoutes/>} />
          
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}