Keep a pickup ETA countdown accurate
Derive a pickup countdown from an absolute ETA, schedule exact display boundaries, and stop once arrival is reached.Description
Requirements
Export PickupEtaCountdown from src/App.tsx.
Compute remaining time from etaAt minus clock.now rather than decrementing local state.
Schedule the next update at the boundary where the displayed whole minute or second changes.
Cancel the old schedule and immediately recalculate when etaAt changes.
Clamp at zero, announce arrival, and invoke onArrived at most once per ETA.
Expose visible status and interactive controls with native semantics, accessible names, and keyboard operation appropriate to the workflow.
Do not mutate props, nested caller-owned values, or arrays supplied to the component.
Clock delay
A scheduled callback runs three seconds late
The display catches up from the absolute ETA
Compute remaining time from etaAt minus clock.now rather than decrementing local state.
Driver update
etaAt moves five minutes later
The old timer is cancelled and the new ETA displays
Schedule the next update at the boundary where the displayed whole minute or second changes.
Constraints
Use React state and effects only where the observable component contract requires themUse injected adapters instead of accessing network, storage, timers, or browser globals directlyKeep one authoritative state transition for each user or adapter event
Hints
Hint 1
Start with the deadline-derived-display behavior and make its observable result deterministic.
Hint 2
Model schedules-display-boundary independently before combining it with the remaining states.
Hint 3
Verify the boundary described by stops-at-arrival without changing caller-owned input.