|
import React, { useEffect } from 'react'; |
|
import { BrowserRouter as Router, Route, Routes, Navigate, useLocation} from 'react-router-dom'; |
|
import Login from './components/Login'; |
|
import Register from './components/Register'; |
|
import Chat from './components/Chat'; |
|
import Opportunities from './components/Opportunities'; |
|
import { AuthProvider, useAuth } from './services/AuthContext'; |
|
|
|
const PrivateRoute = ({ children }) => { |
|
const { token, loading } = useAuth(); |
|
const location = useLocation(); |
|
|
|
if (loading) { |
|
|
|
return <div className="flex items-center justify-center h-screen">Loading...</div>; |
|
} |
|
|
|
return token ? children : <Navigate to="/login" state={{ from: location }} replace />; |
|
}; |
|
|
|
const PublicRoute = ({ children }) => { |
|
const { token, loading } = useAuth(); |
|
const location = useLocation(); |
|
|
|
if (loading) { |
|
return <div className="flex items-center justify-center h-screen">Loading...</div>; |
|
} |
|
|
|
return !token ? children : <Navigate to={location.state?.from?.pathname || "/"} replace />; |
|
}; |
|
|
|
function AppRoutes() { |
|
const location = useLocation(); |
|
|
|
useEffect(() => { |
|
|
|
console.log('Current route:', location.pathname); |
|
}, [location]); |
|
|
|
return ( |
|
<> |
|
<Routes> |
|
<Route |
|
path="/login" |
|
element={ |
|
<PublicRoute> |
|
<Login /> |
|
</PublicRoute> |
|
} |
|
/> |
|
<Route |
|
path="/register" |
|
element={ |
|
<PublicRoute> |
|
<Register /> |
|
</PublicRoute> |
|
} |
|
/> |
|
<Route |
|
path="/" |
|
element={ |
|
<PrivateRoute> |
|
<Opportunities/> |
|
</PrivateRoute> |
|
} |
|
/> |
|
{/* Catch all route */} |
|
<Route path="*" element={<Navigate to="/" replace />} /> |
|
</Routes> |
|
</> |
|
); |
|
} |
|
|
|
function App() { |
|
return ( |
|
<AuthProvider> |
|
<Router> |
|
<AppRoutes/> |
|
</Router> |
|
</AuthProvider> |
|
); |
|
} |
|
|
|
export default App; |