UAS_WebGIS_JohanesSatriaChristio_D1041231076/src/App.jsx

import {
  BrowserRouter,
  Routes,
  Route,
  Navigate
} from 'react-router-dom'

import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import DataWarga from './pages/DataWarga'
import Verifikasi from './pages/Verifikasi'
import Distribusi from './pages/Distribusi'
import Peta from './pages/Peta'

import { getRole } from './lib/storage.js'

function getDefaultRoute(role) {

  if (role === 'Administrator') {
    return '/dashboard'
  }

  if (role === 'Petugas Data') {
    return '/data-warga'
  }

  if (role === 'Pemerintah') {
    return '/dashboard'
  }

  if (role === 'Masyarakat') {
    return '/peta'
  }

  return '/login'
}

function ProtectedRoute({
  children,
  allowedRoles
}) {

  const token =
    localStorage.getItem('demo_token')

  const role = getRole()

  if (!token) {
    return <Navigate to="/login" />
  }

  if (
    allowedRoles &&
    !allowedRoles.includes(role)
  ) {

    return (
      <Navigate
        to={getDefaultRoute(role)}
        replace
      />
    )
  }

  return children
}

function HomeRedirect() {

  const token =
    localStorage.getItem('demo_token')

  const role = getRole()

  if (!token) {
    return <Navigate to="/login" />
  }

  return (
    <Navigate
      to={getDefaultRoute(role)}
      replace
    />
  )
}

export default function App() {

  return (
    <BrowserRouter>

      <Routes>

        <Route
          path="/"
          element={<HomeRedirect />}
        />

        <Route
          path="/login"
          element={<Login />}
        />

        <Route
          path="/dashboard"
          element={
            <ProtectedRoute
              allowedRoles={[
                'Administrator',
                'Pemerintah'
              ]}
            >
              <Dashboard />
            </ProtectedRoute>
          }
        />

        <Route
          path="/data-warga"
          element={
            <ProtectedRoute
              allowedRoles={[
                'Administrator',
                'Petugas Data'
              ]}
            >
              <DataWarga />
            </ProtectedRoute>
          }
        />

        <Route
          path="/verifikasi"
          element={
            <ProtectedRoute
              allowedRoles={[
                'Administrator'
              ]}
            >
              <Verifikasi />
            </ProtectedRoute>
          }
        />

        <Route
          path="/distribusi"
          element={
            <ProtectedRoute
              allowedRoles={[
                'Administrator',
                'Petugas Data'
              ]}
            >
              <Distribusi />
            </ProtectedRoute>
          }
        />

        <Route
          path="/peta"
          element={
            <ProtectedRoute
              allowedRoles={[
                'Administrator',
                'Petugas Data',
                'Pemerintah',
                'Masyarakat'
              ]}
            >
              <Peta />
            </ProtectedRoute>
          }
        />

        <Route
          path="*"
          element={<HomeRedirect />}
        />

      </Routes>

    </BrowserRouter>
  )
}