polish: clean up to web

packages/web/examples/async_web.rs

@@ -1,24 +1,13 @@
 //! Basic example that renders a simple VNode to the browser.
-
-use dioxus::events::on::MouseEvent;
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
 use dioxus_hooks::*;
 use dioxus_html as dioxus_elements;
-// use wasm_timer;
-
-use std::future::Future;
-
-use std::{pin::Pin, time::Duration};
-
-use dioxus::prelude::*;
 
 fn main() {
-    // Setup logging
     console_error_panic_hook::set_once();
     wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
-
-    dioxus_web::launch(App, |c| c)
+    dioxus_web::launch(APP, |c| c)
 }
 
 #[derive(serde::Deserialize)]
@@ -26,14 +15,13 @@ struct DogApi {
     message: String,
 }
 
-const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
-
-static App: FC<()> = |cx, props|{
+static APP: FC<()> = |cx, _props| {
     let state = use_state(cx, || 0);
 
-    let dog_node = use_suspense(
+    const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
+    let doggo = use_suspense(
         cx,
-        || surf::get(ENDPOINT).recv_json::<DogApi>(),
+        || async { reqwest::get(ENDPOINT).await.unwrap().json::<DogApi>().await },
         |cx, res| match res {
             Ok(res) => rsx!(
                 cx,
@@ -45,29 +33,18 @@ static App: FC<()> = |cx, props|{
         },
     );
 
-    cx.render(rsx! {
-        div { style: { 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}"
-                    }
-                    br {}
-                    div {
-                        button {
-                            onclick: move |_| state.set(state + 1)
-                            "incr"
-                        }
-                        br {}
-                        button {
-                            onclick: move |_| state.set(state - 1)
-                            "decr"
-                        }
-                    }
-                    div {
-                        h1{"doggo!"}
-                        {dog_node}
-                    }
+    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}
                 }
             }
         }