115 lines
No EOL
3.1 KiB
TypeScript
115 lines
No EOL
3.1 KiB
TypeScript
import { 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 SideNavigator from "./SideNavigator";
|
|
import Users from "pages/Users";
|
|
import { useMobile } from "hooks";
|
|
import BottomNavigator from "./BottomNavigator";
|
|
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";
|
|
|
|
interface Props {
|
|
open: boolean,
|
|
onOpen: () => void;
|
|
onClose: () => void;
|
|
toggleTheme: () => void;
|
|
}
|
|
|
|
export default function Router(props: Props) {
|
|
|
|
const {open, onOpen, onClose, toggleTheme } = props;
|
|
const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
|
|
const isMobile = useMobile();
|
|
|
|
const RelativeRoutes = () => {
|
|
console.log("relative route")
|
|
return (
|
|
<Routes>
|
|
<Route path="teams/*" element={<TeamsRoute/>} />
|
|
<Route path="devices/*" element={<DevicesRoute/>} />
|
|
</Routes>
|
|
)
|
|
}
|
|
|
|
const TeamsRoute = () => {
|
|
console.log("teams route")
|
|
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 = () => {
|
|
console.log("devices route")
|
|
return (
|
|
<div>
|
|
<Routes>
|
|
<Route
|
|
path="" // "/settings/basic"
|
|
element={<Devices />}
|
|
/>
|
|
<Route
|
|
path="/:deviceID" // "/settings/basic"
|
|
element={<DevicePage />}
|
|
/>
|
|
</Routes>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
if (isLoading) return null;
|
|
if (!isAuthenticated) {
|
|
loginWithRedirect()
|
|
return (
|
|
null
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Suspense fallback={<LoadingScreen />}>
|
|
<BrowserRouter>
|
|
<Header
|
|
sideIsOpen={open}
|
|
openSide={onOpen}
|
|
toggleTheme={toggleTheme}
|
|
// teams={teams}
|
|
// setTeams={setTeams}
|
|
/>
|
|
<SideNavigator open={open} onOpen={onOpen} onClose={onClose} />
|
|
<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 />} />
|
|
<Route path="*" element={<RelativeRoutes/>} />
|
|
|
|
</Routes>
|
|
{isMobile && <BottomNavigator openSide={onOpen} sideIsOpen={open} />}
|
|
</BrowserRouter>
|
|
</Suspense>
|
|
)
|
|
} |