wip

apps/website/components/drivers/ProfileStats.tsx

@@ -2,7 +2,8 @@
 
 import Card from '../ui/Card';
 import RankBadge from './RankBadge';
-import { getDriverStats, getAllDriverRankings, getLeagueRankings } from '@/lib/di-container';
+import { getLeagueRankings, getGetProfileOverviewUseCase } from '@/lib/di-container';
+import { useState, useEffect } from 'react';
 import { getPrimaryLeagueIdForDriver } from '@/lib/leagueMembership';
 
 interface ProfileStatsProps {
@@ -18,8 +19,22 @@ interface ProfileStatsProps {
 }
 
 export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
-  const driverStats = driverId ? getDriverStats(driverId) : null;
-  const allRankings = getAllDriverRankings();
+  const [profileData, setProfileData] = useState<any>(null);
+  
+  useEffect(() => {
+    if (driverId) {
+      const load = async () => {
+        const profileUseCase = getGetProfileOverviewUseCase();
+        await profileUseCase.execute({ driverId });
+        const vm = profileUseCase.presenter.getViewModel();
+        setProfileData(vm);
+      };
+      void load();
+    }
+  }, [driverId]);
+
+  const driverStats = profileData?.stats || null;
+  const totalDrivers = profileData?.currentDriver?.totalDrivers || 0;
   const primaryLeagueId = driverId ? getPrimaryLeagueIdForDriver(driverId) : null;
   const leagueRank =
     driverId && primaryLeagueId ? getLeagueRankings(driverId, primaryLeagueId) : null;
@@ -80,7 +95,7 @@ export default function ProfileStats({ driverId, stats }: ProfileStatsProps) {
                   <div>
                     <div className="text-white font-medium text-lg">Overall Ranking</div>
                     <div className="text-sm text-gray-400">
-                      {driverStats.overallRank} of {allRankings.length} drivers
+                      {driverStats.overallRank} of {totalDrivers} drivers
                     </div>
                   </div>
                 </div>