AI Workbench

User Story¶

As a user of the COVID-19 statistics dashboard, I want to see accurate, live COVID-19 case data with proper loading/error feedback and a stable UI, so that I can monitor global and country-specific pandemic statistics without encountering blank pages or silent failures.

Scope¶

In Scope

• P1 — Critical API fix: Replace the permanently dead covidtracking.com API with disease.sh; fix all catch blocks that return error (Error instances must never be passed as component props).
• P2 — UX error/loading states: Add LoadingSpinner, ErrorBanner, and a top-level ErrorBoundary for clear failure feedback.
• P3 — Component refactor: Convert App.js to functional with three custom hooks (useCovid19Stats, useCountries, useDailyData) using AbortController cleanup. Fix mislabelled headings.
• P4 — Dependency upgrade (isolated branch): React 16→18, MUI v4→v5, chart.js 2→4, axios 0.19→1.x, react-scripts 4→5.
• P5 — Testing + PropTypes: API unit tests, component tests, integration test, PropTypes on all components.

Out of Scope

• Backend API hosting, new chart types, internationalisation.

Acceptance Criteria¶

1. AC-01: Global case totals from disease.sh display; line chart renders historical data without console errors.
2. AC-02: No catch block returns an Error object; all return null; no runtime TypeError from .map() on an Error.
3. AC-03: Loading spinner visible during fetches; error banner with retry displayed on failure.
4. AC-04: ErrorBoundary catches unexpected render errors without full-page crash.
5. AC-05: App.jsx is functional; three custom hooks introduced; all useEffect async calls cancel on unmount.
6. AC-06: Heading shows "Country: {name}" when country selected, "Global" otherwise; default dropdown label is "Worldwide".
7. AC-07: REACT_APP_API_URL env variable drives base URL; no hardcoded domain.
8. AC-08: Dependency upgrade branch passes npm run build with zero errors.
9. AC-09: npm test passes with ≥80% coverage for src/api/index.js and all four components.
10. AC-10: All components declare PropTypes; no PropTypes console warnings.

Technical Notes¶

• Dead API replaced: covidtracking.com → disease.sh (global: /v3/covid-19/all, countries: /v3/covid-19/countries, historical: /v3/covid-19/historical/all?lastdays=120)
• StatsSnapshot shape preserved to minimise blast radius in child components.
• disease.sh historical endpoint returns {cases: {date: N}} — adapter transforms to existing DailyEntry[] array format.
• All three custom hooks use AbortController + cancelled flag to prevent setState-on-unmount.
• encodeURIComponent(country) closes A03 injection pattern.
• Critical path: T-01 → T-07/T-08/T-09 → T-10 → T-11/T-12/T-13 → T-22
• Parallel start: T-01, T-03, T-04, T-15 can all begin simultaneously.

Labels: ai-created, modernization, react, bug-fix, covid19-tracker

Labels: ai-created, modernization, react, bug-fix, covid19-tracker