examples: webview and async

examples/async.rs

@@ -0,0 +1,74 @@
+//! Example: README.md showcase
+//!
+//! The example from the README.md
+
+use std::pin::Pin;
+
+use dioxus::prelude::*;
+use futures::Future;
+fn main() {
+    dioxus::web::launch(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 mut fut = cx.use_hook(
+        move || {
+            Box::pin(async {
+                //
+                loop {
+                    // repeatadly get new doggos
+                    match surf::get(ENDPOINT).recv_json::<DogApi>().await {
+                        Ok(_) => (),
+                        Err(_) => (),
+                        // Ok(res) => rsx!(in cx, img { src: "{res.message}" }),
+                        // Err(_) => rsx!(in cx, div { "No doggos for you :(" }),
+                    }
+                    // wait one seconds
+                }
+            }) as Pin<Box<dyn Future<Output = ()> + 'static>>
+        },
+        |h| h,
+        |_| {},
+    );
+
+    cx.submit_task(fut);
+
+    todo!()
+    // cx.render(rsx! {
+    //     div {
+    //         h1 { "Hifive counter: {count}" }
+    //         button { onclick: move |_| count += 1, "Up high!" }
+    //         button { onclick: move |_| count -= 1, "Down low!" }
+    //     }
+    // })
+};
+
+// #[derive(serde::Deserialize)]
+// struct DogApi {
+//     message: String,
+// }
+// const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random";
+
+// pub static App: FC<()> = |cx| {
+//     let doggo = use_future_effect(&cx, move || async move {
+//         match surf::get(ENDPOINT).recv_json::<DogApi>().await {
+//             Ok(res) => rsx!(in cx, img { src: "{res.message}" }),
+//             Err(_) => rsx!(in cx, div { "No doggos for you :(" }),
+//         }
+//     });
+
+//     cx.render(rsx!(
+//         div {
+//             h1 {"Waiting for a doggo..."}
+//             {doggo}
+//         }
+//     ))
+// };

examples/readme.rs

@@ -4,15 +4,17 @@
 
 use dioxus::prelude::*;
 fn main() {
-    dioxus::web::launch(Example)
+    dioxus::web::launch(App)
 }
 
-fn Example(cx: Context<()>) -> VNode {
-    let name = use_state(cx, || "..?");
+static App: FC<()> = |cx| {
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
-        h1 { "Hello, {name}" }
-        button { "?", onclick: move |_| name.set("world!")}
-        button { "?", onclick: move |_| name.set("Dioxus 🎉")}
+        div {
+            h1 { "Hifive counter: {count}" }
+            button { onclick: move |_| count += 1, "Up high!" }
+            button { onclick: move |_| count -= 1, "Down low!" }
+        }
     })
-}
+};

examples/slideshow.rs

@@ -16,9 +16,9 @@ fn main() {
 }
 
 static App: FC<()> = |cx| {
-    let slide_id = use_state(cx, || 0);
+    let slides = use_state(cx, SlideController::new);
 
-    let slide = match *slide_id {
+    let slide = match slides.slide_id {
         0 => cx.render(rsx!(Title {})),
         1 => cx.render(rsx!(Slide1 {})),
         2 => cx.render(rsx!(Slide2 {})),
@@ -28,12 +28,15 @@ static App: FC<()> = |cx| {
 
     cx.render(rsx! {
         div {
+            style: {
+                background_color: "red"
+            }
             div {
                 div { h1 {"my awesome slideshow"} }
                 div {
-                    button {"<-", onclick: move |_| if *slide_id != 0 { *slide_id.get_mut() -= 1}}
-                    h3 { "{slide_id}" }
-                    button {"->" onclick: move |_| if *slide_id != 4 { *slide_id.get_mut() += 1 }}
+                    button {"<-", onclick: move |_| slides.get_mut().go_forward()}
+                    h3 { "{slides.slide_id}" }
+                    button {"->" onclick: move |_| slides.get_mut().go_backward()}
                  }
             }
             {slide}
@@ -41,38 +44,69 @@ static App: FC<()> = |cx| {
     })
 };
 
+#[derive(Clone)]
+struct SlideController {
+    slide_id: isize,
+}
+impl SlideController {
+    fn new() -> Self {
+        Self { slide_id: 0 }
+    }
+    fn can_go_forward(&self) -> bool {
+        false
+    }
+    fn can_go_backward(&self) -> bool {
+        true
+    }
+    fn go_forward(&mut self) {
+        if self.can_go_forward() {
+            self.slide_id += 1;
+        }
+    }
+    fn go_backward(&mut self) {
+        if self.can_go_backward() {
+            self.slide_id -= 1;
+        }
+    }
+}
+
 const Title: FC<()> = |cx| {
     cx.render(rsx! {
         div {
-
+            h1 { "Title" }
+            p {}
         }
     })
 };
 const Slide1: FC<()> = |cx| {
     cx.render(rsx! {
         div {
-
+            h1 { "Slide1" }
+            p {}
         }
     })
 };
 const Slide2: FC<()> = |cx| {
     cx.render(rsx! {
         div {
-
+            h1 { "Slide2" }
+            p {}
         }
     })
 };
 const Slide3: FC<()> = |cx| {
     cx.render(rsx! {
         div {
-
+            h1 { "Slide3" }
+            p {}
         }
     })
 };
 const End: FC<()> = |cx| {
     cx.render(rsx! {
         div {
-
+            h1 { "End" }
+            p {}
         }
     })
 };