129 lines
3.6 KiB
TypeScript
129 lines
3.6 KiB
TypeScript
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 { RegisterForm } from '@/sections/auth/register';
|
|
import Register from '@/pages/auth/Register';
|
|
import VerifyCode from '@/pages/auth/VerifyCode';
|
|
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: 'register',
|
|
element: (
|
|
<AuthProvider>
|
|
<GuestGuard>
|
|
<RegisterForm />
|
|
</GuestGuard>
|
|
</AuthProvider>
|
|
),
|
|
},
|
|
// { path: 'login-unprotected', element: <Login /> },
|
|
// { path: 'register-unprotected', element: <Register /> },
|
|
{ path: 'reset-password', element: <ResetPassword /> },
|
|
{ path: 'forget-password', element: <ForgetPassword /> },
|
|
// { path: 'verify', element: <VerifyCode /> },
|
|
],
|
|
},
|
|
// {
|
|
// path: '/',
|
|
// element: <Navigate to="/dashboard/one" replace />,
|
|
// },
|
|
{
|
|
path: '/',
|
|
element: (
|
|
<AuthProvider>
|
|
<AuthGuard>
|
|
<DashboardLayout />
|
|
</AuthGuard>
|
|
</AuthProvider>
|
|
),
|
|
children: [
|
|
{ element: <Navigate to="/dashboard" replace />, index: true },
|
|
{
|
|
path: 'dashboard',
|
|
element: <Dashboard />,
|
|
},
|
|
{
|
|
path: '/detail/:id',
|
|
element: <DetailClaimReport />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '/',
|
|
element: (
|
|
<AuthProvider>
|
|
<AuthGuard>
|
|
<DashboardLayout />
|
|
</AuthGuard>
|
|
</AuthProvider>
|
|
),
|
|
children: [
|
|
{ element: <Navigate to="/claim" replace />, index: true },
|
|
{
|
|
path: 'claim',
|
|
element: <Claim />,
|
|
},
|
|
{
|
|
path: '/detail/:id',
|
|
element: <DetailClaimReport />,
|
|
},
|
|
],
|
|
},
|
|
|
|
{
|
|
path: '*',
|
|
element: <LogoOnlyLayout />,
|
|
children: [
|
|
{ path: '404', element: <NotFound /> },
|
|
{ path: '*', element: <Navigate to="/404" replace /> },
|
|
],
|
|
},
|
|
{ path: '*', element: <Navigate to="/404" replace /> },
|
|
]);
|
|
}
|
|
|
|
const Login = Loadable(lazy(() => import('@/pages/auth/Login')));
|
|
const ResetPassword = Loadable(lazy(() => import('@/pages/auth/ResetPassword')));
|
|
const ForgetPassword = Loadable(lazy(() => import('@/pages/auth/ForgetPassword')));
|
|
|
|
// Dashboard
|
|
const Dashboard = Loadable(lazy(() => import('@/pages/Dashboard')));
|
|
const Claim = Loadable(lazy(() => import('@/pages/Claim')));
|
|
const NotFound = Loadable(lazy(() => import('@/pages/Page404')));
|
|
|
|
const DetailClaimReport = Loadable(lazy(()=> import('@/sections/dashboard/Detail')));
|