feat: it loads the doggos

packages/web/examples/async_web.rs

@@ -17,13 +17,20 @@ use dioxus_web::*;
 
 fn main() {
     // Setup logging
-    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    // wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
     console_error_panic_hook::set_once();
 
     // Run the app
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
 }
 
+#[derive(serde::Deserialize)]
+struct DogApi {
+    message: String,
+}
+
+const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
+
 static App: FC<()> = |cx| {
     // let mut count = use_state(cx, || 0);
     let state = use_state(cx, || 0);
@@ -32,19 +39,24 @@ static App: FC<()> = |cx| {
     let g = cx.use_task(|| async move {
         let mut tick: i32 = 0;
         log::debug!("yeet!");
-        loop {
-            gloo_timers::future::TimeoutFuture::new(250).await;
-            log::debug!("ticking forward... {}", tick);
-            tick += 1;
-            if tick > 10 {
-                break;
-            }
-        }
+        // loop {
+        //     gloo_timers::future::TimeoutFuture::new(250).await;
+        //     log::debug!("ticking forward... {}", tick);
+        //     tick += 1;
+        //     if tick > 10 {
+        //         break;
+        //     }
+        // }
+
         set_val(10);
-        String::from("Huzza!")
+        surf::get(ENDPOINT).recv_json::<DogApi>().await
+        // String::from("Huzza!")
     });
 
-    log::debug!("Value from component was {:#?}", g);
+    let dog_node = match g.as_ref().and_then(|f| f.as_ref().ok()) {
+        Some(res) => rsx!(in cx, img { src: "{res.message}" }),
+        None => rsx!(in cx, div { "No doggos for you :(" }),
+    };
 
     cx.render(rsx! {
         div {
@@ -65,6 +77,10 @@ static App: FC<()> = |cx| {
                             "decr"
                         }
                     }
+                    div {
+                        h1{"doggo!"}
+                        {dog_node}
+                    }
                 }
             }
         }