Skip to content

feat: removed the unused meeting api, and cleaned up the code a little #20

Merged
merged 1 commit into from
Sep 16, 2026
+23 −294
Merged

feat: removed the unused meeting api, and cleaned up the code a little #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 0 additions & 159 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
import "./App.css";
import api from "./api/api";
import type { Session, SessionResult } from "./api/api";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";

import DriverCard from "./components/DriverCard";
import SearchAndFilter from "./components/SearchAndFilter";
import DriverDetail from "./components/DriverDetail";

const sessionDate = new Intl.DateTimeFormat("en-GB", {
dateStyle: "medium",
timeZone: "UTC",
});

type SortOrder = "none" | "asc" | "desc";

function App() {
Expand Down Expand Up @@ -61,9 +54,6 @@ function App() {
const {
getDriversWithStandings,
getAllTeamStandings,
getAllSessionResults,
getAllSessions,
getAllMeetings,
} = api();

const {
Expand All @@ -85,40 +75,6 @@ function App() {
enabled: !driversWithStandingsPending,
});

const {
data: allSessions = [],
isPending: sessionsPending,
isError: sessionsError,
} = useQuery({
queryKey: ["sessions", 2026],
queryFn: getAllSessions,
enabled: !driversWithStandingsPending,
});

const {
data: allSessionResults = [],
isPending: sessionResultsPending,
isError: sessionResultsError,
} = useQuery({
queryKey: [
"sessionResults",
2026,
allSessions.map((session) => session.session_key),
],
queryFn: () => getAllSessionResults(allSessions),
enabled: !sessionsPending && !sessionsError,
});

const {
data: allMeetings = [],
isPending: meetingsPending,
isError: meetingsError,
} = useQuery({
queryKey: ["meetings", 2026],
queryFn: getAllMeetings,
enabled: !driversWithStandingsPending,
});

const filteredDrivers = driversWithStandings
.filter((driver) => {
const matchesSearch = driver.full_name
Expand All @@ -139,8 +95,6 @@ function App() {
}
});

// Detail panel selection: Previous/Next step through the currently filtered
// list only, so it stays in sync with whatever the left list is showing.
const [selectedIndex, setSelectedIndex] = useState(0);
const clampedIndex = filteredDrivers.length
? Math.min(selectedIndex, filteredDrivers.length - 1)
Expand All @@ -156,35 +110,6 @@ function App() {
}
}

const meetingsByKey = new Map(
allMeetings.map((meeting) => [meeting.meeting_key, meeting]),
);
const sessionsByMeeting = new Map<number, Session[]>();
const orderedSessions = [...allSessions].sort(
(a, b) => Date.parse(a.date_start) - Date.parse(b.date_start),
);
for (const session of orderedSessions) {
const sessions = sessionsByMeeting.get(session.meeting_key) ?? [];
sessions.push(session);
sessionsByMeeting.set(session.meeting_key, sessions);
}

const driverNames = new Map(
driversWithStandings.map((driver) => [
driver.driver_number,
driver.full_name,
]),
);
const resultsBySession = new Map<number, SessionResult[]>();
for (const result of allSessionResults) {
const results = resultsBySession.get(result.session_key) ?? [];
results.push(result);
resultsBySession.set(result.session_key, results);
}
for (const results of resultsBySession.values()) {
results.sort((a, b) => (a.position ?? Infinity) - (b.position ?? Infinity));
}

return (
<>
<h1 className="header">F1 The Website</h1>
Expand Down Expand Up @@ -267,90 +192,6 @@ function App() {
}
/>
</div>

{sessionsError || sessionResultsError ? (
<p>Could not load session results.</p>
) : sessionsPending || sessionResultsPending || meetingsPending ? (
<p>Loading session results...</p>
) : allSessions.length === 0 ? (
<p>No sessions available yet.</p>
) : (
<section className="meeting-list" aria-labelledby="meetings-heading">
<h2 id="meetings-heading">2026 meetings</h2>
{meetingsError && (
<p>
Meeting names could not be loaded. Showing circuits and dates.
</p>
)}
{Array.from(sessionsByMeeting, ([meetingKey, sessions]) => {
const meeting = meetingsByKey.get(meetingKey);
const firstSession = sessions[0];
const lastSession = sessions[sessions.length - 1];

return (
<details className="meeting" key={meetingKey}>
<summary>
<span className="meeting-title">
{meeting?.meeting_name ?? firstSession.circuit_short_name}
</span>
<span className="meeting-meta">
{firstSession.country_name} ·{" "}
{firstSession.circuit_short_name} ·{" "}
{sessionDate.format(
new Date(meeting?.date_start ?? firstSession.date_start),
)}{" "}
–{" "}
{sessionDate.format(
new Date(meeting?.date_end ?? lastSession.date_end),
)}
</span>
</summary>
<div className="meeting-sessions">
{sessions.map((session) => {
const results =
resultsBySession.get(session.session_key) ?? [];

return (
<details
className="meeting-session"
key={session.session_key}
>
<summary>
<span>{session.session_name}</span>
<time dateTime={session.date_start}>
{sessionDate.format(new Date(session.date_start))}
</time>
</summary>
{results.length === 0 ? (
<p>
{session.is_cancelled
? "Session cancelled."
: "Results not available yet."}
</p>
) : (
<ul className="session-results">
{results.map((result) => (
<li
key={`${result.session_key}-${result.driver_number}`}
>
<span>Pos {result.position ?? "—"}:</span>
<span>
{driverNames.get(result.driver_number) ??
`Driver ${result.driver_number}`}
</span>
</li>
))}
</ul>
)}
</details>
);
})}
</div>
</details>
);
})}
</section>
)}
</>
);
}
Expand Down
Loading