139 lines
3.4 KiB
TypeScript
Executable File
139 lines
3.4 KiB
TypeScript
Executable File
import { Suspense, lazy, ElementType } from 'react';
|
|
import { Navigate, useRoutes, useLocation } from 'react-router-dom';
|
|
// layouts
|
|
import DashboardLayout from '../layouts/dashboard';
|
|
import LogoOnlyLayout from '../layouts/LogoOnlyLayout';
|
|
// components
|
|
import LoadingScreen from '../components/LoadingScreen';
|
|
import GuestGuard from '../guards/GuestGuard';
|
|
import { AuthProvider } from '../contexts/LaravelAuthContext';
|
|
import AuthGuard from '../guards/AuthGuard';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const Loadable = (Component: ElementType) => (props: any) => {
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
const { pathname } = useLocation();
|
|
|
|
return (
|
|
<Suspense fallback={<LoadingScreen isDashboard={pathname.includes('/dashboard')} />}>
|
|
<Component {...props} />
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export default function Router() {
|
|
return useRoutes([
|
|
{
|
|
path: 'auth',
|
|
children: [
|
|
{
|
|
path: 'login',
|
|
element: (
|
|
<AuthProvider>
|
|
<GuestGuard>
|
|
<Login />
|
|
</GuestGuard>
|
|
</AuthProvider>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '/',
|
|
element: (
|
|
<AuthProvider>
|
|
<AuthGuard>
|
|
<DashboardLayout />
|
|
</AuthGuard>
|
|
</AuthProvider>
|
|
),
|
|
children: [
|
|
{ element: <Navigate to="/dashboard" replace />, index: true },
|
|
{
|
|
path: 'dashboard',
|
|
element: <Dashboard />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: 'user-profile/:id',
|
|
element: (
|
|
<AuthProvider>
|
|
<AuthGuard>
|
|
<DashboardLayout />
|
|
</AuthGuard>
|
|
</AuthProvider>
|
|
),
|
|
children: [
|
|
{
|
|
element: <AlarmCenterUserProfile />,
|
|
index: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '/alarm-center',
|
|
element: (
|
|
<AuthProvider>
|
|
<AuthGuard>
|
|
<DashboardLayout />
|
|
</AuthGuard>
|
|
</AuthProvider>
|
|
),
|
|
children: [
|
|
{
|
|
element: <AlarmCenter />,
|
|
index: true,
|
|
},
|
|
{
|
|
path: 'service-monitoring/:id',
|
|
element: <AlarmCenterServiceMonitoring />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '/claim-report',
|
|
element: (
|
|
<AuthProvider>
|
|
<AuthGuard>
|
|
<DashboardLayout />
|
|
</AuthGuard>
|
|
</AuthProvider>
|
|
),
|
|
children: [
|
|
{
|
|
element: <ClaimReport />,
|
|
index: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '*',
|
|
element: <LogoOnlyLayout />,
|
|
children: [
|
|
{ path: '404', element: <NotFound /> },
|
|
{ path: '*', element: <Navigate to="/404" replace /> },
|
|
],
|
|
},
|
|
{ path: '*', element: <Navigate to="/404" replace /> },
|
|
]);
|
|
}
|
|
|
|
// Auth
|
|
const Login = Loadable(lazy(() => import('../pages/auth/Login')));
|
|
|
|
// Dashboard
|
|
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
|
|
const NotFound = Loadable(lazy(() => import('../pages/Page404')));
|
|
|
|
// Alarm Center
|
|
const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
|
|
const AlarmCenterServiceMonitoring = Loadable(
|
|
lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
|
|
);
|
|
const AlarmCenterUserProfile = Loadable(lazy(() => import('../pages/AlarmCenter/UserProfile')));
|
|
|
|
// Claim Report
|
|
const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));
|