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 LoginPage from './pages/LoginPage'; // Login sayfası
-import Navbar from './components/Navbar';  // Navbar bileşeni
-import Sidebar from './components/Sidebar'; // Sidebar bileşeni
-import AdminRoutes from './roles/AdminRoutes';  // Admin route bileşenleri
-import DistributorRoutes from './roles/DistributorRoutes';  // Distributor route bileşenleri
-import RetailerRoutes from './roles/RetailerRoutes';  // Retailer route bileşenleri
-import CustomerRoutes from './roles/CustomerRoutes';  // Customer route bileşenleri
+import { BrowserRouter as Router, Route, Routes, Navigate, Outlet } from 'react-router-dom';
+import LoginPage from './pages/LoginPage';
+import Navbar from './components/Navbar';
+import Sidebar from './components/Sidebar';
+import AdminRoutes from './roles/AdminRoutes';
+import DistributorRoutes from './roles/DistributorRoutes';
+import RetailerRoutes from './roles/RetailerRoutes';
+import CustomerRoutes from './roles/CustomerRoutes';
 
-function App() {
-  const [user, setUser] = useState(null);  // Kullanıcı verisini tutan durum
+const ProtectedLayout = ({ user, onLogout }) => (
+  <div className="flex h-screen bg-gray-100">
+    <Sidebar user={user} onLogout={onLogout} />
+    <div className="flex-1 flex flex-col overflow-hidden">
+      <Navbar user={user} onLogout={onLogout} />
+      <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200 p-4">
+        <Outlet />
+      </main>
+    </div>
+  </div>
+);
 
-  const handleLogin = (userData) => {
-    setUser(userData);  // Giriş yapan kullanıcının verilerini ayarlıyoruz
-  };
+const App = () => {
+  const [user, setUser] = useState(null);
 
-  const handleLogout = () => {
-    setUser(null);  // Kullanıcı çıkışı yaparsa, veriyi sıfırlıyoruz
-  };
+  const handleLogin = (userData) => setUser(userData);
+  const handleLogout = () => setUser(null);
 
   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={handleLogout} />
-          <div className="flex-1 flex flex-col overflow-hidden">
-            {/* Navbar, kullanıcı bilgisi ve çıkış fonksiyonu ile birlikte */}
-            <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 */}
-              <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>
-      )}
+      <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;
+export default App;