Files
aso/frontend/client-portal/src/routes/index.tsx
2022-11-17 11:09:31 +07:00

117 lines
3.1 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: 'verify-code',
element: (
<AuthProvider>
<GuestGuard>
<VerifyCode />
</GuestGuard>
</AuthProvider>
),
},
// { path: 'login-unprotected', element: <Login /> },
// { path: 'register-unprotected', element: <Register /> },
// { path: 'reset-password', element: <ResetPassword /> },
],
},
{
path: '/',
element: (
<AuthProvider>
<AuthGuard>
<DashboardLayout />
</AuthGuard>
</AuthProvider>
),
children: [
{ element: <Navigate to="/dashboard" replace />, index: true },
{
path: 'dashboard',
element: <Dashboard />,
},
],
},
{
path: '/alarm-center',
element: (
<AuthProvider>
<AuthGuard>
<DashboardLayout />
</AuthGuard>
</AuthProvider>
),
children: [
{
element: <AlarmCenter />,
index: true,
},
{
path: 'service-monitoring/:id',
element: <AlarmCenterServiceMonitoring />,
},
],
},
{
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')));
const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
// 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'))
);