mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 11:54:59 -04:00
feat(frontend): calendar-aware paddock briefing digest (#26)
Reframe Briefing into GP-window sections with driver/team tag chips, a sticky "since last race" header, and client-side digest helpers (gpWindows, groupByWindow, tagItems). Overlapping inter-race windows resolve to the latest GP; undated items land in a Recent bucket. Vitest covers digest lib + page render/filter behaviour. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,7 +1,23 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { fetchNews } from '../api'
|
||||
import {
|
||||
fetchChampionshipHub,
|
||||
fetchNews,
|
||||
fetchSeasonMeetings,
|
||||
fetchSeasons,
|
||||
} from '../api'
|
||||
import {
|
||||
activeDigestWindow,
|
||||
gpWindows,
|
||||
itemsForWindow,
|
||||
sinceLastLabel,
|
||||
tagColour,
|
||||
tagItems,
|
||||
topTags,
|
||||
} from '../lib/digest'
|
||||
import { timeAgo } from '../utils'
|
||||
import '../styles/digest.css'
|
||||
|
||||
const SOURCE_DISPLAY: Record<string, string> = {
|
||||
'fia': 'FIA',
|
||||
@@ -14,14 +30,53 @@ const SOURCE_DISPLAY: Record<string, string> = {
|
||||
}
|
||||
|
||||
export function PaddockBriefing() {
|
||||
const now = useMemo(() => new Date(), [])
|
||||
|
||||
const { data: news, isLoading, isError } = useQuery({
|
||||
queryKey: ['news'],
|
||||
queryFn: () => fetchNews(100),
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const seasonsQuery = useQuery({
|
||||
queryKey: ['seasons'],
|
||||
queryFn: fetchSeasons,
|
||||
})
|
||||
const latestSeason = seasonsQuery.data?.[0] ?? null
|
||||
|
||||
const meetingsQuery = useQuery({
|
||||
queryKey: ['season-meetings', latestSeason],
|
||||
queryFn: () => fetchSeasonMeetings(latestSeason!),
|
||||
enabled: latestSeason != null,
|
||||
})
|
||||
|
||||
const hubQuery = useQuery({
|
||||
queryKey: ['championship-hub', latestSeason],
|
||||
queryFn: () => fetchChampionshipHub(latestSeason!),
|
||||
enabled: latestSeason != null,
|
||||
})
|
||||
|
||||
const meetings = meetingsQuery.data ?? []
|
||||
const hub = hubQuery.data
|
||||
const tagged = useMemo(
|
||||
() => tagItems(news ?? [], hub?.drivers ?? [], hub?.teams ?? []),
|
||||
[news, hub],
|
||||
)
|
||||
|
||||
const windows = useMemo(() => gpWindows(meetings, now), [meetings, now])
|
||||
const activeWindow = useMemo(
|
||||
() => activeDigestWindow(windows, meetings, now),
|
||||
[windows, meetings, now],
|
||||
)
|
||||
const sinceItems = useMemo(
|
||||
() => itemsForWindow(tagged, activeWindow),
|
||||
[tagged, activeWindow],
|
||||
)
|
||||
const sinceTags = useMemo(() => topTags(sinceItems, 4), [sinceItems])
|
||||
const sinceLabel = sinceLastLabel(meetings, now)
|
||||
|
||||
const unreadCount = news?.filter((i) => !i.read_at).length ?? 0
|
||||
const preview = news?.slice(0, 5) ?? []
|
||||
const preview = sinceItems.length > 0 ? sinceItems.slice(0, 5) : (tagged.slice(0, 5))
|
||||
|
||||
return (
|
||||
<section className="cc-briefing" data-testid="paddock-briefing">
|
||||
@@ -37,6 +92,27 @@ export function PaddockBriefing() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{meetings.length > 0 && (
|
||||
<div className="cc-brief-digest-meta" data-testid="cc-brief-digest-meta">
|
||||
<span>Since {sinceLabel}</span>
|
||||
<span>·</span>
|
||||
<span>{sinceItems.length} items</span>
|
||||
{sinceTags.length > 0 && (
|
||||
<div className="cc-brief-digest-tags">
|
||||
{sinceTags.map((tag) => (
|
||||
<span
|
||||
key={tag.key}
|
||||
className="cc-brief-tag"
|
||||
style={{ borderColor: tagColour(tag.colour) }}
|
||||
>
|
||||
{tag.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && <div className="briefing-state loading-state">loading…</div>}
|
||||
{isError && <div className="briefing-state error-box">Failed to load briefing</div>}
|
||||
|
||||
|
||||
293
frontend/src/lib/digest.ts
Normal file
293
frontend/src/lib/digest.ts
Normal file
@@ -0,0 +1,293 @@
|
||||
import { meetingEndTime, meetingStartTime, mostRecentPastMeeting, nextUpcomingMeeting } from './schedule'
|
||||
import type { ChampHubDriver, ChampHubTeam, Meeting, NewsItem } from '../types'
|
||||
|
||||
export interface GPWindow {
|
||||
meeting_key: number
|
||||
meeting_name: string
|
||||
/** Inclusive lower bound: end of previous GP, or open for season opener. */
|
||||
start: Date | null
|
||||
/** Exclusive upper bound: start of next GP, or open after the final round. */
|
||||
end: Date | null
|
||||
}
|
||||
|
||||
export interface DigestTag {
|
||||
kind: 'driver' | 'team'
|
||||
key: string
|
||||
label: string
|
||||
colour: string
|
||||
}
|
||||
|
||||
export type TaggedNewsItem = NewsItem & { tags: DigestTag[] }
|
||||
|
||||
export const RECENT_BUCKET_KEY = '__recent__'
|
||||
|
||||
interface MatchCandidate {
|
||||
start: number
|
||||
end: number
|
||||
tag: DigestTag
|
||||
}
|
||||
|
||||
interface TagPattern {
|
||||
pattern: string
|
||||
tag: DigestTag
|
||||
}
|
||||
|
||||
function sortMeetings(meetings: Meeting[]): Meeting[] {
|
||||
return [...meetings].sort((a, b) => {
|
||||
const left = meetingStartTime(a)?.getTime() ?? 0
|
||||
const right = meetingStartTime(b)?.getTime() ?? 0
|
||||
if (left !== right) return left - right
|
||||
return a.meeting_name.localeCompare(b.meeting_name)
|
||||
})
|
||||
}
|
||||
|
||||
/** Derive inter-race windows [prev GP end → next GP start] for each round. */
|
||||
export function gpWindows(meetings: Meeting[], _now: Date): GPWindow[] {
|
||||
const sorted = sortMeetings(meetings)
|
||||
return sorted.map((meeting, index) => ({
|
||||
meeting_key: meeting.meeting_key,
|
||||
meeting_name: meeting.meeting_name,
|
||||
start: index > 0 ? meetingEndTime(sorted[index - 1]) : null,
|
||||
end: index < sorted.length - 1 ? meetingStartTime(sorted[index + 1]) : null,
|
||||
}))
|
||||
}
|
||||
|
||||
function itemPublishedAt(item: NewsItem): Date | null {
|
||||
if (!item.published_at) return null
|
||||
const parsed = Date.parse(item.published_at)
|
||||
return Number.isNaN(parsed) ? null : new Date(parsed)
|
||||
}
|
||||
|
||||
function itemInWindow(published: Date, window: GPWindow): boolean {
|
||||
if (window.start && published < window.start) return false
|
||||
if (window.end && published >= window.end) return false
|
||||
return true
|
||||
}
|
||||
|
||||
export function windowForDate(windows: GPWindow[], published: Date): GPWindow | null {
|
||||
const matches = windows.filter((window) => itemInWindow(published, window))
|
||||
if (matches.length === 0) return null
|
||||
return matches.reduce((best, window) => {
|
||||
const bestStart = best.start?.getTime() ?? Number.NEGATIVE_INFINITY
|
||||
const windowStart = window.start?.getTime() ?? Number.NEGATIVE_INFINITY
|
||||
return windowStart >= bestStart ? window : best
|
||||
})
|
||||
}
|
||||
|
||||
export interface GroupedDigest {
|
||||
windows: Array<{ window: GPWindow; items: NewsItem[] }>
|
||||
recent: NewsItem[]
|
||||
}
|
||||
|
||||
/** Bucket news items into GP windows; undated items land in `recent`. */
|
||||
export function groupByWindow(items: NewsItem[], windows: GPWindow[]): GroupedDigest {
|
||||
const buckets = new Map<number, NewsItem[]>()
|
||||
const recent: NewsItem[] = []
|
||||
|
||||
for (const item of items) {
|
||||
const published = itemPublishedAt(item)
|
||||
if (!published) {
|
||||
recent.push(item)
|
||||
continue
|
||||
}
|
||||
const match = windowForDate(windows, published)
|
||||
if (!match) {
|
||||
recent.push(item)
|
||||
continue
|
||||
}
|
||||
const list = buckets.get(match.meeting_key) ?? []
|
||||
list.push(item)
|
||||
buckets.set(match.meeting_key, list)
|
||||
}
|
||||
|
||||
const grouped = windows
|
||||
.map((window) => ({
|
||||
window,
|
||||
items: buckets.get(window.meeting_key) ?? [],
|
||||
}))
|
||||
.filter((entry) => entry.items.length > 0)
|
||||
|
||||
return { windows: grouped, recent }
|
||||
}
|
||||
|
||||
function driverLastName(fullName: string): string | null {
|
||||
const parts = fullName.trim().split(/\s+/).filter(Boolean)
|
||||
if (parts.length < 2) return null
|
||||
return parts[parts.length - 1] ?? null
|
||||
}
|
||||
|
||||
function buildTagPatterns(drivers: ChampHubDriver[], teams: ChampHubTeam[]): TagPattern[] {
|
||||
const patterns: TagPattern[] = []
|
||||
|
||||
for (const team of teams) {
|
||||
if (!team.team_name.trim()) continue
|
||||
patterns.push({
|
||||
pattern: team.team_name.toLowerCase(),
|
||||
tag: {
|
||||
kind: 'team',
|
||||
key: `team:${team.team_name}`,
|
||||
label: team.team_name,
|
||||
colour: team.team_colour,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
for (const driver of drivers) {
|
||||
const colour = driver.team_colour
|
||||
const base = {
|
||||
kind: 'driver' as const,
|
||||
colour,
|
||||
}
|
||||
if (driver.full_name.trim()) {
|
||||
patterns.push({
|
||||
pattern: driver.full_name.toLowerCase(),
|
||||
tag: {
|
||||
...base,
|
||||
key: `driver:${driver.name_acronym}`,
|
||||
label: driver.name_acronym,
|
||||
},
|
||||
})
|
||||
const lastName = driverLastName(driver.full_name)
|
||||
if (lastName) {
|
||||
patterns.push({
|
||||
pattern: lastName.toLowerCase(),
|
||||
tag: {
|
||||
...base,
|
||||
key: `driver:${driver.name_acronym}`,
|
||||
label: driver.name_acronym,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
if (driver.name_acronym.trim()) {
|
||||
patterns.push({
|
||||
pattern: driver.name_acronym.toLowerCase(),
|
||||
tag: {
|
||||
...base,
|
||||
key: `driver:${driver.name_acronym}`,
|
||||
label: driver.name_acronym,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
patterns.sort((a, b) => b.pattern.length - a.pattern.length)
|
||||
return patterns
|
||||
}
|
||||
|
||||
function overlaps(a: MatchCandidate, b: MatchCandidate): boolean {
|
||||
return a.start < b.end && b.start < a.end
|
||||
}
|
||||
|
||||
/**
|
||||
* Tag items via case-insensitive substring match on title + summary.
|
||||
* Longest pattern wins on overlapping spans (v1 string match — no NLP).
|
||||
*
|
||||
* Known limitations: common-word last names, team names inside other words,
|
||||
* and driver TLAs that appear in unrelated acronyms can false-positive.
|
||||
*/
|
||||
export function tagItems(
|
||||
items: NewsItem[],
|
||||
drivers: ChampHubDriver[],
|
||||
teams: ChampHubTeam[],
|
||||
): TaggedNewsItem[] {
|
||||
const patterns = buildTagPatterns(drivers, teams)
|
||||
|
||||
return items.map((item) => {
|
||||
const haystack = `${item.title} ${item.summary ?? ''}`.toLowerCase()
|
||||
const accepted: MatchCandidate[] = []
|
||||
|
||||
for (const { pattern, tag } of patterns) {
|
||||
if (!pattern) continue
|
||||
let from = 0
|
||||
while (from <= haystack.length - pattern.length) {
|
||||
const index = haystack.indexOf(pattern, from)
|
||||
if (index === -1) break
|
||||
const candidate: MatchCandidate = {
|
||||
start: index,
|
||||
end: index + pattern.length,
|
||||
tag,
|
||||
}
|
||||
if (!accepted.some((match) => overlaps(match, candidate))) {
|
||||
accepted.push(candidate)
|
||||
}
|
||||
from = index + 1
|
||||
}
|
||||
}
|
||||
|
||||
const tagsByKey = new Map<string, DigestTag>()
|
||||
for (const match of accepted) {
|
||||
tagsByKey.set(match.tag.key, match.tag)
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
tags: [...tagsByKey.values()].sort((a, b) => a.label.localeCompare(b.label)),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function activeDigestWindow(
|
||||
windows: GPWindow[],
|
||||
meetings: Meeting[],
|
||||
now: Date,
|
||||
): GPWindow | null {
|
||||
const next = nextUpcomingMeeting(meetings, now)
|
||||
if (next) {
|
||||
return windows.find((window) => window.meeting_key === next.meeting_key) ?? null
|
||||
}
|
||||
const recent = mostRecentPastMeeting(meetings, now)
|
||||
if (recent) {
|
||||
return windows.find((window) => window.meeting_key === recent.meeting_key) ?? null
|
||||
}
|
||||
return windows[0] ?? null
|
||||
}
|
||||
|
||||
export function sinceLastLabel(meetings: Meeting[], now: Date): string {
|
||||
const last = mostRecentPastMeeting(meetings, now)
|
||||
if (last) return last.meeting_name
|
||||
const next = nextUpcomingMeeting(meetings, now)
|
||||
if (next) return `Before ${next.meeting_name}`
|
||||
return 'Pre-season'
|
||||
}
|
||||
|
||||
export function itemsForWindow(items: TaggedNewsItem[], window: GPWindow | null): TaggedNewsItem[] {
|
||||
if (!window) return []
|
||||
return items.filter((item) => {
|
||||
const published = itemPublishedAt(item)
|
||||
return published != null && itemInWindow(published, window)
|
||||
})
|
||||
}
|
||||
|
||||
export function topTags(items: TaggedNewsItem[], limit = 5): DigestTag[] {
|
||||
const counts = new Map<string, { tag: DigestTag; count: number }>()
|
||||
for (const item of items) {
|
||||
for (const tag of item.tags) {
|
||||
const current = counts.get(tag.key)
|
||||
if (current) current.count += 1
|
||||
else counts.set(tag.key, { tag, count: 1 })
|
||||
}
|
||||
}
|
||||
return [...counts.values()]
|
||||
.sort((a, b) => b.count - a.count || a.tag.label.localeCompare(b.tag.label))
|
||||
.slice(0, limit)
|
||||
.map((entry) => entry.tag)
|
||||
}
|
||||
|
||||
export function filterByTag(items: TaggedNewsItem[], tagKey: string | null): TaggedNewsItem[] {
|
||||
if (!tagKey) return items
|
||||
return items.filter((item) => item.tags.some((tag) => tag.key === tagKey))
|
||||
}
|
||||
|
||||
export function tagColour(colour: string): string {
|
||||
if (!colour) return 'var(--text-3)'
|
||||
return colour.startsWith('#') ? colour : `#${colour}`
|
||||
}
|
||||
|
||||
export function sortWindowBucketsNewestFirst<T extends { window: GPWindow }>(buckets: T[]): T[] {
|
||||
return [...buckets].sort((a, b) => {
|
||||
const left = a.window.start?.getTime() ?? 0
|
||||
const right = b.window.start?.getTime() ?? 0
|
||||
return right - left
|
||||
})
|
||||
}
|
||||
@@ -1,13 +1,33 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { fetchNews, fetchNewsArticle, markNewsRead } from '../api'
|
||||
import {
|
||||
fetchChampionshipHub,
|
||||
fetchNews,
|
||||
fetchNewsArticle,
|
||||
fetchSeasonMeetings,
|
||||
fetchSeasons,
|
||||
markNewsRead,
|
||||
} from '../api'
|
||||
import {
|
||||
activeDigestWindow,
|
||||
filterByTag,
|
||||
groupByWindow,
|
||||
gpWindows,
|
||||
itemsForWindow,
|
||||
sinceLastLabel,
|
||||
sortWindowBucketsNewestFirst,
|
||||
tagColour,
|
||||
tagItems,
|
||||
topTags,
|
||||
type DigestTag,
|
||||
type TaggedNewsItem,
|
||||
} from '../lib/digest'
|
||||
import { stripHtml, timeAgo } from '../utils'
|
||||
import type { ArticleContent, NewsItem } from '../types'
|
||||
import '../styles/digest.css'
|
||||
|
||||
type Category = 'all' | 'official' | 'news' | 'video'
|
||||
|
||||
const PAGE_SIZE = 16
|
||||
|
||||
const CATEGORY_LABELS: Record<Category, string> = {
|
||||
all: 'All',
|
||||
official: 'Official',
|
||||
@@ -71,6 +91,31 @@ function CategoryTabs({
|
||||
)
|
||||
}
|
||||
|
||||
function TagChip({
|
||||
tag,
|
||||
active,
|
||||
onClick,
|
||||
className = 'digest-tag-chip',
|
||||
}: {
|
||||
tag: DigestTag
|
||||
active?: boolean
|
||||
onClick?: () => void
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`${className}${active ? ' active' : ''}`}
|
||||
style={{ '--tag-colour': tagColour(tag.colour) } as React.CSSProperties}
|
||||
onClick={onClick}
|
||||
aria-pressed={active}
|
||||
>
|
||||
<span className="digest-tag-dot" aria-hidden="true" />
|
||||
{tag.label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function OGImage({ url, title }: { url?: string; title: string }) {
|
||||
const [failed, setFailed] = useState(false)
|
||||
const initial = (title[0] ?? '?').toUpperCase()
|
||||
@@ -98,11 +143,15 @@ function OGImage({ url, title }: { url?: string; title: string }) {
|
||||
function BriefingCard({
|
||||
item,
|
||||
isActive,
|
||||
activeTag,
|
||||
onSelect,
|
||||
onTagClick,
|
||||
}: {
|
||||
item: NewsItem
|
||||
item: TaggedNewsItem
|
||||
isActive: boolean
|
||||
activeTag: string | null
|
||||
onSelect: (item: NewsItem) => void
|
||||
onTagClick: (tag: DigestTag) => void
|
||||
}) {
|
||||
const isRead = !!item.read_at
|
||||
const isVideo = categoryOf(item) === 'video'
|
||||
@@ -129,6 +178,25 @@ function BriefingCard({
|
||||
{stripHtml(item.og_description || item.summary || '')}
|
||||
</p>
|
||||
)}
|
||||
{item.tags.length > 0 && (
|
||||
<div className="bp-card-tags">
|
||||
{item.tags.map((tag) => (
|
||||
<button
|
||||
key={tag.key}
|
||||
type="button"
|
||||
className={`bp-card-tag${activeTag === tag.key ? ' active' : ''}`}
|
||||
style={{ '--tag-colour': tagColour(tag.colour) } as React.CSSProperties}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onTagClick(tag)
|
||||
}}
|
||||
>
|
||||
<span className="digest-tag-dot" aria-hidden="true" />
|
||||
{tag.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
@@ -146,7 +214,6 @@ function ReaderPanel({
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
@@ -155,7 +222,6 @@ function ReaderPanel({
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [onClose])
|
||||
|
||||
// Fetch article when item changes
|
||||
useEffect(() => {
|
||||
if (!item) {
|
||||
setArticle(null)
|
||||
@@ -175,9 +241,14 @@ function ReaderPanel({
|
||||
.catch((err) => { setError(String(err)); setLoading(false) })
|
||||
}, [item?.url, item ? categoryOf(item) : ''])
|
||||
|
||||
// Scroll panel to top when item changes
|
||||
useEffect(() => {
|
||||
panelRef.current?.scrollTo({ top: 0 })
|
||||
const panel = panelRef.current
|
||||
if (!panel) return
|
||||
if (typeof panel.scrollTo === 'function') {
|
||||
panel.scrollTo({ top: 0 })
|
||||
} else {
|
||||
panel.scrollTop = 0
|
||||
}
|
||||
}, [item?.url])
|
||||
|
||||
const isOpen = item !== null
|
||||
@@ -297,7 +368,6 @@ function ReaderPanel({
|
||||
{article && !loading && article.content && (
|
||||
<div
|
||||
className="bp-reader-body"
|
||||
// readability strips scripts/iframes; sources are all known news outlets
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html: article.content }}
|
||||
/>
|
||||
@@ -332,8 +402,9 @@ function ReaderPanel({
|
||||
export function BriefingPage() {
|
||||
const [activeCategory, setActiveCategory] = useState<Category>('all')
|
||||
const [selectedItem, setSelectedItem] = useState<NewsItem | null>(null)
|
||||
const [page, setPage] = useState(1)
|
||||
const [activeTag, setActiveTag] = useState<string | null>(null)
|
||||
const queryClient = useQueryClient()
|
||||
const now = useMemo(() => new Date(), [])
|
||||
|
||||
const { data: allNews = [], isLoading, isError } = useQuery({
|
||||
queryKey: ['news'],
|
||||
@@ -341,13 +412,74 @@ export function BriefingPage() {
|
||||
staleTime: 60_000,
|
||||
})
|
||||
|
||||
const filtered = allNews.filter(
|
||||
(item) => activeCategory === 'all' || categoryOf(item) === activeCategory,
|
||||
const seasonsQuery = useQuery({
|
||||
queryKey: ['seasons'],
|
||||
queryFn: fetchSeasons,
|
||||
})
|
||||
const latestSeason = seasonsQuery.data?.[0] ?? null
|
||||
|
||||
const meetingsQuery = useQuery({
|
||||
queryKey: ['season-meetings', latestSeason],
|
||||
queryFn: () => fetchSeasonMeetings(latestSeason!),
|
||||
enabled: latestSeason != null,
|
||||
})
|
||||
|
||||
const hubQuery = useQuery({
|
||||
queryKey: ['championship-hub', latestSeason],
|
||||
queryFn: () => fetchChampionshipHub(latestSeason!),
|
||||
enabled: latestSeason != null,
|
||||
})
|
||||
|
||||
const meetings = meetingsQuery.data ?? []
|
||||
const hub = hubQuery.data
|
||||
|
||||
const taggedNews = useMemo(
|
||||
() => tagItems(allNews, hub?.drivers ?? [], hub?.teams ?? []),
|
||||
[allNews, hub],
|
||||
)
|
||||
const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
|
||||
const safePage = Math.min(page, pageCount)
|
||||
const pageStart = (safePage - 1) * PAGE_SIZE
|
||||
const pagedItems = filtered.slice(pageStart, pageStart + PAGE_SIZE)
|
||||
|
||||
const categoryFiltered = useMemo(
|
||||
() => taggedNews.filter(
|
||||
(item) => activeCategory === 'all' || categoryOf(item) === activeCategory,
|
||||
),
|
||||
[taggedNews, activeCategory],
|
||||
)
|
||||
|
||||
const tagFiltered = useMemo(
|
||||
() => filterByTag(categoryFiltered, activeTag),
|
||||
[categoryFiltered, activeTag],
|
||||
)
|
||||
|
||||
const windows = useMemo(() => gpWindows(meetings, now), [meetings, now])
|
||||
const grouped = useMemo(() => groupByWindow(tagFiltered, windows), [tagFiltered, windows])
|
||||
const windowSections = useMemo(
|
||||
() => sortWindowBucketsNewestFirst(grouped.windows),
|
||||
[grouped.windows],
|
||||
)
|
||||
|
||||
const activeWindow = useMemo(
|
||||
() => activeDigestWindow(windows, meetings, now),
|
||||
[windows, meetings, now],
|
||||
)
|
||||
|
||||
const sinceLastItems = useMemo(
|
||||
() => itemsForWindow(tagFiltered, activeWindow),
|
||||
[tagFiltered, activeWindow],
|
||||
)
|
||||
|
||||
const sinceLastTags = useMemo(() => topTags(sinceLastItems), [sinceLastItems])
|
||||
const sinceLabel = sinceLastLabel(meetings, now)
|
||||
|
||||
const taggedByUrl = useMemo(() => {
|
||||
const map = new Map<string, TaggedNewsItem>()
|
||||
for (const item of tagFiltered) map.set(item.url, item)
|
||||
return map
|
||||
}, [tagFiltered])
|
||||
|
||||
const recentTagged = useMemo(() => {
|
||||
const urls = new Set(grouped.recent.map((item) => item.url))
|
||||
return tagFiltered.filter((item) => urls.has(item.url))
|
||||
}, [grouped.recent, tagFiltered])
|
||||
|
||||
const counts: Record<Category, number> = {
|
||||
all: allNews.length,
|
||||
@@ -374,22 +506,14 @@ export function BriefingPage() {
|
||||
|
||||
const handleClose = useCallback(() => setSelectedItem(null), [])
|
||||
|
||||
useEffect(() => {
|
||||
setPage((current) => Math.min(current, pageCount))
|
||||
}, [pageCount])
|
||||
|
||||
const handlePageChange = useCallback(
|
||||
(nextPage: number) => {
|
||||
setPage(Math.min(Math.max(nextPage, 1), pageCount))
|
||||
setSelectedItem(null)
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
},
|
||||
[pageCount],
|
||||
)
|
||||
const handleTagClick = useCallback((tag: DigestTag) => {
|
||||
setActiveTag((current) => (current === tag.key ? null : tag.key))
|
||||
setSelectedItem(null)
|
||||
}, [])
|
||||
|
||||
const unreadCount = allNews.filter((i) => !i.read_at).length
|
||||
const pageEnd = Math.min(pageStart + pagedItems.length, filtered.length)
|
||||
const showPagination = filtered.length > PAGE_SIZE
|
||||
const hasDigest = meetings.length > 0
|
||||
const showEmpty = tagFiltered.length === 0 && grouped.recent.length === 0
|
||||
|
||||
return (
|
||||
<div className="bp-page" data-testid="briefing-page">
|
||||
@@ -408,74 +532,106 @@ export function BriefingPage() {
|
||||
<CategoryTabs
|
||||
active={activeCategory}
|
||||
counts={counts}
|
||||
onChange={(c) => { setActiveCategory(c); setSelectedItem(null); setPage(1) }}
|
||||
onChange={(c) => {
|
||||
setActiveCategory(c)
|
||||
setSelectedItem(null)
|
||||
setActiveTag(null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
{hasDigest && (
|
||||
<div className="digest-sticky" data-testid="digest-sticky-header">
|
||||
<div className="digest-sticky-head">
|
||||
<h2 className="digest-sticky-title">Since {sinceLabel}</h2>
|
||||
<span className="digest-sticky-count">
|
||||
{sinceLastItems.length} item{sinceLastItems.length === 1 ? '' : 's'}
|
||||
</span>
|
||||
</div>
|
||||
{(sinceLastTags.length > 0 || activeTag) && (
|
||||
<div className="digest-sticky-tags">
|
||||
{sinceLastTags.map((tag) => (
|
||||
<TagChip
|
||||
key={tag.key}
|
||||
tag={tag}
|
||||
active={activeTag === tag.key}
|
||||
onClick={() => handleTagClick(tag)}
|
||||
/>
|
||||
))}
|
||||
{activeTag && (
|
||||
<button
|
||||
type="button"
|
||||
className="digest-filter-clear"
|
||||
onClick={() => setActiveTag(null)}
|
||||
data-testid="digest-filter-clear"
|
||||
>
|
||||
Clear filter
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showEmpty ? (
|
||||
<div className="bp-empty">
|
||||
No {activeCategory !== 'all' ? activeCategory : ''} items available.
|
||||
Run <code>box-box --ingest-news</code> to refresh feeds.
|
||||
{activeTag ? ' Try clearing the tag filter.' : ''}
|
||||
{!activeTag && (
|
||||
<>
|
||||
{' '}
|
||||
Run <code>box-box --ingest-news</code> to refresh feeds.
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{showPagination && (
|
||||
<div className="bp-pagination bp-pagination-top">
|
||||
<span className="bp-pagination-meta mono">
|
||||
{pageStart + 1}-{pageEnd} of {filtered.length}
|
||||
</span>
|
||||
<div className="bp-pagination-actions">
|
||||
<button
|
||||
className="bp-page-btn"
|
||||
onClick={() => handlePageChange(safePage - 1)}
|
||||
disabled={safePage === 1}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="bp-page-current mono">
|
||||
Page {safePage} / {pageCount}
|
||||
</span>
|
||||
<button
|
||||
className="bp-page-btn"
|
||||
onClick={() => handlePageChange(safePage + 1)}
|
||||
disabled={safePage === pageCount}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
{windowSections.map(({ window, items }) => (
|
||||
<section
|
||||
key={window.meeting_key}
|
||||
className="digest-section"
|
||||
data-testid={`digest-window-${window.meeting_key}`}
|
||||
>
|
||||
<div className="digest-section-head">
|
||||
<h3 className="digest-section-title">{window.meeting_name}</h3>
|
||||
<span className="digest-section-count">{items.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
|
||||
{items.map((item) => {
|
||||
const tagged = taggedByUrl.get(item.url) ?? { ...item, tags: [] }
|
||||
return (
|
||||
<BriefingCard
|
||||
key={item.url}
|
||||
item={tagged}
|
||||
isActive={selectedItem?.url === item.url}
|
||||
activeTag={activeTag}
|
||||
onSelect={handleSelect}
|
||||
onTagClick={handleTagClick}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
<div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
|
||||
{pagedItems.map((item) => (
|
||||
<BriefingCard
|
||||
key={item.url}
|
||||
item={item}
|
||||
isActive={selectedItem?.url === item.url}
|
||||
onSelect={handleSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{showPagination && (
|
||||
<div className="bp-pagination bp-pagination-bottom">
|
||||
<button
|
||||
className="bp-page-btn"
|
||||
onClick={() => handlePageChange(safePage - 1)}
|
||||
disabled={safePage === 1}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="bp-page-current mono">
|
||||
Page {safePage} / {pageCount}
|
||||
</span>
|
||||
<button
|
||||
className="bp-page-btn"
|
||||
onClick={() => handlePageChange(safePage + 1)}
|
||||
disabled={safePage === pageCount}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
{recentTagged.length > 0 && (
|
||||
<section className="digest-section digest-recent-section" data-testid="digest-recent">
|
||||
<div className="digest-section-head">
|
||||
<h3 className="digest-section-title">Recent</h3>
|
||||
<span className="digest-section-count">{recentTagged.length}</span>
|
||||
</div>
|
||||
<div className={`bp-grid${selectedItem ? ' bp-grid-narrow' : ''}`}>
|
||||
{recentTagged.map((item) => (
|
||||
<BriefingCard
|
||||
key={item.url}
|
||||
item={item}
|
||||
isActive={selectedItem?.url === item.url}
|
||||
activeTag={activeTag}
|
||||
onSelect={handleSelect}
|
||||
onTagClick={handleTagClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
178
frontend/src/styles/digest.css
Normal file
178
frontend/src/styles/digest.css
Normal file
@@ -0,0 +1,178 @@
|
||||
/* ── Calendar-aware paddock digest ── */
|
||||
|
||||
.digest-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
margin-bottom: var(--s5);
|
||||
padding: var(--s4) var(--s5);
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.digest-sticky-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--s3);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--s3);
|
||||
}
|
||||
|
||||
.digest-sticky-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.digest-sticky-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-3);
|
||||
font-family: var(--f-mono);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.digest-sticky-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--s2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.digest-tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--s2);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-2);
|
||||
background: var(--surface);
|
||||
color: var(--text-2);
|
||||
font-size: 11px;
|
||||
font-family: var(--f-mono);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.1s, color 0.1s, background 0.1s;
|
||||
}
|
||||
|
||||
.digest-tag-chip:hover {
|
||||
color: var(--text);
|
||||
background: var(--surface-h);
|
||||
}
|
||||
|
||||
.digest-tag-chip.active {
|
||||
color: var(--text);
|
||||
border-color: var(--tag-colour, var(--red));
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag-colour, var(--red)) 35%, transparent);
|
||||
}
|
||||
|
||||
.digest-tag-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--tag-colour, var(--text-3));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.digest-filter-clear {
|
||||
padding: 2px 8px;
|
||||
border: 1px dashed var(--border-2);
|
||||
border-radius: 999px;
|
||||
background: none;
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
font-family: var(--f-mono);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.digest-filter-clear:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--border-2);
|
||||
}
|
||||
|
||||
.digest-section {
|
||||
margin-bottom: var(--s6);
|
||||
}
|
||||
|
||||
.digest-section-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--s3);
|
||||
margin-bottom: var(--s4);
|
||||
padding-bottom: var(--s3);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.digest-section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.digest-section-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-3);
|
||||
font-family: var(--f-mono);
|
||||
}
|
||||
|
||||
.digest-recent-section .digest-section-title {
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.bp-card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--s2);
|
||||
margin-top: var(--s2);
|
||||
}
|
||||
|
||||
.bp-card-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--text-2);
|
||||
font-size: 10px;
|
||||
font-family: var(--f-mono);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bp-card-tag:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--border-2);
|
||||
}
|
||||
|
||||
.bp-card-tag.active {
|
||||
border-color: var(--tag-colour, var(--red));
|
||||
}
|
||||
|
||||
.cc-brief-digest-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s2);
|
||||
margin-bottom: var(--s3);
|
||||
font-size: 11px;
|
||||
color: var(--text-3);
|
||||
font-family: var(--f-mono);
|
||||
}
|
||||
|
||||
.cc-brief-digest-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--s2);
|
||||
}
|
||||
|
||||
.cc-brief-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-2);
|
||||
font-family: var(--f-mono);
|
||||
}
|
||||
209
frontend/src/test/BriefingPage.test.tsx
Normal file
209
frontend/src/test/BriefingPage.test.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, waitFor, fireEvent, within } from '@testing-library/react'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { BriefingPage } from '../pages/BriefingPage'
|
||||
import type { ChampHubDriver, ChampHubTeam, ChampionshipHub, Meeting, NewsItem } from '../types'
|
||||
|
||||
vi.mock('../api', () => ({
|
||||
fetchNews: vi.fn(),
|
||||
fetchNewsArticle: vi.fn(),
|
||||
markNewsRead: vi.fn(),
|
||||
fetchSeasons: vi.fn(),
|
||||
fetchSeasonMeetings: vi.fn(),
|
||||
fetchChampionshipHub: vi.fn(),
|
||||
}))
|
||||
|
||||
import {
|
||||
fetchNews,
|
||||
fetchNewsArticle,
|
||||
fetchSeasons,
|
||||
fetchSeasonMeetings,
|
||||
fetchChampionshipHub,
|
||||
markNewsRead,
|
||||
} from '../api'
|
||||
|
||||
const mockFetchNews = vi.mocked(fetchNews)
|
||||
const mockFetchNewsArticle = vi.mocked(fetchNewsArticle)
|
||||
const mockFetchSeasons = vi.mocked(fetchSeasons)
|
||||
const mockFetchSeasonMeetings = vi.mocked(fetchSeasonMeetings)
|
||||
const mockFetchHub = vi.mocked(fetchChampionshipHub)
|
||||
const mockMarkNewsRead = vi.mocked(markNewsRead)
|
||||
|
||||
const bahrain: Meeting = {
|
||||
meeting_key: 1,
|
||||
meeting_name: 'Bahrain',
|
||||
meeting_official_name: 'Bahrain GP',
|
||||
location: 'Sakhir',
|
||||
country_name: 'Bahrain',
|
||||
country_code: 'BRN',
|
||||
country_flag: '',
|
||||
circuit_short_name: 'Sakhir',
|
||||
date_start: '2025-03-14T00:00:00+00:00',
|
||||
date_end: '2025-03-16T23:59:59+00:00',
|
||||
year: 2025,
|
||||
}
|
||||
|
||||
const monaco: Meeting = {
|
||||
meeting_key: 2,
|
||||
meeting_name: 'Monaco',
|
||||
meeting_official_name: 'Monaco GP',
|
||||
location: 'Monaco',
|
||||
country_name: 'Monaco',
|
||||
country_code: 'MON',
|
||||
country_flag: '',
|
||||
circuit_short_name: 'Monaco',
|
||||
date_start: '2025-05-23T00:00:00+00:00',
|
||||
date_end: '2025-05-25T23:59:59+00:00',
|
||||
year: 2025,
|
||||
}
|
||||
|
||||
const drivers: ChampHubDriver[] = [
|
||||
{
|
||||
driver_number: 1,
|
||||
name_acronym: 'VER',
|
||||
full_name: 'Max Verstappen',
|
||||
team_name: 'Red Bull',
|
||||
team_colour: '3671c6',
|
||||
points: 100,
|
||||
position: 1,
|
||||
wins: 3,
|
||||
podiums: 5,
|
||||
poles: 2,
|
||||
form: [25, 18, 25],
|
||||
cumulative: [25, 43, 68, 100],
|
||||
teammate_wins: 4,
|
||||
teammate_losses: 1,
|
||||
},
|
||||
{
|
||||
driver_number: 4,
|
||||
name_acronym: 'NOR',
|
||||
full_name: 'Lando Norris',
|
||||
team_name: 'McLaren',
|
||||
team_colour: 'ff8000',
|
||||
points: 80,
|
||||
position: 2,
|
||||
wins: 1,
|
||||
podiums: 4,
|
||||
poles: 1,
|
||||
form: [18, 25, 18],
|
||||
cumulative: [18, 36, 54, 80],
|
||||
teammate_wins: 3,
|
||||
teammate_losses: 2,
|
||||
},
|
||||
]
|
||||
|
||||
const teams: ChampHubTeam[] = [
|
||||
{ team_name: 'Red Bull', team_colour: '3671c6', points: 150, position: 1, wins: 4 },
|
||||
{ team_name: 'McLaren', team_colour: 'ff8000', points: 120, position: 2, wins: 2 },
|
||||
]
|
||||
|
||||
const hub: ChampionshipHub = {
|
||||
season: 2025,
|
||||
round: 2,
|
||||
total_rounds: 2,
|
||||
rounds_left: 0,
|
||||
last_race: 'Monaco GP',
|
||||
round_labels: ['R1', 'R2'],
|
||||
drivers,
|
||||
teams,
|
||||
}
|
||||
|
||||
const newsItems: NewsItem[] = [
|
||||
{
|
||||
source: 'autosport-f1',
|
||||
title: 'Verstappen sets the pace in Bahrain',
|
||||
url: 'https://example.com/bahrain-ver',
|
||||
published_at: '2025-03-15T10:00:00Z',
|
||||
fetched_at: '2025-03-15T11:00:00Z',
|
||||
summary: 'Red Bull dominate opening practice',
|
||||
},
|
||||
{
|
||||
source: 'racefans-f1',
|
||||
title: 'Norris targets Monaco upgrade',
|
||||
url: 'https://example.com/monaco-nor',
|
||||
published_at: '2025-04-20T10:00:00Z',
|
||||
fetched_at: '2025-04-20T11:00:00Z',
|
||||
summary: 'McLaren bring new floor',
|
||||
},
|
||||
{
|
||||
source: 'bbc-f1',
|
||||
title: 'Undated paddock rumour',
|
||||
url: 'https://example.com/undated',
|
||||
fetched_at: '2025-04-21T11:00:00Z',
|
||||
},
|
||||
]
|
||||
|
||||
function renderPage() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
})
|
||||
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BriefingPage />
|
||||
</QueryClientProvider>,
|
||||
)
|
||||
}
|
||||
|
||||
describe('BriefingPage digest layout', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
vi.setSystemTime(new Date('2025-04-10T12:00:00Z'))
|
||||
mockFetchSeasons.mockResolvedValue([2025])
|
||||
mockFetchSeasonMeetings.mockResolvedValue([bahrain, monaco])
|
||||
mockFetchHub.mockResolvedValue(hub)
|
||||
mockFetchNews.mockResolvedValue(newsItems)
|
||||
mockFetchNewsArticle.mockResolvedValue({ title: 'Article', content: '<p>Body</p>' })
|
||||
mockMarkNewsRead.mockResolvedValue(undefined)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers()
|
||||
})
|
||||
|
||||
it('renders sticky since-last header, GP sections, and recent bucket', async () => {
|
||||
renderPage()
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('digest-sticky-header')).toHaveTextContent('Since Bahrain')
|
||||
})
|
||||
|
||||
expect(screen.getByTestId('digest-window-2')).toHaveTextContent('Monaco')
|
||||
expect(screen.getByTestId('digest-window-1')).toHaveTextContent('Bahrain')
|
||||
expect(screen.getByTestId('digest-recent')).toHaveTextContent('Undated paddock rumour')
|
||||
expect(screen.getByText('Verstappen sets the pace in Bahrain')).toBeInTheDocument()
|
||||
expect(screen.getByText('Norris targets Monaco upgrade')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('filters the digest when a tag chip is clicked', async () => {
|
||||
renderPage()
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('digest-sticky-header')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
const sticky = screen.getByTestId('digest-sticky-header')
|
||||
const norTag = within(sticky).getByRole('button', { name: /^NOR$/i })
|
||||
fireEvent.click(norTag)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Verstappen sets the pace in Bahrain')).not.toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByText('Norris targets Monaco upgrade')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('digest-filter-clear')).toBeInTheDocument()
|
||||
|
||||
fireEvent.click(screen.getByTestId('digest-filter-clear'))
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Verstappen sets the pace in Bahrain')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('preserves category tabs', async () => {
|
||||
renderPage()
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('tab', { name: /All/i })).toBeInTheDocument()
|
||||
})
|
||||
expect(screen.getByRole('tab', { name: /News/i })).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
265
frontend/src/test/digest.test.ts
Normal file
265
frontend/src/test/digest.test.ts
Normal file
@@ -0,0 +1,265 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import {
|
||||
activeDigestWindow,
|
||||
filterByTag,
|
||||
groupByWindow,
|
||||
gpWindows,
|
||||
itemsForWindow,
|
||||
sinceLastLabel,
|
||||
sortWindowBucketsNewestFirst,
|
||||
tagItems,
|
||||
topTags,
|
||||
windowForDate,
|
||||
} from '../lib/digest'
|
||||
import type { ChampHubDriver, ChampHubTeam, Meeting, NewsItem } from '../types'
|
||||
|
||||
const meeting = (overrides: Partial<Meeting> = {}): Meeting => ({
|
||||
meeting_key: 1,
|
||||
meeting_name: 'Bahrain',
|
||||
meeting_official_name: 'Bahrain GP',
|
||||
location: 'Sakhir',
|
||||
country_name: 'Bahrain',
|
||||
country_code: 'BRN',
|
||||
country_flag: '',
|
||||
circuit_short_name: 'Sakhir',
|
||||
date_start: '2025-03-14T00:00:00+00:00',
|
||||
date_end: '2025-03-16T23:59:59+00:00',
|
||||
year: 2025,
|
||||
...overrides,
|
||||
})
|
||||
|
||||
const news = (overrides: Partial<NewsItem> = {}): NewsItem => ({
|
||||
source: 'autosport-f1',
|
||||
title: 'Headline',
|
||||
url: `https://example.com/${Math.random()}`,
|
||||
fetched_at: '2025-04-01T12:00:00Z',
|
||||
...overrides,
|
||||
})
|
||||
|
||||
const driver = (over: Partial<ChampHubDriver>): ChampHubDriver => ({
|
||||
driver_number: 1,
|
||||
name_acronym: 'VER',
|
||||
full_name: 'Max Verstappen',
|
||||
team_name: 'Red Bull',
|
||||
team_colour: '3671c6',
|
||||
points: 100,
|
||||
position: 1,
|
||||
wins: 3,
|
||||
podiums: 5,
|
||||
poles: 2,
|
||||
form: [25, 18, 25],
|
||||
cumulative: [25, 43, 68, 100],
|
||||
teammate_wins: 4,
|
||||
teammate_losses: 1,
|
||||
...over,
|
||||
})
|
||||
|
||||
const team = (over: Partial<ChampHubTeam>): ChampHubTeam => ({
|
||||
team_name: 'Red Bull',
|
||||
team_colour: '3671c6',
|
||||
points: 150,
|
||||
position: 1,
|
||||
wins: 4,
|
||||
...over,
|
||||
})
|
||||
|
||||
describe('gpWindows', () => {
|
||||
const bahrain = meeting({ meeting_key: 1, meeting_name: 'Bahrain' })
|
||||
const monaco = meeting({
|
||||
meeting_key: 2,
|
||||
meeting_name: 'Monaco',
|
||||
date_start: '2025-05-23T00:00:00+00:00',
|
||||
date_end: '2025-05-25T23:59:59+00:00',
|
||||
})
|
||||
const canada = meeting({
|
||||
meeting_key: 3,
|
||||
meeting_name: 'Canada',
|
||||
date_start: '2025-06-13T00:00:00+00:00',
|
||||
date_end: '2025-06-15T23:59:59+00:00',
|
||||
})
|
||||
|
||||
it('derives inter-race windows mid-season', () => {
|
||||
const now = new Date('2025-04-10T12:00:00Z')
|
||||
const windows = gpWindows([bahrain, monaco, canada], now)
|
||||
|
||||
expect(windows).toHaveLength(3)
|
||||
expect(windows[0].start).toBeNull()
|
||||
expect(windows[0].end?.toISOString()).toBe(new Date('2025-05-23T00:00:00+00:00').toISOString())
|
||||
expect(windows[1].start?.toISOString()).toBe(new Date('2025-03-16T23:59:59+00:00').toISOString())
|
||||
expect(windows[1].end?.toISOString()).toBe(new Date('2025-06-13T00:00:00+00:00').toISOString())
|
||||
expect(windows[2].start?.toISOString()).toBe(new Date('2025-05-25T23:59:59+00:00').toISOString())
|
||||
expect(windows[2].end).toBeNull()
|
||||
})
|
||||
|
||||
it('handles before the first race of the season', () => {
|
||||
const now = new Date('2025-01-01T00:00:00Z')
|
||||
const windows = gpWindows([bahrain, monaco], now)
|
||||
expect(windows[0].start).toBeNull()
|
||||
expect(activeDigestWindow(windows, [bahrain, monaco], now)?.meeting_name).toBe('Bahrain')
|
||||
expect(sinceLastLabel([bahrain, monaco], now)).toBe('Before Bahrain')
|
||||
})
|
||||
|
||||
it('handles after the final race of the season', () => {
|
||||
const now = new Date('2025-12-01T00:00:00Z')
|
||||
const windows = gpWindows([bahrain, monaco], now)
|
||||
expect(activeDigestWindow(windows, [bahrain, monaco], now)?.meeting_name).toBe('Monaco')
|
||||
expect(sinceLastLabel([bahrain, monaco], now)).toBe('Monaco')
|
||||
expect(windows[1].end).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('groupByWindow', () => {
|
||||
const bahrain = meeting({ meeting_key: 1 })
|
||||
const monaco = meeting({
|
||||
meeting_key: 2,
|
||||
date_start: '2025-05-23T00:00:00+00:00',
|
||||
date_end: '2025-05-25T23:59:59+00:00',
|
||||
})
|
||||
const windows = gpWindows([bahrain, monaco], new Date('2025-04-10T12:00:00Z'))
|
||||
|
||||
it('buckets dated items into the matching GP window', () => {
|
||||
const items = [
|
||||
news({ url: 'https://a', published_at: '2025-03-10T10:00:00Z', title: 'Pre-Bahrain' }),
|
||||
news({ url: 'https://b', published_at: '2025-04-05T10:00:00Z', title: 'Between races' }),
|
||||
news({ url: 'https://c', published_at: '2025-05-24T10:00:00Z', title: 'Monaco weekend' }),
|
||||
]
|
||||
|
||||
const grouped = groupByWindow(items, windows)
|
||||
const bahrainItems = grouped.windows.find((entry) => entry.window.meeting_key === 1)?.items ?? []
|
||||
const monacoItems = grouped.windows.find((entry) => entry.window.meeting_key === 2)?.items ?? []
|
||||
|
||||
expect(bahrainItems).toHaveLength(1)
|
||||
expect(bahrainItems[0].title).toBe('Pre-Bahrain')
|
||||
expect(monacoItems).toHaveLength(2)
|
||||
expect(monacoItems.map((item) => item.title)).toEqual(['Between races', 'Monaco weekend'])
|
||||
})
|
||||
|
||||
it('puts undated items in the recent bucket', () => {
|
||||
const items = [
|
||||
news({ url: 'https://u', title: 'Undated story' }),
|
||||
news({ url: 'https://d', published_at: '2025-04-05T10:00:00Z' }),
|
||||
]
|
||||
const grouped = groupByWindow(items, windows)
|
||||
expect(grouped.recent).toHaveLength(1)
|
||||
expect(grouped.recent[0].url).toBe('https://u')
|
||||
})
|
||||
|
||||
it('sorts window buckets newest first for display', () => {
|
||||
const items = [
|
||||
news({ published_at: '2025-03-10T10:00:00Z' }),
|
||||
news({ published_at: '2025-05-24T10:00:00Z' }),
|
||||
]
|
||||
const grouped = groupByWindow(items, windows)
|
||||
const sorted = sortWindowBucketsNewestFirst(grouped.windows)
|
||||
expect(sorted[0].window.meeting_key).toBe(2)
|
||||
expect(sorted[1].window.meeting_key).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('tagItems', () => {
|
||||
const drivers = [
|
||||
driver({ name_acronym: 'VER', full_name: 'Max Verstappen', team_name: 'Red Bull' }),
|
||||
driver({
|
||||
driver_number: 4,
|
||||
name_acronym: 'NOR',
|
||||
full_name: 'Lando Norris',
|
||||
team_name: 'McLaren',
|
||||
team_colour: 'ff8000',
|
||||
}),
|
||||
]
|
||||
const teams = [
|
||||
team({ team_name: 'Red Bull' }),
|
||||
team({ team_name: 'McLaren', team_colour: 'ff8000' }),
|
||||
]
|
||||
|
||||
it('tags drivers and teams case-insensitively', () => {
|
||||
const [item] = tagItems(
|
||||
[news({ title: 'ver leads mclaren in practice', summary: 'Norris close behind' })],
|
||||
drivers,
|
||||
teams,
|
||||
)
|
||||
const labels = item.tags.map((tag) => tag.label).sort()
|
||||
expect(labels).toEqual(['McLaren', 'NOR', 'VER'])
|
||||
})
|
||||
|
||||
it('returns no tags when nothing matches', () => {
|
||||
const [item] = tagItems(
|
||||
[news({ title: 'Generic paddock update' })],
|
||||
drivers,
|
||||
teams,
|
||||
)
|
||||
expect(item.tags).toEqual([])
|
||||
})
|
||||
|
||||
it('prefers the longest overlapping match', () => {
|
||||
const [item] = tagItems(
|
||||
[news({ title: 'Max Verstappen extends championship lead' })],
|
||||
drivers,
|
||||
teams,
|
||||
)
|
||||
expect(item.tags).toHaveLength(1)
|
||||
expect(item.tags[0].label).toBe('VER')
|
||||
})
|
||||
|
||||
it('matches a driver last name inside prose', () => {
|
||||
const [item] = tagItems(
|
||||
[news({ title: 'Verstappen was untouchable in qualifying' })],
|
||||
drivers,
|
||||
teams,
|
||||
)
|
||||
expect(item.tags.some((tag) => tag.label === 'VER')).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('digest helpers', () => {
|
||||
it('collects top tags by frequency', () => {
|
||||
const tagged = tagItems(
|
||||
[
|
||||
news({ title: 'VER wins', url: 'https://a' }),
|
||||
news({ title: 'VER dominates', url: 'https://b' }),
|
||||
news({ title: 'Norris podium', url: 'https://c' }),
|
||||
],
|
||||
[driver({}), driver({ driver_number: 4, name_acronym: 'NOR', full_name: 'Lando Norris', team_name: 'McLaren' })],
|
||||
[team({}), team({ team_name: 'McLaren', team_colour: 'ff8000' })],
|
||||
)
|
||||
expect(topTags(tagged, 2).map((tag) => tag.label)).toEqual(['VER', 'NOR'])
|
||||
})
|
||||
|
||||
it('filters items by tag key', () => {
|
||||
const tagged = tagItems(
|
||||
[
|
||||
news({ title: 'VER wins', url: 'https://a' }),
|
||||
news({ title: 'Neutral headline', url: 'https://b' }),
|
||||
],
|
||||
[driver({})],
|
||||
[team({})],
|
||||
)
|
||||
const filtered = filterByTag(tagged, 'driver:VER')
|
||||
expect(filtered).toHaveLength(1)
|
||||
expect(filtered[0].url).toBe('https://a')
|
||||
})
|
||||
|
||||
it('selects items for the active digest window', () => {
|
||||
const bahrain = meeting({ meeting_key: 1 })
|
||||
const monaco = meeting({
|
||||
meeting_key: 2,
|
||||
date_start: '2025-05-23T00:00:00+00:00',
|
||||
date_end: '2025-05-25T23:59:59+00:00',
|
||||
})
|
||||
const now = new Date('2025-04-10T12:00:00Z')
|
||||
const windows = gpWindows([bahrain, monaco], now)
|
||||
const active = activeDigestWindow(windows, [bahrain, monaco], now)
|
||||
const tagged = tagItems(
|
||||
[
|
||||
news({ published_at: '2025-04-05T10:00:00Z', url: 'https://in' }),
|
||||
news({ published_at: '2025-03-10T10:00:00Z', url: 'https://out' }),
|
||||
],
|
||||
[],
|
||||
[],
|
||||
)
|
||||
const inWindow = itemsForWindow(tagged, active)
|
||||
expect(inWindow).toHaveLength(1)
|
||||
expect(inWindow[0].url).toBe('https://in')
|
||||
expect(windowForDate(windows, new Date('2025-04-05T10:00:00Z'))?.meeting_key).toBe(2)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user