src/App.js Güncelle

src/App.js

@@ -1,53 +1,50 @@
 import React, { useState } from 'react';
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Navigate, Outlet } from 'react-router-dom';
-import LoginPage from './pages/LoginPage'; // Login sayfası
+import LoginPage from './pages/LoginPage';
-import Navbar from './components/Navbar';  // Navbar bileşeni
+import Navbar from './components/Navbar';
-import Sidebar from './components/Sidebar'; // Sidebar bileşeni
+import Sidebar from './components/Sidebar';
-import AdminRoutes from './roles/AdminRoutes';  // Admin route bileşenleri
+import AdminRoutes from './roles/AdminRoutes';
-import DistributorRoutes from './roles/DistributorRoutes';  // Distributor route bileşenleri
+import DistributorRoutes from './roles/DistributorRoutes';
-import RetailerRoutes from './roles/RetailerRoutes';  // Retailer route bileşenleri
+import RetailerRoutes from './roles/RetailerRoutes';
-import CustomerRoutes from './roles/CustomerRoutes';  // Customer route bileşenleri
+import CustomerRoutes from './roles/CustomerRoutes';
 
-function App() {
+const ProtectedLayout = ({ user, onLogout }) => (
-  const [user, setUser] = useState(null);  // Kullanıcı verisini tutan durum
-
-  const handleLogin = (userData) => {
-    setUser(userData);  // Giriş yapan kullanıcının verilerini ayarlıyoruz
-  };
-
-  const handleLogout = () => {
-    setUser(null);  // Kullanıcı çıkışı yaparsa, veriyi sıfırlıyoruz
-  };
-
-  return (
-    <Router>
-      {/* Eğer kullanıcı giriş yapmamışsa, giriş sayfası gösterilsin */}
-      {!user ? (
-        <LoginPage onLogin={handleLogin} />
-      ) : (
   <div className="flex h-screen bg-gray-100">
-          {/* Sidebar, kullanıcı rolüne göre gösterilecek */}
+    <Sidebar user={user} onLogout={onLogout} />
-          <Sidebar user={user} onLogout={handleLogout} />
     <div className="flex-1 flex flex-col overflow-hidden">
-            {/* Navbar, kullanıcı bilgisi ve çıkış fonksiyonu ile birlikte */}
+      <Navbar user={user} onLogout={onLogout} />
-            <Navbar user={user} onLogout={handleLogout} />
       <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200 p-4">
-              {/* Kullanıcının rolüne göre yönlendirmeler */}
+        <Outlet />
-              <Routes>
-                {user.role === 'admin' && <Route path="/*" element={<AdminRoutes />} />}
-                {user.role === 'distributor' && <Route path="/*" element={<DistributorRoutes />} />}
-                {user.role === 'retailer' && <Route path="/*" element={<RetailerRoutes />} />}
-                {user.role === 'customer' && <Route path="/*" element={<CustomerRoutes />} />}
-                
-                {/* Tanımlanmayan yollar için yönlendirme */}
-                <Route path="*" element={<Navigate to="/" />} />
-              </Routes>
       </main>
     </div>
   </div>
+);
+
+const App = () => {
+  const [user, setUser] = useState(null);
+
+  const handleLogin = (userData) => setUser(userData);
+  const handleLogout = () => setUser(null);
+
+  return (
+    <Router>
+      <Routes>
+        <Route path="/login" element={!user ? <LoginPage onLogin={handleLogin} /> : <Navigate to="/" />} />
+        
+        {user && (
+          <Route element={<ProtectedLayout user={user} onLogout={handleLogout} />}>
+            <Route path="/admin/*" element={user.role === 'admin' ? <AdminRoutes /> : <Navigate to="/" />} />
+            <Route path="/distributor/*" element={user.role === 'distributor' ? <DistributorRoutes /> : <Navigate to="/" />} />
+            <Route path="/retailer/*" element={user.role === 'retailer' ? <RetailerRoutes /> : <Navigate to="/" />} />
+            <Route path="/customer/*" element={user.role === 'customer' ? <CustomerRoutes /> : <Navigate to="/" />} />
+            <Route path="/" element={<Navigate to={`/${user.role}`} />} />
+          </Route>
         )}
+        
+        <Route path="*" element={<Navigate to={user ? "/" : "/login"} />} />
+      </Routes>
     </Router>
   );
-}
+};
 
 export default App;