di usage in website

apps/website/components/drivers/DriverProfile.tsx

@@ -8,8 +8,7 @@ import ProfileStats from './ProfileStats';
 import CareerHighlights from './CareerHighlights';
 import DriverRankings from './DriverRankings';
 import PerformanceMetrics from './PerformanceMetrics';
-import { useEffect, useState } from 'react';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useDriverProfile } from '@/hooks/driver/useDriverProfile';
 
 interface DriverProfileProps {
   driver: DriverViewModel;
@@ -25,42 +24,29 @@ interface DriverTeamViewModel {
 }
 
 export default function DriverProfile({ driver, isOwnProfile = false, onEditClick }: DriverProfileProps) {
-  const { driverService } = useServices();
-  const [profileData, setProfileData] = useState<DriverProfileStatsViewModel | null>(null);
-  const [teamData, setTeamData] = useState<DriverTeamViewModel | null>(null);
+  const { data: profileData, isLoading } = useDriverProfile(driver.id);
 
-  useEffect(() => {
-    const load = async () => {
-      try {
-        // Load driver profile
-        const profile = await driverService.getDriverProfile(driver.id);
-        
-        // Extract stats from profile
-        if (profile.stats) {
-          setProfileData(profile.stats);
-        }
-        
-        // Load team data if available
-        if (profile.teamMemberships && profile.teamMemberships.length > 0) {
-          const currentTeam = profile.teamMemberships.find(m => m.isCurrent) || profile.teamMemberships[0];
-          if (currentTeam) {
-            setTeamData({
-              team: {
-                name: currentTeam.teamName,
-                tag: currentTeam.teamTag ?? ''
-              }
-            });
-          }
-        }
-      } catch (error) {
-        console.error('Failed to load driver profile data:', error);
+  // Extract team data from profile
+  const teamData: DriverTeamViewModel | null = (() => {
+    if (!profileData?.teamMemberships || profileData.teamMemberships.length === 0) {
+      return null;
+    }
+    
+    const currentTeam = profileData.teamMemberships.find(m => m.isCurrent) || profileData.teamMemberships[0];
+    if (!currentTeam) {
+      return null;
+    }
+    
+    return {
+      team: {
+        name: currentTeam.teamName,
+        tag: currentTeam.teamTag ?? ''
       }
     };
-    void load();
-  }, [driver.id, driverService]);
+  })();
 
-  const driverStats = profileData;
-  const globalRank = profileData?.overallRank ?? null;
+  const driverStats = profileData?.stats ?? null;
+  const globalRank = driverStats?.overallRank ?? null;
   const totalDrivers = 1000; // Placeholder
 
   const performanceStats = driverStats ? {