65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
|
import { RouterProvider, createBrowserRouter } from "react-router-dom";
|
||
|
|
import { ProtectedRoute } from "./components";
|
||
|
|
import { AuthContextState, useAuth } from "./lib/hooks";
|
||
|
|
import { LoginPage } from "./pages/LoginPage";
|
||
|
|
|
||
|
|
export const Routes = () => {
|
||
|
|
const { isLoggedIn } = useAuth() as AuthContextState;
|
||
|
|
|
||
|
|
// Define public routes accessible to all users
|
||
|
|
const routesForPublic = [
|
||
|
|
{
|
||
|
|
path: "/service",
|
||
|
|
element: <div>Service Page</div>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "/about-us",
|
||
|
|
element: <div>About Us</div>,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// Define routes accessible only to authenticated users
|
||
|
|
const routesForAuthenticatedOnly = [
|
||
|
|
{
|
||
|
|
path: "/admin",
|
||
|
|
element: <ProtectedRoute />, // Wrap the component in ProtectedRoute
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
path: "",
|
||
|
|
element: <div>Dashboard</div>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "profile",
|
||
|
|
element: <div>User Profile</div>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "logout",
|
||
|
|
element: <div>Logout</div>,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// Define routes accessible only to non-authenticated users
|
||
|
|
const routesForNotAuthenticatedOnly = [
|
||
|
|
{
|
||
|
|
path: "/",
|
||
|
|
element: <div>Home Page</div>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "/login",
|
||
|
|
Component: LoginPage,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// Combine and conditionally include routes based on authentication status
|
||
|
|
const router = createBrowserRouter([
|
||
|
|
...routesForPublic,
|
||
|
|
...(!isLoggedIn ? routesForNotAuthenticatedOnly : []),
|
||
|
|
...routesForAuthenticatedOnly,
|
||
|
|
]);
|
||
|
|
|
||
|
|
// Provide the router configuration using RouterProvider
|
||
|
|
return <RouterProvider router={router} />;
|
||
|
|
};
|