Files
Travel-policy-/frontend/src/App.jsx

91 lines
3.1 KiB
JavaScript

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import React, { Suspense } from "react";
import { ThemeProvider } from "./context/ThemeContext";
import "./App.css";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// Lazy loading the pages and components
const Login = React.lazy(() => import("./pages/Login/Login"));
const Root = React.lazy(() => import("./components/DashboardRoot/Root"));
const Dashboard = React.lazy(() => import("./pages/Dashboard/Dashboard"));
const Form = React.lazy(() => import("./pages/ApplicationForm/Form"));
const About = React.lazy(() => import("./pages/About/About"));
const Policy = React.lazy(() => import("./pages/Policy/Policy"));
const Applications = React.lazy(() => import("./pages/Applications/Applications"));
const Report = React.lazy(() => import("./pages/Report/Report"));
const LoginRoot = React.lazy(() => import("./components/LoginRoot/LoginRoot"));
const ContactUs = React.lazy(() => import("./pages/ContactUs/ContactUs"));
const ApplicationView = React.lazy(() =>
import("./pages/ApplicationView/ApplicationView")
);
const Settings = React.lazy(() => import("./pages/Settings/Settings"));
import userDataLoader from "./services/userDataLoader";
import { upsertApplicationAction } from "./services/upsertApplicationAction";
import { applicationStatusAction } from "./services/applicationStatusAction";
import Loading from "./components/Loading";
// Define the router with lazy-loaded components
const router = createBrowserRouter([
{
path: "/",
element: <LoginRoot />,
children: [
{ index: true, element: <Login /> },
{ path: "about", element: <About /> },
{ path: "policy", element: <Policy /> },
],
},
{
path: "/applicant",
element: <Root />,
id: "Applicant-Root",
loader: userDataLoader,
children: [
{ path: "dashboard", element: <Dashboard /> },
{ path: "dashboard/:status", element: <Applications /> },
{
path: "dashboard/:status/:applicationId",
element: <ApplicationView />,
action: upsertApplicationAction,
},
{ path: "form", element: <Form />, action: upsertApplicationAction },
{ path: "contact-us", element: <ContactUs /> },
{ path: "settings", element: <Settings /> },
{ path: "policy", element: <Policy /> },
],
},
{
path: "/validator",
element: <Root />,
id: "Validator-Root",
loader: userDataLoader,
children: [
{ path: "dashboard", element: <Dashboard /> },
{ path: "dashboard/:status", element: <Applications /> },
{
path: "dashboard/:status/:applicationId",
element: <ApplicationView />,
action: applicationStatusAction,
},
{ path: "report", element: <Report /> },
{ path: "settings", element: <Settings /> },
{ path: "policy", element: <Policy /> },
],
},
]);
function App() {
return (
<ThemeProvider>
<ToastContainer position="top-center" />
<Suspense fallback={<Loading/>}>
<RouterProvider router={router} />
</Suspense>
</ThemeProvider>
);
}
export default App;