+
+
+
+ F1 The Website
+ +
+ setIsDetailOpen(false)}
+ isLoading={driversWithStandingsPending}
+ isError={driversWithStandingsError}
+ driver={
+ selectedDriver
+ ? {
+ name: selectedDriver.full_name,
+ number: selectedDriver.driver_number,
+ headshot_url: selectedDriver.headshot_url,
+ team_colour: selectedDriver.team_colour,
+ team_name: selectedDriver.team_name,
+ points_current: selectedDriver.points_current,
+ position_current: selectedDriver.position_current,
+ }
+ : undefined
+ }
+ teamStanding={
+ selectedDriver
+ ? teamStandings.find(
+ (team) => team.team_name === selectedDriver.team_name,
+ )
+ : undefined
+ }
+ teamStandingsPending={teamStandingsPending}
+ teamStandingsError={teamStandingsError}
+ hasPrev={clampedIndex > 0}
+ hasNext={clampedIndex < filteredDrivers.length - 1}
+ onPrev={() => setSelectedIndex((index) => Math.max(0, index - 1))}
+ onNext={() =>
+ setSelectedIndex((index) =>
+ Math.min(filteredDrivers.length - 1, index + 1),
+ )
+ }
+ />
+
+
+ );
+}
+
+export default App;
diff --git a/src/api/api.tsx b/src/api/api.tsx
new file mode 100644
index 0000000..fbd7539
--- /dev/null
+++ b/src/api/api.tsx
@@ -0,0 +1,103 @@
+interface RaceSession {
+ session_key: number;
+ date_end: string;
+}
+
+export interface Driver {
+ broadcast_name: string;
+ driver_number: number;
+ first_name: string;
+ last_name: string;
+ full_name: string;
+ headshot_url: string;
+ meeting_key: number;
+ name_acronym: string;
+ session_key: number;
+ team_colour: string;
+ team_name: string;
+}
+
+export interface DriverStandings {
+ driver_number: number;
+ position_current: number;
+ points_current: number;
+ session_key: number;
+ meeting_key: number;
+}
+
+export interface DriverWithStandings extends Driver {
+ position_current: number;
+ points_current: number;
+}
+
+export interface TeamStandings {
+ team_name: string;
+ position_start: number;
+ position_current: number;
+ points_start: number;
+ points_current: number;
+ session_key: number;
+ meeting_key: number;
+}
+
+async function fetchApi
+ {driversWithStandingsPending
+ ? "loading drivers..."
+ : driversWithStandingsError
+ ? "Could not load drivers."
+ : filteredDrivers.length === 0
+ ?
+ toggleFavorite(driver.driver_number)
+ }
+ isSelected={
+ selectedDriver?.driver_number === driver.driver_number
+ }
+ onSelect={() =>
+ selectDriverByNumber(driver.driver_number)
+ }
+ teamStanding={teamStandings.find(
+ (team) => team.team_name === driver.team_name,
+ )}
+ teamStandingsPending={teamStandingsPending}
+ teamStandingsError={teamStandingsError}
+ driver={{
+ name: driver.full_name,
+ number: driver.driver_number,
+ headshot_url: driver.headshot_url,
+ team_colour: driver.team_colour,
+ team_name: driver.team_name,
+ points_current: driver.points_current,
+ position_current: driver.position_current,
+ }}
+ />
+ ))}
+
+
+ No drivers match your filters.
+ : filteredDrivers.map((driver) => ( +
+
+ 
+
+ )
+}
diff --git a/src/components/DriverDetail.test.tsx b/src/components/DriverDetail.test.tsx
new file mode 100644
index 0000000..92f6643
--- /dev/null
+++ b/src/components/DriverDetail.test.tsx
@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { expect, test, vi } from 'vitest'
+import { driver } from '../test/fixtures'
+import DriverDetail from './DriverDetail'
+
+const props = {
+ isOpen: true,
+ onClose: () => {},
+ driver,
+ teamStanding: {
+ team_name: 'McLaren',
+ position_start: 2,
+ position_current: 1,
+ points_start: 180,
+ points_current: 200,
+ session_key: 1,
+ meeting_key: 1,
+ },
+ teamStandingsPending: false,
+ teamStandingsError: false,
+ isLoading: false,
+ isError: false,
+ hasPrev: true,
+ hasNext: true,
+ onPrev: () => {},
+ onNext: () => {},
+}
+
+test('shows driver details', () => {
+ render({driver.number}
+{driver.name}
+
+
+
+ {isLoading ? (
+ {
+ event.currentTarget.src = DEFAULT_AVATAR_URL;
+ }}
+ />
+
+
+ );
+}
diff --git a/src/components/SearchAndFilter.test.tsx b/src/components/SearchAndFilter.test.tsx
new file mode 100644
index 0000000..5d1a346
--- /dev/null
+++ b/src/components/SearchAndFilter.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { expect, test, vi } from 'vitest'
+import SearchAndFilter from './SearchAndFilter'
+
+const props = {
+ showFavorites: false,
+ onShowFavoritesChange: () => {},
+ search: '',
+ onSearchChange: () => {},
+ team: 'all',
+ onTeamChange: () => {},
+ teams: ['McLaren', 'Ferrari'],
+ sortOrder: 'none' as const,
+ onSortOrderChange: () => {},
+}
+
+test('shows filters from props', () => {
+ render(Loading driver...
+ ) : isError ? ( +Could not load driver details.
+ ) : !driver ? ( +No driver selected.
+ ) : ( + <> +
+
+
+ {driver.name}
+ + {driver.number} + +
+
+
+ )}
+
+ Team
+
+ {driver.team_name}
+
+
+
+
+
+ Position
+
+ {driver.position_current || "—"}
+
+
+
+
+
+ Driver points
+
+ {driver.points_current}
+
+
+
+
+
+ Team points
+
+ {teamStandingsPending
+ ? "Loading..."
+ : teamStandingsError
+ ? "Unavailable"
+ : (teamStanding?.points_current ?? "Unavailable")}
+
+
+
+
+
+
+
+ onSearchChange(e.target.value)}
+ />
+
+
+
+
+
+ );
+}
+
+export default SearchAndFilter;
diff --git a/src/components/__snapshots__/DriverCard.test.tsx.snap b/src/components/__snapshots__/DriverCard.test.tsx.snap
new file mode 100644
index 0000000..687c939
--- /dev/null
+++ b/src/components/__snapshots__/DriverCard.test.tsx.snap
@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`matches the driver card snapshot 1`] = `
+
+
+ 
+
++ 4 +
++ Lando Norris +
+
+