Fix API field name mismatches across all pages #9

Open
opened 2026-03-18 17:52:04 +00:00 by forgejo_admin · 0 comments
Contributor

Lineage

plan-mcd-tracker → Phase 7 (SvelteKit frontend)

Repo

forgejo_admin/mcd-tracker-app

User Story

As a user navigating the app
I want pages to actually load data from the API correctly
So that I see real information instead of blank fields or errors

Context

The SvelteKit pages were built from playground HTML with made-up field names that don't match the actual API response schemas. Every page that renders API data has mismatches. This is a wiring-only fix — no design changes, no playground needed.

Known mismatches:

  • history/+page.sveltec.codec.bogo_code, r.scanned_atr.captured_at, expiry detection using wrong field
  • history/[id]/+page.svelteevent.codeevent.bogo_code
  • locations/[id]/+page.sveltecode.codecode.bogo_code, slots.usedslots.active_codes, slots.totalslots.total_slots, API returns flat array but template expects codes.active/codes.redeemed grouping, date fields need formatting
  • home/+page.svelte — leftover debug panel and console.logs from GPS debugging session

File Targets

Files to modify:

  • src/routes/history/+page.svelte — field name fixes in buildTimeline()
  • src/routes/history/[id]/+page.svelteevent.codeevent.bogo_code
  • src/routes/locations/[id]/+page.svelte — field names, client-side code grouping, date formatting, overlay refactor
  • src/routes/home/+page.svelte — remove debug panel and debug console.logs

Files NOT to touch:

  • src/routes/scan/+page.svelte — redesign handled by separate ticket
  • src/routes/+page.svelte — landing page, no API data
  • src/app.css — no style changes

Acceptance Criteria

  • Location detail page loads and renders slot counts, active codes, redeemed codes
  • History page renders timeline with correct code values and dates
  • History detail page shows correct BOGO code
  • Home page has no debug panel or debug console.logs
  • No design changes — pages look the same, just with real data instead of broken fields

Test Expectations

  • Existing Vitest tests still pass (npm run test)
  • Manual verification: sign in, navigate all pages, confirm data renders
  • Run command: npm run test

Constraints

  • Wiring fixes only — do NOT change layout, styling, or UX
  • Do NOT touch the scan flow — that's a separate ticket
  • Match API schemas exactly: CodeResponse, SlotAvailability, ReceiptResponse

Checklist

  • PR opened
  • Tests pass
  • No unrelated changes
  • plan-mcd-tracker → Phase 7
  • API schemas: mcd-tracker-api/src/mcd_tracker_api/schemas.py
### Lineage `plan-mcd-tracker` → Phase 7 (SvelteKit frontend) ### Repo `forgejo_admin/mcd-tracker-app` ### User Story As a user navigating the app I want pages to actually load data from the API correctly So that I see real information instead of blank fields or errors ### Context The SvelteKit pages were built from playground HTML with made-up field names that don't match the actual API response schemas. Every page that renders API data has mismatches. This is a wiring-only fix — no design changes, no playground needed. Known mismatches: - `history/+page.svelte` — `c.code` → `c.bogo_code`, `r.scanned_at` → `r.captured_at`, expiry detection using wrong field - `history/[id]/+page.svelte` — `event.code` → `event.bogo_code` - `locations/[id]/+page.svelte` — `code.code` → `code.bogo_code`, `slots.used` → `slots.active_codes`, `slots.total` → `slots.total_slots`, API returns flat array but template expects `codes.active`/`codes.redeemed` grouping, date fields need formatting - `home/+page.svelte` — leftover debug panel and console.logs from GPS debugging session ### File Targets Files to modify: - `src/routes/history/+page.svelte` — field name fixes in `buildTimeline()` - `src/routes/history/[id]/+page.svelte` — `event.code` → `event.bogo_code` - `src/routes/locations/[id]/+page.svelte` — field names, client-side code grouping, date formatting, overlay refactor - `src/routes/home/+page.svelte` — remove debug panel and debug console.logs Files NOT to touch: - `src/routes/scan/+page.svelte` — redesign handled by separate ticket - `src/routes/+page.svelte` — landing page, no API data - `src/app.css` — no style changes ### Acceptance Criteria - [ ] Location detail page loads and renders slot counts, active codes, redeemed codes - [ ] History page renders timeline with correct code values and dates - [ ] History detail page shows correct BOGO code - [ ] Home page has no debug panel or debug console.logs - [ ] No design changes — pages look the same, just with real data instead of broken fields ### Test Expectations - [ ] Existing Vitest tests still pass (`npm run test`) - [ ] Manual verification: sign in, navigate all pages, confirm data renders - Run command: `npm run test` ### Constraints - Wiring fixes only — do NOT change layout, styling, or UX - Do NOT touch the scan flow — that's a separate ticket - Match API schemas exactly: `CodeResponse`, `SlotAvailability`, `ReceiptResponse` ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `plan-mcd-tracker` → Phase 7 - API schemas: `mcd-tracker-api/src/mcd_tracker_api/schemas.py`
Commenting is not possible because the repository is archived.
No labels
No milestone
No project
No assignees
1 participant
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ldraney/mcd-tracker-app#9
No description provided.