AI Review: src/App.jsx

[euzghe]

Merhaba, bir Senior Full-Stack Developer olarak kodunu inceledim. Kodun temel mantığı (Role-Based Access Control - RBAC) doğru kurulmuş ancak kurumsal seviyede bir projede performans, güvenlik ve sürdürülebilirlik açısından ciddi eksikler barındırıyor.

İşte analizim ve modern standartlara göre iyileştirme önerilerim:

1. Kritik Hatalar ve Mimari Kusurlar

• Bileşen İçinde Bileşen Tanımlama (En Büyük Hata): ProtectedRoute bileşeni AppContent fonksiyonunun içinde tanımlanmış. React'te bir bileşeni başka bir bileşenin içinde tanımlarsanız, üst bileşen her render olduğunda içteki bileşen unmount edilip tekrar remount edilir. Bu, tüm state'lerin kaybolmasına ve ciddi performans kayıplarına yol açar.
• Prop Drilling: user, setUser ve handleLogout sürekli alt bileşenlere prop olarak geçiliyor. Uygulama büyüdüğünde bu durum yönetilemez hale gelir. React Context API veya Redux/Zustand kullanılmalıdır.
• Token Doğrulama Eksikliği: useEffect içinde sadece localStorage kontrolü yapıyorsun. Token'ın süresi (expiry) dolmuş olabilir. Sadece varlığını kontrol etmek yetmez, bir "me" veya "validate" endpoint'ine istek atılarak token'ın hala geçerli olduğu doğrulanmalıdır.
• Inline Styling: Hata mesajları (403, 404) kodun içine gömülmüş (inline style). Bunlar ayrı bileşenler olmalı ve tasarım sistemi (Tailwind, CSS Modules vb.) ile yönetilmelidir.

2. Temiz Kod (Clean Code) ve Modern Standartlar

• Lazy Loading Eksikliği: Tüm sayfalar (Admin, Doctor, Patient) en başta import ediliyor. Bu, ana paket boyutunu (bundle size) şişirir. React.lazy ve Suspense kullanılmalıdır.
• Navigate Yanlış Kullanımı: handleLoginSuccess içinde switch-case ile manuel yönlendirme yapmak yerine, kullanıcının gitmek istediği "denenmiş URL" (location state) tutulmalı ve login sonrası oraya yönlendirilmelidir.
• Service Layer Soyutlaması: localStorage.removeItem gibi işlemler doğrudan App.js içinde değil, bir authService.js içinde soyutlanmalıdır.

---

3. Senior Gözüyle Refactor Edilmiş Kod

Aşağıda, bu hataların giderildiği, Context API ve Lazy Loading kullanılan profesyonel yapıyı bulabilirsin:

Adım 1: AuthContext Oluşturma (Öneri)

(Bu yapı prop drilling'i engeller)

Adım 2: Gelişmiş App.jsx

import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo } from "react";
import { Routes, Route, Navigate, useNavigate, useLocation } from "react-router-dom";
import { initializeAuthToken, setAuthToken } from "./services/api";

// Lazi Loading (Performans İyileştirmesi)
const LoginPage = lazy(() => import("./pages/LoginPage"));
const RegisterPage = lazy(() => import("./pages/RegisterPage"));
const AdminPage = lazy(() => import("./pages/AdminPage"));
const DoctorPage = lazy(() => import("./pages/DoctorPage"));
const PatientPage = lazy(() => import("./pages/PatientPage"));
const DoctorPerformancePage = lazy(() => import("./pages/admin/DoctorPerformancePage"));

// 1. Bağımsız ProtectedRoute Bileşeni (Render Performance Optimization)
const ProtectedRoute = ({ user, allowedRoles, children }) => {
    const location = useLocation();

    if (!user) {
        // Kullanıcı giriş yapmamışsa, geldiği sayfayı kaydederek login'e gönder
        return <Navigate to="/login" state={{ from: location }} replace />;
    }

    if (!allowedRoles.includes(user.role)) {
        return <Navigate to="/unauthorized" replace />;
    }

    return children;
};

function App() {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const navigate = useNavigate();

    // 2. Logout Fonksiyonunu Memorize Etme (Performance)
    const handleLogout = useCallback(() => {
        setUser(null);
        setAuthToken(null);
        localStorage.clear(); // Hepsini temizle veya spesifik anahtarları sil
        navigate("/login");
    }, [navigate]);

    useEffect(() => {
        const initAuth = async () => {
            try {
                const tokenExists = initializeAuthToken();
                if (tokenExists) {
                    const role = localStorage.getItem("userRole");
                    const id = localStorage.getItem("userId");
                    const username = localStorage.getItem("username");

                    if (role && id && username) {
                        setUser({ id, role, username });
                        // Senior Notu: Burada backend'e bir 'verify-token' isteği atılmalı.
                    }
                }
            } catch (error) {
                handleLogout();
            } finally {
                setLoading(false);
            }
        };
        initAuth();
    }, [handleLogout]);

    const handleLoginSuccess = (userData) => {
        setUser(userData);
        // Role göre dinamik yönlendirme
        const roleRedirects = {
            admin: "/admin",
            doctor: "/doctor",
            patient: "/patient"
        };
        navigate(roleRedirects[userData.role] || "/login");
    };

    if (loading) return <div className="loader">Yükleniyor...</div>;

    return (
        // 3. Suspense ile Lazy Loading Yönetimi
        <Suspense fallback={<div>Sayfa Yükleniyor...</div>}>
            <Routes>
                {/* Public Routes */}
                <Route path="/" element={<Navigate to="/login" replace />} />
                <Route path="/login" element={<LoginPage onLogin={handleLoginSuccess} />} />
                <Route path="/register" element={<RegisterPage />} />

                {/* Admin Routes */}
                <Route path="/admin" element={
                    <ProtectedRoute user={user} allowedRoles={["admin"]}>
                        <AdminPage onLogout={handleLogout} />
                    </ProtectedRoute>
                } />
                <Route path="/admin/performanslar" element={
                    <ProtectedRoute user={user} allowedRoles={["admin"]}>
                        <DoctorPerformancePage onLogout={handleLogout} />
                    </ProtectedRoute>
                } />

                {/* Doctor Routes */}
                <Route path="/doctor" element={
                    <ProtectedRoute user={user} allowedRoles={["doctor", "admin"]}>
                        <DoctorPage user={user} onLogout={handleLogout} />
                    </ProtectedRoute>
                } />

                {/* Catch-All */}
                <Route path="/unauthorized" element={<h1>403 - Yetkisiz Erişim</h1>} />
                <Route path="*" element={<h1>404 - Sayfa Bulunamadı</h1>} />
            </Routes>
        </Suspense>
    );
}

export default App;

4. Özet Tavsiyeler

1. State Management: Eğer proje büyüyecekse user bilgisini App.js yerine bir AuthContext içinde sakla. Böylece her bileşenden useAuth() hook'u ile kullanıcıya erişebilirsin.
2. Axios Interceptors: Token geçersiz olduğunda (401 hatası) otomatik olarak handleLogout fonksiyonunu tetikleyen bir Axios Interceptor kur.
3. Validation: localStorage verileri kullanıcı tarafından değiştirilebilir. Sayfa değişimlerinde state'deki user.role bilgisini kullan, ancak kritik işlemlerde her zaman backend'den gelen rolü baz al.
4. Route Config: Rotaları böyle manuel yazmak yerine bir routesConfig.js dizisi oluşturup map ile dönmek daha profesyoneldir.

Bu yapı seni hem performans hem de güvenlik tarafında bir üst seviyeye taşıyacaktır. Kolay gelsin!