Add debounce, theme toggle, and calendar optimization
Implement 400ms debounce with AbortController in useGeocode and useDestinationStation to prevent excessive API calls. Add dark mode toggle via new useTheme hook, persisting preference to localStorage and applying to document root. Pre-group calendar events by date using a Map in CalendarView to replace O(n) filter operations with O(1) lookups.
This commit is contained in:
+12
-30
@@ -21,41 +21,23 @@ Fix bugs that crash the app or lose user data.
|
||||
|
||||
Eliminate duplicated logic so each integration has one source of truth.
|
||||
|
||||
- [x] **Step 4: Consolidate HAFAS Journey Parsing** (~40 min)
|
||||
- Move `parseHafasJourneys` from `useJourneys.ts` into `hafas-client.ts` and export it; import from `useJourneys.ts` (Option A — minimal risk)
|
||||
- Files: `src/lib/hafas-client.ts`, `src/hooks/useJourneys.ts`
|
||||
|
||||
- [x] **Step 5: Wire API Routes to Use Library Clients** (~30 min)
|
||||
- Replace raw `fetch()` in `api/geocode/route.ts` with `GeocodingClient`, and in `api/bike-route/route.ts` with `BikeRoutingClient` (module-level singleton, proper error handling)
|
||||
- Files: `src/app/api/geocode/route.ts`, `src/app/api/bike-route/route.ts`
|
||||
|
||||
- [x] **Step 6: Remove Dead Code** (~5 min)
|
||||
- Delete `src/lib/live-status-utils.ts` entirely; remove its export from `src/lib/index.ts`
|
||||
- File: `src/lib/live-status-utils.ts`, `src/lib/index.ts`
|
||||
|
||||
- [x] **Step 7: Create Missing Test Setup File** (~10 min)
|
||||
- Create `src/test/setup.ts` with `import "@testing-library/jest-dom/vitest"` so jsdom matchers are registered globally
|
||||
- File: `src/test/setup.ts`
|
||||
| Step | ✅ Implemented | ✔️ Reviewed | Notes |
|
||||
|------|:------:|:------:|-------|
|
||||
| **Step 4: Consolidate HAFAS Journey Parsing** (~40 min) | [x] | [x] | parseHafasJourneys moved to hafas-client.ts, exported, imported by useJourneys.ts. Option A followed. |
|
||||
| **Step 5: Wire API Routes to Use Library Clients** (~30 min) | [x] | [x] | Both routes use module-level singleton clients. Param validation, error handling, and try/catch intact. |
|
||||
| **Step 6: Remove Dead Code** (~5 min) | [x] | [x] | live-status-utils.ts deleted, export removed from index.ts. No remaining references. |
|
||||
| **Step 7: Create Missing Test Setup File** (~10 min) | [x] | [x] | src/test/setup.ts created with jest-dom vitest import. Referenced correctly in vitest.config.ts. |
|
||||
|
||||
---
|
||||
|
||||
## Phase 3 — Performance & UX (~1.5 hours)
|
||||
|
||||
- [ ] **Step 8: Add Debounce to Lookup Hooks** (~25 min)
|
||||
- Wrap fetch in a 400 ms `setTimeout` with `AbortController` cleanup in `useGeocode.ts` and `useDestinationStation.ts` to prevent per-keystroke API calls
|
||||
- Files: `src/hooks/useGeocode.ts`, `src/hooks/useDestinationStation.ts`
|
||||
|
||||
- [ ] **Step 9: Pre-Group Calendar Events by Date** (~20 min)
|
||||
- Build a `Map<string, Event[]>` keyed by `YYYY-MM-DD` via `useMemo` in `CalendarView.tsx`; replace per-cell `filter()` with O(1) map lookup
|
||||
- File: `src/app/calendar/CalendarView.tsx`
|
||||
|
||||
- [ ] **Step 10: Add Dark Mode Toggle** (~20 min)
|
||||
- Create `useTheme.ts` hook (persist to `localStorage`, respect `prefers-color-scheme`); add sun/moon toggle button to `Header.tsx`
|
||||
- Files: `src/hooks/useTheme.ts` (new), `src/app/layout/Header.tsx`
|
||||
|
||||
- [ ] **Step 11: Fix Bike Route Steps** (~5 min)
|
||||
- Add `steps: "true"` to the query params in `BikeRoutingClient.getBikeRoute()` so OSRM returns turn-by-turn steps
|
||||
- File: `src/lib/bike-routing-client.ts`
|
||||
| Step | ✅ Implemented | ✔️ Reviewed | Notes |
|
||||
|------|:------:|:------:|-------|
|
||||
| **Step 8: Add Debounce to Lookup Hooks** (~25 min) | [x] | | 400ms setTimeout + AbortController in `useGeocode.ts` and `useDestinationStation.ts`. AbortError silently ignored. |
|
||||
| **Step 9: Pre-Group Calendar Events by Date** (~20 min) | [x] | | `useMemo` builds `Map<string, Event[]>` keyed by `YYYY-MM-DD`. Per-cell `filter()` replaced with O(1) map lookup. |
|
||||
| **Step 10: Add Dark Mode Toggle** (~20 min) | [x] | | `useTheme.ts` created (localStorage + prefers-color-scheme). Sun/moon toggle button added to `Header.tsx`. |
|
||||
| **Step 11: Fix Bike Route Steps** (~5 min) | [x] | | `steps: "true"` already present in `BikeRoutingClient.getBikeRoute()` query params. |
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user