80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
|
import { AuthProvider, useAuth } from './context/AuthContext';
|
|
import Dashboard from './pages/Dashboard';
|
|
import Login from './pages/Login';
|
|
import Register from './pages/Register';
|
|
import './App.css';
|
|
|
|
// Protected Route component
|
|
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { user, loading } = useAuth();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="loading-container">
|
|
<div className="loading-spinner"></div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return user ? <>{children}</> : <Navigate to="/login" />;
|
|
};
|
|
|
|
// Public Route component (redirect to dashboard if already logged in)
|
|
const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const { user, loading } = useAuth();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="loading-container">
|
|
<div className="loading-spinner"></div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return user ? <Navigate to="/" /> : <>{children}</>;
|
|
};
|
|
|
|
function App() {
|
|
return (
|
|
<AuthProvider>
|
|
<Router>
|
|
<div className="App">
|
|
<Routes>
|
|
<Route
|
|
path="/"
|
|
element={
|
|
<ProtectedRoute>
|
|
<Dashboard />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/login"
|
|
element={
|
|
<PublicRoute>
|
|
<Login />
|
|
</PublicRoute>
|
|
}
|
|
/>
|
|
<Route
|
|
path="/register"
|
|
element={
|
|
<PublicRoute>
|
|
<Register />
|
|
</PublicRoute>
|
|
}
|
|
/>
|
|
<Route path="*" element={<Navigate to="/" />} />
|
|
</Routes>
|
|
</div>
|
|
</Router>
|
|
</AuthProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|