feat: Lock button while fetching

This commit is contained in:
Ahmet Kaan GÜMÜŞ 2024-03-10 02:25:06 +03:00
parent ffa21ae8df
commit 2755034013
3 changed files with 43 additions and 29 deletions

View file

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

View file

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

View file

@ -1,7 +1,7 @@
use dioxus::prelude::*; use dioxus::prelude::*;
use serde::Deserialize; use serde::Deserialize;
const SERVER_ADDRESS: &str = "http://localhost:2323"; const SERVER_ADDRESS: &str = "https://localhost:2323";
#[derive(Debug, Clone, PartialEq, Deserialize)] #[derive(Debug, Clone, PartialEq, Deserialize)]
struct ServerStatus{ struct ServerStatus{
status: String, status: String,
@ -13,6 +13,7 @@ struct CoinStatus{
fn main() { fn main() {
println!("Hello, world!"); println!("Hello, world!");
wasm_logger::init(wasm_logger::Config::default());
launch(app); launch(app);
} }
@ -24,9 +25,9 @@ async fn coin_status_check() -> Result<CoinStatus, reqwest::Error> {
} }
fn app() -> Element { fn app() -> Element {
rsx! { 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 { 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" "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] #[component]