126 lines
3.8 KiB
TypeScript
126 lines
3.8 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 ResetPassword from '../pages/auth/ResetPassword';
|
|
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: '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: 'members',
|
|
element: <Members />,
|
|
},
|
|
]
|
|
},
|
|
// {
|
|
// path: '/dashboard',
|
|
// element: <DashboardLayout />,
|
|
// children: [
|
|
// { element: <Navigate to="/dashboard/one" replace />, index: true },
|
|
// { path: 'one', element:
|
|
// <AuthProvider><PageOne /></AuthProvider> },
|
|
// { path: 'two', element:
|
|
// <AuthProvider><PageTwo /></AuthProvider> },
|
|
// { path: 'three', element:
|
|
// <AuthProvider><PageThree /></AuthProvider> },
|
|
// {
|
|
// path: 'user',
|
|
// children: [
|
|
// { element: <Navigate to="/dashboard/user/four" replace />, index: true },
|
|
// { path: 'four', element: <AuthProvider><PageFour /></AuthProvider> },
|
|
// { path: 'six', element: <AuthProvider><PageSix /> </AuthProvider> },
|
|
// ],
|
|
// },
|
|
// ],
|
|
// },
|
|
{
|
|
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')));
|
|
|
|
// Dashboard
|
|
const Dashboard = Loadable(lazy(() => import('../pages/Dashboard')));
|
|
const NotFound = Loadable(lazy(() => import('../pages/Page404')));
|
|
|
|
// Members
|
|
const Members = Loadable(lazy(() => import('../pages/Members/Index')));
|
|
const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
|