examples: fix fetch example (#1096)

This commit is contained in:
Matt Joiner 2023-05-26 01:15:47 +10:00 committed by GitHub
parent 40363df4a1
commit 20682e63ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -17,7 +17,9 @@ pub enum FetchError {
Json,
}
async fn fetch_cats(count: u32) -> Result<Vec<String>, FetchError> {
type CatCount = usize;
async fn fetch_cats(count: CatCount) -> Result<Vec<String>, FetchError> {
if count > 0 {
// make the request
let res = reqwasm::http::Request::get(&format!(
@ -32,6 +34,7 @@ async fn fetch_cats(count: u32) -> Result<Vec<String>, FetchError> {
.map_err(|_| FetchError::Json)?
// extract the URL field for each cat
.into_iter()
.take(count)
.map(|cat| cat.url)
.collect::<Vec<_>>();
Ok(res)
@ -41,7 +44,7 @@ async fn fetch_cats(count: u32) -> Result<Vec<String>, FetchError> {
}
pub fn fetch_example(cx: Scope) -> impl IntoView {
let (cat_count, set_cat_count) = create_signal::<u32>(cx, 0);
let (cat_count, set_cat_count) = create_signal::<CatCount>(cx, 0);
// we use local_resource here because
// 1) our error type isn't serializable/deserializable
@ -75,7 +78,7 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
cats.read(cx).map(|data| {
data.map(|data| {
data.iter()
.map(|s| view! { cx, <span>{s}</span> })
.map(|s| view! { cx, <p><img src={s}/></p> })
.collect_view(cx)
})
})
@ -89,7 +92,7 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
type="number"
prop:value=move || cat_count.get().to_string()
on:input=move |ev| {
let val = event_target_value(&ev).parse::<u32>().unwrap_or(0);
let val = event_target_value(&ev).parse::<CatCount>().unwrap_or(0);
set_cat_count(val);
}
/>
@ -98,7 +101,9 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
<Transition fallback=move || {
view! { cx, <div>"Loading (Suspense Fallback)..."</div> }
}>
<div>
{cats_view}
</div>
</Transition>
</ErrorBoundary>
</div>