modified: src/App.tsx

deleted:    src/i18n.ts
modified:   src/main.tsx
This commit is contained in:
Dosseh91
2025-06-23 22:22:50 +02:00
committed by null
parent a22776dd9f
commit 942621a7c3
3 changed files with 41 additions and 11 deletions

View File

@@ -33,4 +33,5 @@
"typescript-eslint": "^8.3.0", "typescript-eslint": "^8.3.0",
"vite": "^5.4.2" "vite": "^5.4.2"
} }
} }

View File

@@ -12,7 +12,10 @@ import { AuthProvider, useAuth } from './contexts/AuthContext';
import { ListingProvider } from './contexts/ListingContext'; import { ListingProvider } from './contexts/ListingContext';
import Register from './pages/Register'; import Register from './pages/Register';
// Protected route component /**
* A component to protect routes that require authentication.
* It checks if a user is logged in and has the required role.
*/
const ProtectedRoute: React.FC<{ const ProtectedRoute: React.FC<{
children: React.ReactNode; children: React.ReactNode;
allowedRoles?: string[]; allowedRoles?: string[];
@@ -20,22 +23,29 @@ const ProtectedRoute: React.FC<{
const { user, loading } = useAuth(); const { user, loading } = useAuth();
const location = useLocation(); const location = useLocation();
// Show a loading indicator while checking authentication status
if (loading) { if (loading) {
return <div className="min-h-screen flex items-center justify-center">Loading...</div>; return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
} }
// If the user is not logged in, redirect them to the login page
if (!user) { if (!user) {
return <Navigate to="/login" state={{ from: location }} replace />; return <Navigate to="/login" state={{ from: location }} replace />;
} }
// If the route requires specific roles and the user doesn't have one, redirect to home
if (allowedRoles && !allowedRoles.includes(user.role)) { if (allowedRoles && !allowedRoles.includes(user.role)) {
return <Navigate to="/" replace />; return <Navigate to="/" replace />;
} }
// If the user is authenticated and has the correct role, show the content
return <>{children}</>; return <>{children}</>;
}; };
// Layout with navbar and footer /**
* A layout component that includes the Navbar and Footer.
* This ensures a consistent look across different pages.
*/
const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => { const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return ( return (
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen">
@@ -46,23 +56,27 @@ const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
); );
}; };
// App component /**
* The main App component that sets up all the application routing.
*/
function App() { function App() {
return ( return (
<AuthProvider> <AuthProvider>
<ListingProvider> <ListingProvider>
<Router> <Router>
<Routes> <Routes>
{/* Public routes */} {/* These routes are public and will have the main layout */}
<Route path="/" element={<MainLayout><Home /></MainLayout>} /> <Route path="/" element={<MainLayout><Home /></MainLayout>} />
<Route path="/listings" element={<MainLayout><Listings /></MainLayout>} /> <Route path="/listings" element={<MainLayout><Listings /></MainLayout>} />
<Route path="/listings/:id" element={<MainLayout><ListingDetail /></MainLayout>} /> <Route path="/listings/:id" element={<MainLayout><ListingDetail /></MainLayout>} />
{/* The Login page does not have the main layout */}
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
{/* ADD THIS LINE - The fix for your button */} {/* The Register page is now wrapped in MainLayout to include the Navbar and Footer */}
<Route path="/register" element={<Register />} /> <Route path="/register" element={<MainLayout><Register /></MainLayout>} />
{/* Protected admin routes */} {/* These routes are protected and can only be accessed by specific user roles */}
<Route <Route
path="/admin/dashboard" path="/admin/dashboard"
element={ element={
@@ -71,8 +85,6 @@ function App() {
</ProtectedRoute> </ProtectedRoute>
} }
/> />
{/* Protected agency routes */}
<Route <Route
path="/agency/dashboard" path="/agency/dashboard"
element={ element={
@@ -82,7 +94,7 @@ function App() {
} }
/> />
{/* Redirect unknown routes to home */} {/* This is a "catch-all" route that redirects any unknown URL to the home page */}
<Route path="*" element={<Navigate to="/" replace />} /> <Route path="*" element={<Navigate to="/" replace />} />
</Routes> </Routes>
</Router> </Router>

View File

@@ -1,5 +1,22 @@
{ {
"files": [], "compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [ "references": [
{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" } { "path": "./tsconfig.node.json" }