bulk-email/src/router.tsx

100 lines
2.2 KiB
TypeScript

import {
Routes as BaseRoutes,
Navigate,
Route,
RouteProps,
} from "react-router-dom";
import React, { Suspense } from "react";
import { useSelector } from "react-redux";
import { RootState } from "./redux/store/store";
import LoadingComponent from "./components/Loading";
import DashboardLayout from "./layouts/DashboardLayout";
// Page imports
import Login from "./pages/Auth/Login";
import SignUp from "./pages/Auth/SignUp";
import Dashboard from "./pages/Dashboard";
import Vehicles from "./pages/Vehicles";
import AdminList from "./pages/AdminList";
import ProfilePage from "./pages/ProfilePage";
interface ProtectedRouteProps {
caps: string[];
component: React.ReactNode;
}
// Protected Route Component
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ caps, component }) => {
if (!localStorage.getItem("authToken")) {
return <Navigate to="/auth/login" replace />;
}
return <>{component}</>;
};
// Combined Router Component
export default function AppRouter() {
return (
<Suspense fallback={<LoadingComponent />}>
<BaseRoutes>
{/* Default Route */}
<Route element={<Navigate to="/auth/login" replace />} index />
{/* Auth Routes */}
<Route path="/auth">
<Route
path=""
element={<Navigate to="/auth/login" replace />}
index
/>
<Route path="login" element={<Login />} />
<Route path="signup" element={<SignUp />} />
</Route>
{/* Dashboard Routes */}
<Route path="/panel" element={<DashboardLayout />}>
<Route
path="dashboard"
element={
<ProtectedRoute
caps={[]}
component={<Dashboard />}
/>
}
/>
<Route
path="vehicles"
element={
<ProtectedRoute
caps={[]}
component={<Vehicles />}
/>
}
/>
<Route
path="admin-list"
element={
<ProtectedRoute
caps={[]}
component={<AdminList />}
/>
}
/>
<Route
path="profile"
element={
<ProtectedRoute
caps={[]}
component={<ProfilePage />}
/>
}
/>
</Route>
{/* Catch-all Route */}
<Route path="*" element={<>404</>} />
</BaseRoutes>
</Suspense>
);
}