Untitled

mail@pastecode.io avatar
unknown
plain_text
a month ago
6.3 kB
2
Indexable
Never
import { lazy, Suspense, useContext } from 'react'
import { Navigate, Outlet, useRoutes } from 'react-router-dom'
import {
  ADMIN_EXAM_ADD,
  ADMIN_EXAM_DETAIL,
  ADMIN_EXAM_EDIT,
  ADMIN_EXAM_LIST,
  ADMIN_EXAM_MANAGE,
  EXAM_LEADERBOARD,
  EXAM_LOG,
  EXAM_USER,
  EXAM_USER_DETAIL,
  EXAM_USER_DETAIL_LIST,
  LOGIN,
  REGISTER
} from './constants/routes'
import Test from './pages/Test'
import Header from './layout/header'
import ExamLayout from './layout/ExamLayout'
import MainLayout from './layout/MainLayout'
import { AppContext } from './contexts/app.context'
const AdminExamManage = lazy(() => import('./pages/admin/ExamDetail/AdminExamManage'))
const AdminExamDetail = lazy(() => import('./pages/admin/ExamDetail'))
const AdminExamEdit = lazy(() => import('./pages/admin/ExamEdit/AdminExamEdit'))
const AdminExamList = lazy(() => import('./pages/admin/ExamList/AdminExamList'))
const ExamUserDetailList = lazy(() => import('./pages/ExamUserDetailList'))
const ExamUserDetail = lazy(() => import('./pages/ExamUserDetail/ExamUserDetail'))
const LeaderBoardPage = lazy(() => import('./pages/LeaderBoard/LeaderBoardPage'))
const Log = lazy(() => import('./pages/Log'))
const Register = lazy(() => import('./pages/Register'))
const ExamUserList = lazy(() => import('./pages/ExamUserList/ExamUserList'))
const Login = lazy(() => import('./pages/Login'))
const NotFound = lazy(() => import('./pages/NotFound'))
export default function useRouteElements() {
  function ProtectedRoute() {
    const { isAuthenticated } = useContext(AppContext)
    return isAuthenticated ? <Outlet /> : <Navigate to='/login' />
  }

  function RejectedRoute() {
    const { isAuthenticated, user } = useContext(AppContext)
    return !isAuthenticated ? (
      <Outlet />
    ) : (
      <Navigate to={user?.role === 'ROLE_USER' ? '/exams/users' : '/admin/b20dccn327/exams'} />
    )
  }

  function AdminRoute() {
    const { user } = useContext(AppContext)
    return user?.role === 'ROLE_ADMIN' ? <Outlet /> : <Navigate to='/not-found' />
  }

  function UserRoute() {
    const { user } = useContext(AppContext)
    return user?.role === 'ROLE_USER' ? <Outlet /> : <Navigate to='/not-found' />
  }
  const routeElements = useRoutes([
    {
      path: '',
      element: <RejectedRoute />,
      children: [
        {
          path: LOGIN,
          element: (
            <Suspense>
              <Login />
            </Suspense>
          )
        },
        {
          path: REGISTER,
          element: (
            <Suspense>
              <Register />
            </Suspense>
          )
        }
      ]
    },
    {
      path: '',
      element: <ProtectedRoute />,
      children: [
        {
          path: '',
          element: <UserRoute />,
          children: [
            {
              path: '/test',
              element: (
                <Suspense>
                  <Test />
                </Suspense>
              )
            },
            {
              path: EXAM_USER,
              element: (
                <Suspense>
                  <Header />
                  <ExamUserList />
                </Suspense>
              )
            },
            {
              path: EXAM_LOG,
              element: (
                <Suspense>
                  <Header />
                  <ExamLayout>
                    <Log />
                  </ExamLayout>
                </Suspense>
              )
            },
            {
              path: EXAM_USER_DETAIL_LIST,
              element: (
                <Suspense>
                  <Header />
                  <ExamLayout>
                    <ExamUserDetailList />
                  </ExamLayout>
                </Suspense>
              )
            },
            {
              path: EXAM_USER_DETAIL,
              element: (
                <Suspense>
                  <Header />
                  <ExamLayout>
                    <ExamUserDetail />
                  </ExamLayout>
                </Suspense>
              )
            },
            {
              path: EXAM_LEADERBOARD,
              element: (
                <Suspense>
                  <Header />
                  <ExamLayout>
                    <LeaderBoardPage />
                  </ExamLayout>
                </Suspense>
              )
            }
          ]
        },
        {
          path: '',
          element: <AdminRoute />,
          children: [
            {
              path: ADMIN_EXAM_LIST,
              element: (
                <Suspense>
                  <Header />
                  <MainLayout>
                    <AdminExamList />
                  </MainLayout>
                </Suspense>
              )
            },
            {
              path: ADMIN_EXAM_EDIT,
              element: (
                <Suspense>
                  <Header />
                  <MainLayout>
                    <AdminExamEdit />
                  </MainLayout>
                </Suspense>
              )
            },
            {
              path: ADMIN_EXAM_ADD,
              element: (
                <Suspense>
                  <Header />
                  <MainLayout>
                    <AdminExamEdit />
                  </MainLayout>
                </Suspense>
              )
            },
            {
              path: ADMIN_EXAM_DETAIL,
              element: (
                <Suspense>
                  <Header />
                  <MainLayout>
                    <AdminExamDetail />
                  </MainLayout>
                </Suspense>
              )
            },
            {
              path: ADMIN_EXAM_MANAGE,
              element: (
                <Suspense>
                  <Header />
                  <MainLayout>
                    <AdminExamManage />
                  </MainLayout>
                </Suspense>
              )
            }
          ]
        }
      ]
    },
    {
      path: '/not-found',
      element: (
        <Suspense>
          <NotFound />
        </Suspense>
      )
    }
  ])
  return routeElements
}
Leave a Comment