feat: ✨ Lock button while fetching

back/src/routing.rs

@@ -16,7 +16,7 @@ async fn alive() -> impl IntoResponse {
     let alive_json = serde_json::json!({
         "status":"Alive",
     });
-    println!("Alive");
+    println!("{}", alive_json);
     (StatusCode::OK, Json(alive_json))
 }
 
@@ -30,6 +30,6 @@ async fn flip_coin() -> impl IntoResponse {
     let coin_json = serde_json::json!({
         "status":flip_status,
     });
-    println!("Coin Flip");
+    println!("{}", coin_json);
     (StatusCode::OK, Json(coin_json))
 }

front/Cargo.toml

@@ -7,5 +7,7 @@ edition = "2021"
 
 [dependencies]
 dioxus = { version = "0.5.0-alpha.0", features = ["web"] }
+log = "0.4.21"
 reqwest = { version = "0.11.24", features = ["json"] }
 serde = { version = "1.0.197", features = ["derive"] }
+wasm-logger = "0.2.0"

front/src/main.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 use serde::Deserialize;
 
-const SERVER_ADDRESS: &str = "http://localhost:2323";
+const SERVER_ADDRESS: &str = "https://localhost:2323";
 #[derive(Debug, Clone, PartialEq, Deserialize)]
 struct ServerStatus{
     status: String,
@@ -13,6 +13,7 @@ struct CoinStatus{
 
 fn main() {
     println!("Hello, world!");
+    wasm_logger::init(wasm_logger::Config::default());
     launch(app);
 }
 
@@ -24,9 +25,9 @@ async fn coin_status_check() -> Result<CoinStatus, reqwest::Error> {
 }
 fn app() -> Element {
     rsx! {
-        { page_base() }
+        page_base {}
-        { coin_status_renderer() }
+        coin_status_renderer {}
-        { server_status_renderer() }
+        server_status_renderer {}
     }
 }
 
@@ -75,33 +76,44 @@ fn server_status_renderer() -> Element {
     }
 }
 fn coin_status_renderer() -> Element {
-    let mut coin_response = use_resource(move || coin_status_check());
+    let is_loading = use_signal(|| false);
-    match &*coin_response.value().read() {
+    let coin_result = use_signal(|| CoinStatus{status:"None".to_string(),});
-        Some(Ok(coin_status)) => {
+    let call_coin = move |_| {
-            rsx! {
+        spawn({
-                button { 
+            to_owned![is_loading];
-                    onclick: move |_| coin_response.restart(),
+            to_owned![coin_result];
-                    "style":"width: 70px; height: 40px;",
+            is_loading.set(true);
+            async move {
+                match coin_status_check().await {
+                    Ok(coin_status) => {
+                        is_loading.set(false);
+                        coin_result.set(coin_status);
+                    }
+                    Err(err_val) => {
+                        is_loading.set(false);
+                        log::info!("{}", err_val);
+                    }
+                }
+            }
+        });
+    };
+    log::info!("{}", is_loading);
+    rsx! {
+        div {
+            button {
+                disabled: is_loading(),
+                onclick: call_coin,
+                "style":"width: 80px; height: 50px;",
+                if is_loading() {
+                    "Loading"
+                }else {
                     "Coin Flip"
                 }
-                ShowCoinStatus{ coin_status: coin_status.clone() }
             }
-        }
+            div {
-        Some(Err(err_val)) => {
+                ShowCoinStatus{ coin_status: coin_result().clone() }
-            rsx! {
-                div {
-                    "Coin Status: "
-                    { err_val.to_string() }
-                }
             }
-        }
+        }        
-        None => {
-            rsx! {
-                div {
-                    "Coin Status: None"
-                }
-            }
-        }
     }
 }
 #[component]