Skip to content

Build the typed API integration layer that replaces hardcoded mock data in the events store #204

@greatest0fallt1me

Description

@greatest0fallt1me

Description

lib/events-store.ts ships a 16-entry hardcoded mockEvents array and fakes loadEvents/loadNextPage with setTimeout, while a fully validated NEXT_PUBLIC_API_URL is exposed via lib/env.ts and lib/config.ts but never used for fetching. This issue introduces a typed API client and wires the store to fetch events (with pagination) from config.api.url, keeping mock data only as a test fallback. The Event, EventFilters, EventSort, and PaginationState types already exist in types/events.ts.

Requirements and context

  • Create lib/api/events.ts exporting typed functions (e.g. fetchEvents(params) and fetchEventsPage(params)) that call config.api.url and parse responses into Event[] from types/events.ts.
  • Refactor loadEvents and loadNextPage in lib/events-store.ts to call the client; preserve the existing loading/error/isFetchingNextPage/hasNextPage/lastFetchTime state contract and the isDataStale() 60s threshold.
  • Keep mockEvents available behind a guard (e.g. when NEXT_PUBLIC_API_URL resolves to the localhost default) so local dev and tests still work without a backend.
  • Non-functional: handle non-2xx responses and network errors by setting error and leaving prior data intact; no any leakage across the client boundary; no behavioral change to filtering/sorting which stays client-side.
  • Validate response shape (the repo already depends on zod) before committing it to the store.

Acceptance criteria

  • lib/api/events.ts exists with typed, exported fetch functions that read config.api.url.
  • loadEvents/loadNextPage use the client and preserve the existing store state contract.
  • Errors set store.error without clearing already-loaded events.
  • Responses are schema-validated before entering the store.
  • Mock fallback still works when no real API URL is configured.
  • New modules reach >=85% line coverage.

Suggested execution

1. Fork the repo and create a branchgit checkout -b feature/events-api-layer.

2. Implement changes — add lib/api/events.ts; refactor lib/events-store.ts; reuse lib/config.ts/lib/env.ts for the base URL.

3. Write/extend tests — Jest + React Testing Library with pnpm; add lib/api/__tests__/events.test.ts mocking fetch, asserting URL/params, success parsing, and error handling. Follow the store-test style in lib/__tests__/scroll-position-store.test.ts.

4. Test and commit

pnpm install
pnpm type-check
pnpm test
pnpm build

Example commit message

feat(api): add typed events API client and wire it into the events store

Guidelines

  • Aim for >=85% coverage on the new client and changed store paths.
  • Document the expected response contract and required env vars in docs/; keep loading/empty/error UX in EventsTable working unchanged.
  • Timeframe: 96 hours.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions