App.js

import "./App.css";
import React, { useContext } from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";

import { UserProvider, UserContext } from "./util/UserContext";

import Home from "./components/Home";
import Login from "./components/Login";
import PracticeHome from "./components/APITest/PracticeHome";

// Custom Protected Route component that checks if the user is authenticated
const ProtectedRoute = ({ children }) => {
  const { user } = useContext(UserContext);

  console.log("ProtectedRoute - isAuthenticated:", user.isAuthenticated);
  console.log("ProtectedRoute - permission:", user.permission);

  return user.permission === "admin" ? children : <Navigate to="/login" />;
};

function App() {
  return (
    <UserProvider>
      <Router>
        <div className="App">
          <Routes>
            {/* Protected Home route, accessible only if authenticated */}
            <Route
              path="/"
              element={
                <ProtectedRoute>
                  <Home />
                </ProtectedRoute>
              }
            />
            <Route
              path="/practice"
              element={
                <ProtectedRoute>
                  <PracticeHome />
                </ProtectedRoute>
              }
            />
            {/* Login route */}
            <Route path="/login" element={<Login />} />
          </Routes>
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;