You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1.4 KiB

+++ title = "Implement Home page (/) — fetch and display random quote, 'Browse all' link" priority = 5 status = "in_progress" ticket_type = "task" dependencies = ["04f865", "1e6a09", "0d987f", "fc2f51", "0fbdd5"] +++

The `quotesdb` UI is a Yew (Rust → Wasm) single-page app compiled by Trunk and hosted on Cloudflare Pages. It communicates with the backend API via `fetch` calls. Source lives in `src/bin/ui/`. Run with `trunk serve` for local development.

The Home page is the landing page of the app. It displays a random quote fetched from GET /api/quotes/random and a "Browse all" link to /browse.

Implement the Home page component (`src/bin/ui/pages/home.rs`): 1. On mount, fetch a random quote from the API via the API client module (ticket 1e6a09) 2. While loading, show a loading indicator 3. On success, render the `QuoteCard` component (ticket 0d987f) 4. On error, render the `ErrorDisplay` component (ticket fc2f51) 5. Render a "Browse all quotes →" link to `/browse` - Use `use_effect_with` (Yew 0.21+) or the equivalent hook to trigger the fetch on mount. - The random quote endpoint returns 404 if the database is empty — display a friendly "no quotes yet" message in this case. From the `quotesdb/` directory:
trunk build
`feat(quotesdb): implement Home page — random quote display`