2022-01-25 00:52:12 +00:00
|
|
|
#![allow(non_snake_case)]
|
|
|
|
|
2022-01-03 06:12:39 +00:00
|
|
|
//! Render a bunch of doggos!
|
|
|
|
|
|
|
|
use std::collections::HashMap;
|
|
|
|
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
|
|
|
|
fn main() {
|
|
|
|
dioxus::desktop::launch(app);
|
|
|
|
}
|
|
|
|
|
|
|
|
#[derive(Debug, Clone, PartialEq, serde::Deserialize)]
|
|
|
|
struct ListBreeds {
|
|
|
|
message: HashMap<String, Vec<String>>,
|
|
|
|
}
|
|
|
|
|
|
|
|
fn app(cx: Scope) -> Element {
|
2022-02-01 00:40:48 +00:00
|
|
|
let breeds = use_future(&cx, || async move {
|
2022-01-03 06:12:39 +00:00
|
|
|
reqwest::get("https://dog.ceo/api/breeds/list/all")
|
|
|
|
.await
|
|
|
|
.unwrap()
|
|
|
|
.json::<ListBreeds>()
|
|
|
|
.await
|
|
|
|
});
|
|
|
|
|
2022-01-26 02:41:40 +00:00
|
|
|
let (breed, set_breed) = use_state(&cx, || None);
|
2022-01-03 06:12:39 +00:00
|
|
|
|
2022-02-01 00:40:48 +00:00
|
|
|
match breeds.value() {
|
2022-01-03 06:12:39 +00:00
|
|
|
Some(Ok(breeds)) => cx.render(rsx! {
|
|
|
|
div {
|
|
|
|
h1 {"Select a dog breed!"}
|
|
|
|
|
|
|
|
div { display: "flex",
|
|
|
|
ul { flex: "50%",
|
|
|
|
breeds.message.keys().map(|breed| rsx!(
|
|
|
|
li {
|
|
|
|
button {
|
2022-01-26 02:41:40 +00:00
|
|
|
onclick: move |_| set_breed(Some(breed.clone())),
|
2022-01-03 06:12:39 +00:00
|
|
|
"{breed}"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
))
|
|
|
|
}
|
|
|
|
div { flex: "50%",
|
2022-01-26 02:41:40 +00:00
|
|
|
match breed {
|
2022-01-03 06:12:39 +00:00
|
|
|
Some(breed) => rsx!( Breed { breed: breed.clone() } ),
|
|
|
|
None => rsx!("No Breed selected"),
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}),
|
2022-01-25 00:52:12 +00:00
|
|
|
Some(Err(_e)) => cx.render(rsx! {
|
2022-01-03 06:12:39 +00:00
|
|
|
div { "Error fetching breeds" }
|
|
|
|
}),
|
|
|
|
None => cx.render(rsx! {
|
|
|
|
div { "Loading dogs..." }
|
|
|
|
}),
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#[inline_props]
|
|
|
|
fn Breed(cx: Scope, breed: String) -> Element {
|
2022-01-19 12:14:41 +00:00
|
|
|
#[derive(serde::Deserialize, Debug)]
|
2022-01-03 06:12:39 +00:00
|
|
|
struct DogApi {
|
|
|
|
message: String,
|
|
|
|
}
|
|
|
|
|
|
|
|
let endpoint = format!("https://dog.ceo/api/breed/{}/images/random", breed);
|
|
|
|
|
|
|
|
let fut = use_future(&cx, || async move {
|
|
|
|
reqwest::get(endpoint).await.unwrap().json::<DogApi>().await
|
|
|
|
});
|
|
|
|
|
2022-01-26 02:41:40 +00:00
|
|
|
let (name, set_name) = use_state(&cx, || breed.clone());
|
|
|
|
if name != breed {
|
|
|
|
set_name(breed.clone());
|
2022-01-19 12:14:41 +00:00
|
|
|
fut.restart();
|
|
|
|
}
|
|
|
|
|
2022-01-03 06:12:39 +00:00
|
|
|
cx.render(match fut.value() {
|
|
|
|
Some(Ok(resp)) => rsx! {
|
|
|
|
button {
|
|
|
|
onclick: move |_| fut.restart(),
|
|
|
|
"Click to fetch another doggo"
|
|
|
|
}
|
|
|
|
div {
|
|
|
|
img {
|
|
|
|
max_width: "500px",
|
|
|
|
max_height: "500px",
|
|
|
|
src: "{resp.message}",
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
Some(Err(_)) => rsx! { div { "loading dogs failed" } },
|
|
|
|
None => rsx! { div { "loading dogs..." } },
|
|
|
|
})
|
|
|
|
}
|