dioxus/packages/web/examples/async_web.rs

54 lines
1.5 KiB
Rust
Raw Normal View History

//! Basic example that renders a simple VNode to the browser.
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
2021-10-11 19:35:20 +00:00
use dioxus_core_macro::*;
use dioxus_hooks::*;
use dioxus_html as dioxus_elements;
fn main() {
console_error_panic_hook::set_once();
2021-07-18 07:54:42 +00:00
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
2021-09-25 00:47:59 +00:00
dioxus_web::launch(APP, |c| c)
}
2021-07-14 06:30:41 +00:00
#[derive(serde::Deserialize)]
struct DogApi {
message: String,
}
2021-10-16 21:37:28 +00:00
static APP: FC<()> = |(cx, _props)| {
let state = use_state(cx, || 0);
2021-09-25 00:47:59 +00:00
const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
let doggo = use_suspense(
2021-07-27 15:28:05 +00:00
cx,
2021-09-25 00:47:59 +00:00
|| async { reqwest::get(ENDPOINT).await.unwrap().json::<DogApi>().await },
2021-07-15 04:40:37 +00:00
|cx, res| match res {
2021-09-16 17:20:04 +00:00
Ok(res) => rsx!(
cx,
img {
src: "{res.message}"
}
),
Err(_err) => rsx!(cx, div { "No doggos for you :(" }),
2021-07-15 04:40:37 +00:00
},
);
2021-09-25 00:47:59 +00:00
rsx!(cx, div { align_items: "center"
section { class: "py-12 px-4 text-center"
div { class: "w-full max-w-2xl mx-auto"
span { class: "text-sm font-semibold"
"count: {state}"
}
div {
button { onclick: move |_| state.set(state + 1), "incr" }
button { onclick: move |_| state.set(state - 1), "decr" }
}
div {
{doggo}
}
}
}
})
};