wip

2025-12-09 10:32:59 +01:00
parent 35f988f885
commit a780139692
26 changed files with 2224 additions and 344 deletions
--- a/apps/website/components/drivers/ProfileRaceHistory.tsx
+++ b/apps/website/components/drivers/ProfileRaceHistory.tsx
@@ -1,43 +1,74 @@
 'use client';

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Card from '../ui/Card';
 import Button from '../ui/Button';
+import RaceResultCard from '../races/RaceResultCard';
+import { getRaceRepository, getLeagueRepository, getResultRepository } from '@/lib/di-container';
+import { Race } from '@gridpilot/racing/domain/entities/Race';
+import { Result } from '@gridpilot/racing/domain/entities/Result';
+import { League } from '@gridpilot/racing/domain/entities/League';

-interface RaceResult {
-  id: string;
-  date: string;
-  track: string;
-  car: string;
-  position: number;
-  startPosition: number;
-  incidents: number;
-  league: string;
+interface RaceHistoryProps {
+  driverId: string;
 }

-const mockRaceHistory: RaceResult[] = [
-  { id: '1', date: '2024-11-28', track: 'Spa-Francorchamps', car: 'Porsche 911 GT3 R', position: 1, startPosition: 3, incidents: 0, league: 'GridPilot Championship' },
-  { id: '2', date: '2024-11-21', track: 'Nürburgring GP', car: 'Porsche 911 GT3 R', position: 4, startPosition: 5, incidents: 2, league: 'GridPilot Championship' },
-  { id: '3', date: '2024-11-14', track: 'Monza', car: 'Ferrari 488 GT3', position: 2, startPosition: 1, incidents: 1, league: 'GT3 Sprint Series' },
-  { id: '4', date: '2024-11-07', track: 'Silverstone', car: 'Audi R8 LMS GT3', position: 7, startPosition: 12, incidents: 0, league: 'GridPilot Championship' },
-  { id: '5', date: '2024-10-31', track: 'Interlagos', car: 'Mercedes-AMG GT3', position: 3, startPosition: 4, incidents: 1, league: 'GT3 Sprint Series' },
-  { id: '6', date: '2024-10-24', track: 'Road Atlanta', car: 'Porsche 911 GT3 R', position: 5, startPosition: 8, incidents: 2, league: 'GridPilot Championship' },
-  { id: '7', date: '2024-10-17', track: 'Watkins Glen', car: 'BMW M4 GT3', position: 1, startPosition: 2, incidents: 0, league: 'GT3 Sprint Series' },
-  { id: '8', date: '2024-10-10', track: 'Brands Hatch', car: 'Porsche 911 GT3 R', position: 6, startPosition: 7, incidents: 3, league: 'GridPilot Championship' },
-  { id: '9', date: '2024-10-03', track: 'Suzuka', car: 'McLaren 720S GT3', position: 2, startPosition: 6, incidents: 1, league: 'GT3 Sprint Series' },
-  { id: '10', date: '2024-09-26', track: 'Bathurst', car: 'Porsche 911 GT3 R', position: 8, startPosition: 10, incidents: 0, league: 'GridPilot Championship' },
-  { id: '11', date: '2024-09-19', track: 'Laguna Seca', car: 'Ferrari 488 GT3', position: 3, startPosition: 5, incidents: 2, league: 'GT3 Sprint Series' },
-  { id: '12', date: '2024-09-12', track: 'Imola', car: 'Audi R8 LMS GT3', position: 1, startPosition: 1, incidents: 0, league: 'GridPilot Championship' },
-];
-
-export default function ProfileRaceHistory() {
+export default function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
  const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
  const [page, setPage] = useState(1);
+  const [races, setRaces] = useState<Race[]>([]);
+  const [results, setResults] = useState<Result[]>([]);
+  const [leagues, setLeagues] = useState<Map<string, League>>(new Map());
+  const [loading, setLoading] = useState(true);
  const resultsPerPage = 10;

-  const filteredResults = mockRaceHistory.filter(result => {
-    if (filter === 'wins') return result.position === 1;
-    if (filter === 'podiums') return result.position <= 3;
+  useEffect(() => {
+    async function loadRaceHistory() {
+      try {
+        const resultRepo = getResultRepository();
+        const raceRepo = getRaceRepository();
+        const leagueRepo = getLeagueRepository();
+
+        const driverResults = await resultRepo.findByDriverId(driverId);
+        const allRaces = await raceRepo.findAll();
+        const allLeagues = await leagueRepo.findAll();
+
+        // Filter races to only those where driver has results
+        const raceIds = new Set(driverResults.map(r => r.raceId));
+        const driverRaces = allRaces
+          .filter(race => raceIds.has(race.id) && race.status === 'completed')
+          .sort((a, b) => b.scheduledAt.getTime() - a.scheduledAt.getTime());
+
+        const leagueMap = new Map<string, League>();
+        allLeagues.forEach(league => leagueMap.set(league.id, league));
+
+        setRaces(driverRaces);
+        setResults(driverResults);
+        setLeagues(leagueMap);
+      } catch (err) {
+        console.error('Failed to load race history:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadRaceHistory();
+  }, [driverId]);
+
+  const raceHistory = races.map(race => {
+    const result = results.find(r => r.raceId === race.id);
+    const league = leagues.get(race.leagueId);
+    return {
+      race,
+      result,
+      league,
+    };
+  }).filter(item => item.result);
+
+  const filteredResults = raceHistory.filter(item => {
+    if (!item.result) return false;
+    if (filter === 'wins') return item.result.position === 1;
+    if (filter === 'podiums') return item.result.position <= 3;
    return true;
  });

@@ -47,6 +78,34 @@ export default function ProfileRaceHistory() {
    page * resultsPerPage
  );

+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="h-9 w-24 bg-iron-gray rounded animate-pulse" />
+          ))}
+        </div>
+        <Card>
+          <div className="space-y-2">
+            {[1, 2, 3].map(i => (
+              <div key={i} className="h-20 bg-deep-graphite rounded animate-pulse" />
+            ))}
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  if (raceHistory.length === 0) {
+    return (
+      <Card className="text-center py-12">
+        <p className="text-gray-400 mb-2">No race history yet</p>
+        <p className="text-sm text-gray-500">Complete races to build your racing record</p>
+      </Card>
+    );
+  }
+
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
@@ -75,53 +134,19 @@ export default function ProfileRaceHistory() {

      <Card>
        <div className="space-y-2">
-          {paginatedResults.map((result) => (
-            <div
-              key={result.id}
-              className="p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors"
-            >
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-3">
-                  <div className={`
-                    w-8 h-8 rounded flex items-center justify-center font-bold text-sm
-                    ${result.position === 1 ? 'bg-green-400/20 text-green-400' : 
-                      result.position === 2 ? 'bg-gray-400/20 text-gray-400' :
-                      result.position === 3 ? 'bg-warning-amber/20 text-warning-amber' :
-                      'bg-charcoal-outline text-gray-400'}
-                  `}>
-                    P{result.position}
-                  </div>
-                  <div>
-                    <div className="text-white font-medium">{result.track}</div>
-                    <div className="text-sm text-gray-400">{result.car}</div>
-                  </div>
-                </div>
-                <div className="text-right">
-                  <div className="text-sm text-gray-400">
-                    {new Date(result.date).toLocaleDateString('en-US', { 
-                      month: 'short', 
-                      day: 'numeric',
-                      year: 'numeric'
-                    })}
-                  </div>
-                  <div className="text-xs text-gray-500">{result.league}</div>
-                </div>
-              </div>
-              <div className="flex items-center gap-4 text-xs text-gray-500">
-                <span>Started P{result.startPosition}</span>
-                <span>•</span>
-                <span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
-                  {result.incidents}x incidents
-                </span>
-                {result.position < result.startPosition && (
-                  <>
-                    <span>•</span>
-                    <span className="text-green-400">+{result.startPosition - result.position} positions</span>
-                  </>
-                )}
-              </div>
-            </div>
-          ))}
+          {paginatedResults.map(({ race, result, league }) => {
+            if (!result) return null;
+            
+            return (
+              <RaceResultCard
+                key={race.id}
+                race={race}
+                result={result}
+                league={league}
+                showLeague={true}
+              />
+            );
+          })}
        </div>

        {totalPages > 1 && (