Goal: We want to build a clean data-fetching layer in the React frontend that the rest of the dashboard can rely on. Rather than making raw fetch calls scattered throughout components, we want a set of reusable React hooks that encapsulate fetching, loading state, and error handling for each endpoint. This gives every dashboard view a consistent, predictable way to pull data.
Technical Description:
- Create a custom hook for each backend endpoint defined in the API contract (e.g. useRaceData, useLapData, usePositionsByBounds, etc.)
- Each hook should expose data, isLoading, and error states
- Create a shared API client (e.g. src/api/client.ts) that centralizes the base URL and any shared headers, so individual hooks don't hardcode fetch logic
- Hooks should accept the relevant input parameters matching the API spec (e.g. raceId, lapNumber, boundingBox) and pass them through to the correct endpoint
Conditions of Satisfaction:
- A reusable hook exists for every endpoint in the API contract
- Each hook correctly manages loading, success, and error states
- Hooks can be dropped into any component without additional fetch logic
Goal: We want to build a clean data-fetching layer in the React frontend that the rest of the dashboard can rely on. Rather than making raw fetch calls scattered throughout components, we want a set of reusable React hooks that encapsulate fetching, loading state, and error handling for each endpoint. This gives every dashboard view a consistent, predictable way to pull data.
Technical Description:
Conditions of Satisfaction: