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.
48 lines
1.5 KiB
Markdown
48 lines
1.5 KiB
Markdown
---
|
|
# quotesdb-m9vb
|
|
title: Implement Home page (/) — fetch and display random quote, 'Browse all' link
|
|
status: completed
|
|
type: task
|
|
priority: normal
|
|
created_at: 2026-03-10T23:32:06Z
|
|
updated_at: 2026-03-10T23:32:13Z
|
|
blocked_by:
|
|
- quotesdb-xqh3
|
|
- quotesdb-dgwi
|
|
- quotesdb-oukj
|
|
- quotesdb-k258
|
|
- quotesdb-wlpv
|
|
---
|
|
|
|
<context>
|
|
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`.
|
|
</context>
|
|
|
|
<goal>
|
|
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`
|
|
</goal>
|
|
|
|
<constraints>
|
|
- 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.
|
|
</constraints>
|
|
|
|
<validation>
|
|
From the `quotesdb/` directory:
|
|
|
|
```sh
|
|
trunk build
|
|
```
|
|
</validation>
|
|
|
|
<commit>
|
|
`feat(quotesdb): implement Home page — random quote display`
|
|
</commit>
|