Weather Dashboard — Build Mini React Weather App

Custom Hooks — Intermediate React challenge.

Build a weather search dashboard from scratch: a city input, a mocked async fetch, and full loading/success/error state handling with retry — no libraries, no pre-built markup.

Requirements

• fetchWeather is injected as a prop — call it, don't reimplement it.
• Submitting a blank/whitespace city is a no-op: no fetch call, no state change.
• status flips to 'loading' immediately on a valid submit, before the promise settles.
• Success sets status 'success' and stores the weather result; error sets status 'error' and stores err.message.
• Loading indicator, weather card, and error+retry block are mutually exclusive, each gated on status.
• Retry re-calls fetchWeather with the last SUBMITTED city, not necessarily the current input value.
• Enter key in the input submits, same as clicking the search button.

Signature

function WeatherDashboard({ fetchWeather: (city: string) => Promise<{city, temperature, condition}> }): JSX.Element

Example

<WeatherDashboard fetchWeather={fetchWeather} />
// type "London" -> click Search -> loading -> weather card with 18°C, Cloudy
// type "Atlantis" -> error "City not found" + Retry button

Constraints

• Never call fetchWeather for an empty/whitespace-only city.
• Only one of loading/success/error may be visible at a time.
• Retry must reuse the last submitted city, even if the input has since changed.