mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
feat(#73): Adaptive Weekend shell and responsive navigation
Implemented by claude via .agents/dev dispatch.
This commit is contained in:
156
frontend/src/pages/ExplorePage.tsx
Normal file
156
frontend/src/pages/ExplorePage.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useQueries, useQuery } from '@tanstack/react-query'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import {
|
||||
fetchChampionshipHub,
|
||||
fetchLocalMeetings,
|
||||
fetchSeasonMeetings,
|
||||
fetchSeasons,
|
||||
fetchWeekend,
|
||||
} from '../api'
|
||||
import { countryFlag, formatGpDateRange } from '../lib/gpIdentity'
|
||||
import { meetingHasStarted } from '../lib/schedule'
|
||||
import { teamColor } from '../utils'
|
||||
import type { Weekend } from '../types'
|
||||
import '../styles/weekend.css'
|
||||
|
||||
function analysisKey(weekend: Weekend | undefined): number | undefined {
|
||||
if (!weekend) return undefined
|
||||
const race = weekend.sessions.find((s) => s.session.session_type?.toLowerCase().includes('race'))
|
||||
return race?.session.session_key ?? weekend.default_session_key
|
||||
}
|
||||
|
||||
export function ExplorePage() {
|
||||
const now = useMemo(() => new Date(), [])
|
||||
|
||||
const seasonsQuery = useQuery({ queryKey: ['seasons'], queryFn: fetchSeasons })
|
||||
const season = seasonsQuery.data?.[0] ?? null
|
||||
|
||||
const localMeetingsQuery = useQuery({
|
||||
queryKey: ['meetings', season, 'local'],
|
||||
queryFn: () => fetchLocalMeetings(season!),
|
||||
enabled: season != null,
|
||||
})
|
||||
const seasonMeetingsQuery = useQuery({
|
||||
queryKey: ['season-meetings', season],
|
||||
queryFn: () => fetchSeasonMeetings(season!),
|
||||
enabled: season != null,
|
||||
})
|
||||
const championshipQuery = useQuery({
|
||||
queryKey: ['championship-hub', season],
|
||||
queryFn: () => fetchChampionshipHub(season!),
|
||||
enabled: season != null,
|
||||
})
|
||||
|
||||
const localMeetings = localMeetingsQuery.data ?? []
|
||||
const meetings = seasonMeetingsQuery.data?.length ? seasonMeetingsQuery.data : localMeetings
|
||||
|
||||
const weekendQueries = useQueries({
|
||||
queries: localMeetings.map((m) => ({
|
||||
queryKey: ['weekend', m.meeting_key],
|
||||
queryFn: () => fetchWeekend(m.meeting_key),
|
||||
enabled: localMeetings.length > 0,
|
||||
staleTime: 60_000,
|
||||
})),
|
||||
})
|
||||
const weekendsByKey = useMemo(() => {
|
||||
const map = new Map<number, Weekend>()
|
||||
localMeetings.forEach((m, i) => {
|
||||
const data = weekendQueries[i]?.data
|
||||
if (data) map.set(m.meeting_key, data)
|
||||
})
|
||||
return map
|
||||
}, [localMeetings, weekendQueries])
|
||||
|
||||
const drivers = championshipQuery.data?.drivers ?? []
|
||||
const activeMeetings = meetings.filter((m) => !m.is_cancelled)
|
||||
|
||||
if (seasonsQuery.isLoading) {
|
||||
return <div className="wk-status" data-testid="explore-loading"><p className="wk-status-title">Loading…</p></div>
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="wk-page wk-explore" data-testid="explore-page">
|
||||
<div className="wk-eyebrow mono">Explore · {season ?? 'season'}</div>
|
||||
|
||||
<section className="wk-explore-section" aria-labelledby="explore-calendar-title">
|
||||
<header className="wk-card-head">
|
||||
<span className="wk-card-title" id="explore-calendar-title">Season races</span>
|
||||
<span className="wk-card-link mono">{activeMeetings.length} rounds</span>
|
||||
</header>
|
||||
{activeMeetings.length === 0 ? (
|
||||
<p className="wk-status-sub" data-testid="explore-calendar-empty">No season calendar available yet.</p>
|
||||
) : (
|
||||
<ol className="wk-explore-grid" role="list">
|
||||
{activeMeetings.map((meeting, index) => {
|
||||
const weekend = weekendsByKey.get(meeting.meeting_key)
|
||||
const target = analysisKey(weekend)
|
||||
const done = meetingHasStarted(meeting, now)
|
||||
const card = (
|
||||
<>
|
||||
<div className="wk-explore-top mono">
|
||||
<span>R{String(index + 1).padStart(2, '0')}</span>
|
||||
<span className="wk-explore-flag">
|
||||
{countryFlag(meeting) || meeting.country_code}
|
||||
</span>
|
||||
</div>
|
||||
<div className="wk-explore-name">{meeting.meeting_name}</div>
|
||||
<div className="wk-explore-meta mono">{meeting.circuit_short_name || meeting.location}</div>
|
||||
<div className="wk-explore-meta mono">{formatGpDateRange(meeting)}</div>
|
||||
<span className={`wk-explore-state ${done ? 'is-done' : 'is-upcoming'}`}>
|
||||
{done ? 'Completed' : 'Upcoming'}
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<li key={meeting.meeting_key} className="wk-explore-item" role="listitem">
|
||||
{target ? (
|
||||
<Link
|
||||
to="/race-hub"
|
||||
search={{ session_key: target }}
|
||||
className="wk-explore-card is-link"
|
||||
data-testid={`explore-race-${meeting.meeting_key}`}
|
||||
>
|
||||
{card}
|
||||
</Link>
|
||||
) : (
|
||||
<div className="wk-explore-card" data-testid={`explore-race-${meeting.meeting_key}`}>{card}</div>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="wk-explore-section" aria-labelledby="explore-drivers-title">
|
||||
<header className="wk-card-head">
|
||||
<span className="wk-card-title" id="explore-drivers-title">Drivers</span>
|
||||
<Link to="/championship" className="wk-card-link">Championship →</Link>
|
||||
</header>
|
||||
{drivers.length === 0 ? (
|
||||
<p className="wk-status-sub" data-testid="explore-drivers-empty">Driver data not available yet.</p>
|
||||
) : (
|
||||
<ol className="wk-explore-drivers" role="list">
|
||||
{drivers.map((d) => (
|
||||
<li key={d.driver_number} role="listitem">
|
||||
<Link
|
||||
to="/drivers/$driverNumber"
|
||||
params={{ driverNumber: String(d.driver_number) }}
|
||||
search={season ? { year: season } : {}}
|
||||
className="wk-driver-chip"
|
||||
style={{ ['--wk-team' as string]: teamColor(d.team_colour) }}
|
||||
data-testid={`explore-driver-${d.driver_number}`}
|
||||
>
|
||||
<span className="wk-driver-pos mono">{d.position}</span>
|
||||
<span className="wk-driver-code">{d.name_acronym}</span>
|
||||
<span className="wk-driver-pts mono">{d.points}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user