wip

apps/website/components/drivers/DriverProfile.tsx

@@ -9,8 +9,10 @@ import DriverRankings from './DriverRankings';
 import PerformanceMetrics from './PerformanceMetrics';
 import { useEffect, useState } from 'react';
 import { getLeagueRankings, getGetDriverTeamUseCase, getGetProfileOverviewUseCase } from '@/lib/di-container';
+import { DriverTeamPresenter } from '@/lib/presenters/DriverTeamPresenter';
 import { getPrimaryLeagueIdForDriver } from '@/lib/leagueMembership';
-import type { GetDriverTeamQueryResultDTO } from '@gridpilot/racing/application/dto/TeamCommandAndQueryDTO';
+import type { ProfileOverviewViewModel } from '@gridpilot/racing/application/presenters/IProfileOverviewPresenter';
+import type { DriverTeamViewModel } from '@gridpilot/racing/application/presenters/IDriverTeamPresenter';
 
 interface DriverProfileProps {
   driver: DriverDTO;
@@ -18,23 +20,39 @@ interface DriverProfileProps {
   onEditClick?: () => void;
 }
  
+interface DriverProfileStatsViewModel {
+  rating: number;
+  wins: number;
+  podiums: number;
+  dnfs: number;
+  totalRaces: number;
+  avgFinish: number;
+  bestFinish: number;
+  worstFinish: number;
+  consistency: number;
+  percentile: number;
+  overallRank?: number;
+}
+
+type DriverProfileOverviewViewModel = ProfileOverviewViewModel | null;
+
 export default function DriverProfile({ driver, isOwnProfile = false, onEditClick }: DriverProfileProps) {
-  const [profileData, setProfileData] = useState<any>(null);
-  const [teamData, setTeamData] = useState<GetDriverTeamQueryResultDTO | null>(null);
+  const [profileData, setProfileData] = useState<DriverProfileOverviewViewModel>(null);
+  const [teamData, setTeamData] = useState<DriverTeamViewModel | null>(null);
 
   useEffect(() => {
     const load = async () => {
       // Load profile data using GetProfileOverviewUseCase
       const profileUseCase = getGetProfileOverviewUseCase();
-      await profileUseCase.execute({ driverId: driver.id });
-      const profileViewModel = profileUseCase.presenter.getViewModel();
+      const profileViewModel = await profileUseCase.execute({ driverId: driver.id });
       setProfileData(profileViewModel);
 
-      // Load team data
+      // Load team data using caller-owned presenter
       const teamUseCase = getGetDriverTeamUseCase();
-      await teamUseCase.execute({ driverId: driver.id });
-      const teamViewModel = teamUseCase.presenter.getViewModel();
-      setTeamData(teamViewModel.result);
+      const driverTeamPresenter = new DriverTeamPresenter();
+      await teamUseCase.execute({ driverId: driver.id }, driverTeamPresenter);
+      const teamResult = driverTeamPresenter.getViewModel();
+      setTeamData(teamResult ?? null);
     };
     void load();
   }, [driver.id]);
@@ -44,27 +62,27 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
   const leagueRank = primaryLeagueId
     ? getLeagueRankings(driver.id, primaryLeagueId)
     : { rank: 0, totalDrivers: 0, percentile: 0 };
-  const globalRank = profileData?.currentDriver?.globalRank || null;
-  const totalDrivers = profileData?.currentDriver?.totalDrivers || 0;
+  const globalRank = profileData?.currentDriver?.globalRank ?? null;
+  const totalDrivers = profileData?.currentDriver?.totalDrivers ?? 0;
 
   const performanceStats = driverStats ? {
-    winRate: (driverStats.wins / driverStats.totalRaces) * 100,
-    podiumRate: (driverStats.podiums / driverStats.totalRaces) * 100,
-    dnfRate: (driverStats.dnfs / driverStats.totalRaces) * 100,
-    avgFinish: driverStats.avgFinish,
-    consistency: driverStats.consistency,
-    bestFinish: driverStats.bestFinish,
-    worstFinish: driverStats.worstFinish,
+    winRate: driverStats.totalRaces > 0 ? (driverStats.wins / driverStats.totalRaces) * 100 : 0,
+    podiumRate: driverStats.totalRaces > 0 ? (driverStats.podiums / driverStats.totalRaces) * 100 : 0,
+    dnfRate: driverStats.totalRaces > 0 ? (driverStats.dnfs / driverStats.totalRaces) * 100 : 0,
+    avgFinish: driverStats.avgFinish ?? 0,
+    consistency: driverStats.consistency ?? 0,
+    bestFinish: driverStats.bestFinish ?? 0,
+    worstFinish: driverStats.worstFinish ?? 0,
   } : null;
 
   const rankings = driverStats ? [
     {
       type: 'overall' as const,
       name: 'Overall Ranking',
-      rank: globalRank || driverStats.overallRank || 0,
-      totalDrivers: totalDrivers,
-      percentile: driverStats.percentile,
-      rating: driverStats.rating,
+      rank: globalRank ?? driverStats.overallRank ?? 0,
+      totalDrivers,
+      percentile: driverStats.percentile ?? 0,
+      rating: driverStats.rating ?? 0,
     },
     {
       type: 'league' as const,
@@ -72,7 +90,7 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
       rank: leagueRank.rank,
       totalDrivers: leagueRank.totalDrivers,
       percentile: leagueRank.percentile,
-      rating: driverStats.rating,
+      rating: driverStats.rating ?? 0,
     },
   ] : [];
 
@@ -84,7 +102,7 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
           rating={driverStats?.rating ?? null}
           rank={driverStats?.overallRank ?? null}
           isOwnProfile={isOwnProfile}
-          onEditClick={isOwnProfile ? onEditClick : undefined}
+          onEditClick={onEditClick ?? (() => {})}
           teamName={teamData?.team.name ?? null}
           teamTag={teamData?.team.tag ?? null}
         />
@@ -103,7 +121,11 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
             <Card>
               <h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
               <div className="grid grid-cols-2 gap-4">
-                <StatCard label="Rating" value={driverStats.rating.toString()} color="text-primary-blue" />
+                <StatCard
+                  label="Rating"
+                  value={(driverStats.rating ?? 0).toString()}
+                  color="text-primary-blue"
+                />
                 <StatCard label="Total Races" value={driverStats.totalRaces.toString()} color="text-white" />
                 <StatCard label="Wins" value={driverStats.wins.toString()} color="text-green-400" />
                 <StatCard label="Podiums" value={driverStats.podiums.toString()} color="text-warning-amber" />
@@ -130,14 +152,21 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
 
       <Card>
         <h3 className="text-lg font-semibold text-white mb-4">Performance by Class</h3>
-        <ProfileStats stats={driverStats ? {
-          totalRaces: driverStats.totalRaces,
-          wins: driverStats.wins,
-          podiums: driverStats.podiums,
-          dnfs: driverStats.dnfs,
-          avgFinish: driverStats.avgFinish,
-          completionRate: ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) * 100
-        } : undefined} />
+        {driverStats && (
+          <ProfileStats
+            stats={{
+              totalRaces: driverStats.totalRaces,
+              wins: driverStats.wins,
+              podiums: driverStats.podiums,
+              dnfs: driverStats.dnfs,
+              avgFinish: driverStats.avgFinish ?? 0,
+              completionRate:
+                driverStats.totalRaces > 0
+                  ? ((driverStats.totalRaces - driverStats.dnfs) / driverStats.totalRaces) * 100
+                  : 0,
+            }}
+          />
+        )}
       </Card>
 
       <CareerHighlights />