Jonathan Kelley
f2b1c6d97f
overhaul dioxus fullstack using a new implementation of server_fn This PR is a complete rewrite of dioxus fullstack designed to improve compatibility with axum and to fix a number of compilation errors based on feature flag unification plumbing through macros.
49 lines
1.7 KiB
Rust
49 lines
1.7 KiB
Rust
//! This example showcases a fullstack variant of the "dog app" demo, but with the loader and actions
|
|
//! self-hosted instead of using the Dog API.
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {
|
|
dioxus::launch(app);
|
|
}
|
|
|
|
fn app() -> Element {
|
|
// Fetch the list of breeds from the Dog API, using the `?` syntax to suspend or throw errors
|
|
let breed_list = use_loader(list_breeds)?;
|
|
|
|
// Whenever this action is called, it will re-run the future and return the result.
|
|
let mut breed = use_action(get_random_breed_image);
|
|
|
|
rsx! {
|
|
h1 { "Doggo selector" }
|
|
div { width: "400px",
|
|
for cur_breed in breed_list.read().iter().take(20).cloned() {
|
|
button { onclick: move |_| { breed.call(cur_breed.clone()); }, "{cur_breed}" }
|
|
}
|
|
}
|
|
div {
|
|
match breed.result() {
|
|
None => rsx! { div { "Click the button to fetch a dog!" } },
|
|
Some(Err(_e)) => rsx! { div { "Failed to fetch a dog, please try again." } },
|
|
Some(Ok(res)) => rsx! { img { max_width: "500px", max_height: "500px", src: "{res}" } },
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
#[get("/api/breeds/list/all")]
|
|
async fn list_breeds() -> Result<Vec<String>> {
|
|
Ok(vec!["bulldog".into(), "labrador".into(), "poodle".into()])
|
|
}
|
|
|
|
#[get("/api/breed/{breed}/images/random")]
|
|
async fn get_random_breed_image(breed: String) -> Result<String> {
|
|
match breed.as_str() {
|
|
"bulldog" => Ok("https://images.dog.ceo/breeds/buhund-norwegian/hakon3.jpg".into()),
|
|
"labrador" => Ok("https://images.dog.ceo/breeds/labrador/n02099712_2501.jpg".into()),
|
|
"poodle" => Ok("https://images.dog.ceo/breeds/poodle-standard/n02113799_5973.jpg".into()),
|
|
_ => HttpError::not_found("Breed not found")?,
|
|
}
|
|
}
|