RaidBuilder/RaidBuilderWeb
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update routing and add error boundary

Browse Source
This commit is contained in:
Mattrixwv
2025-02-25 22:50:05 -05:00
parent bc7ffcd5bf
commit 29724da42f
3 changed files with 129 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/App.tsx
View File

@@ -1,4 +1,4 @@
import { BrowserRouter, Route, Routes } from "react-router";
import { createBrowserRouter, RouterProvider } from "react-router";
import NavBar from "./components/nav/NavBar";
import AdminPage from "./pages/protected/AdminPage";
import GamePage from "./pages/protected/GamePage";
@@ -13,98 +13,82 @@ import HomePage from "./pages/public/HomePage";
import LoginPage from "./pages/public/LoginPage";
import SignupPage from "./pages/public/SignupPage";
import { ProtectedRoute } from "./providers/AuthProvider";
import ErrorBoundary from "./providers/ErrorBoundary";
const publicRoutes: { path: string; element: React.ReactElement; }[] = [
const routes = createBrowserRouter([
{
path: "/",
element: <HomePage/>
},
{
path: "/login",
element: <LoginPage/>
},
{
path: "/signup",
element: <SignupPage/>
element: <NavBar/>,
children: [
{
errorElement: <ErrorBoundary/>,
children: [
{
path: "/",
element: <HomePage/>
},
{
path: "/login",
element: <LoginPage/>
},
{
path: "/signup",
element: <SignupPage/>
},
{
element: <ProtectedRoute/>,
children: [
{
path: "/logout",
element: <LogoutPage/>
},
{
path: "/admin",
element: <AdminPage/>
},
{
path: "/game",
element: <GamesPage/>
},
{
path: "/game/:gameId",
element: <GamePage/>
},
{
path: "/raidGroup",
element: <RaidGroupsPage/>
},
{
path: "/raidGroup/:raidGroupId",
element: <RaidGroupPage/>
},
{
path: "/raidGroup/:raidGroupId/person/:personId",
element: <PersonPage/>
},
{
path: "/raidGroup/:raidGroupId/raidLayout/:raidLayoutId",
element: <RaidLayoutPage/>
},
{
path: "/raidGroup/:raidGroupId/raidInstance",
element: <RaidInstancePage/>
},
{
path: "/raidGroup/:raidGroupId/raidInstance/:raidInstanceId",
element: <RaidInstancePage/>
}
]
}
]
}
]
}
];
const protectedRoutes: { path: string; element: React.ReactElement; }[] = [
{
path: "/logout",
element: <LogoutPage/>
},
{
path: "/admin",
element: <AdminPage/>
},
{
path: "/game",
element: <GamesPage/>
},
{
path: "/game/:gameId",
element: <GamePage/>
},
{
path: "/raidGroup",
element: <RaidGroupsPage/>
},
{
path: "/raidGroup/:raidGroupId",
element: <RaidGroupPage/>
},
{
path: "/raidGroup/:raidGroupId/person/:personId",
element: <PersonPage/>
},
{
path: "/raidGroup/:raidGroupId/raidLayout/:raidLayoutId",
element: <RaidLayoutPage/>
},
{
path: "/raidGroup/:raidGroupId/raidInstance",
element: <RaidInstancePage/>
},
{
path: "/raidGroup/:raidGroupId/raidInstance/:raidInstanceId",
element: <RaidInstancePage/>
}
];
]);
export default function App(){
return (
<BrowserRouter>
{/* Nav Bar */}
<NavBar/>
{/* Routing */}
<Routes>
{/* Public Routes */}
{
publicRoutes.map((route) => (
<Route
key={route.path}
path={route.path}
element={route.element}
/>
))
}
{/* Protected Routes */}
<Route element={<ProtectedRoute/>}>
{
protectedRoutes.map((route) => (
<Route
key={route.path}
path={route.path}
element={route.element}
/>
))
}
</Route>
</Routes>
</BrowserRouter>
<RouterProvider router={routes}/>
);
}

83
src/components/nav/NavBar.tsx
View File

@@ -1,6 +1,6 @@
import clsx from "clsx";
import { BsList } from "react-icons/bs";
import { Link } from "react-router";
import { Link, Outlet } from "react-router";
import DarkModeToggle from "./DarkModeToggle";
import ProtectedNavLinks from "./ProtectedNavLinks";
import PublicNavLinks from "./PublicNavLinks";
@@ -9,48 +9,51 @@ import raidBuilderIcon from "/raidBuilderIcon.svg";
export default function NavBar(){
return (
<nav
className={clsx(
"border-b-2 z-40",
"bg-gray-700 border-gray-600 dark:bg-zinc-900 dark:border-neutral-850 text-white"
)}
>
<div
className="navContents"
<>
<nav
className={clsx(
"border-b-2 z-40",
"bg-gray-700 border-gray-600 dark:bg-zinc-900 dark:border-neutral-850 text-white"
)}
>
<Link
to="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
<div
className="navContents"
>
<img
src={raidBuilderIcon}
alt="Raid Builder Logo"
width={30}
height={30}
fetchPriority="high"
/>
<span
className="self-center text-2xl font-semibold whitespace-nowrap"
<Link
to="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
Raid Builder
</span>
</Link>
<div
className="peer md:hidden text-3xl"
>
<BsList/>
<img
src={raidBuilderIcon}
alt="Raid Builder Logo"
width={30}
height={30}
fetchPriority="high"
/>
<span
className="self-center text-2xl font-semibold whitespace-nowrap"
>
Raid Builder
</span>
</Link>
<div
className="peer md:hidden text-3xl"
>
<BsList/>
</div>
<div
className={clsx(
"relative top-0 left-0 flex flex-row items-center rounded-lg space-x-4",
"bg-gray-700 dark:bg-zinc-900"
)}
>
<PublicNavLinks/>
<ProtectedNavLinks/>
<DarkModeToggle/>
</div>
</div>
<div
className={clsx(
"relative top-0 left-0 flex flex-row items-center rounded-lg space-x-4",
"bg-gray-700 dark:bg-zinc-900"
)}
>
<PublicNavLinks/>
<ProtectedNavLinks/>
<DarkModeToggle/>
</div>
</div>
</nav>
</nav>
<Outlet/>
</>
);
}

16
src/providers/ErrorBoundary.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { useRouteError } from "react-router";
export default function ErrorBoundary(){
const error = useRouteError();
console.log("error");
console.log(error);
return (
<div>
Error Boundary
</div>
);
}