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!({
"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))
}

View file

@ -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"

View file

@ -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() }
{ coin_status_renderer() }
{ server_status_renderer() }
page_base {}
coin_status_renderer {}
server_status_renderer {}
}
}
@ -75,31 +76,42 @@ fn server_status_renderer() -> Element {
}
}
fn coin_status_renderer() -> Element {
let mut coin_response = use_resource(move || coin_status_check());
match &*coin_response.value().read() {
Some(Ok(coin_status)) => {
let is_loading = use_signal(|| false);
let coin_result = use_signal(|| CoinStatus{status:"None".to_string(),});
let call_coin = move |_| {
spawn({
to_owned![is_loading];
to_owned![coin_result];
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 {
onclick: move |_| coin_response.restart(),
"style":"width: 70px; height: 40px;",
disabled: is_loading(),
onclick: call_coin,
"style":"width: 80px; height: 50px;",
if is_loading() {
"Loading"
}else {
"Coin Flip"
}
ShowCoinStatus{ coin_status: coin_status.clone() }
}
}
Some(Err(err_val)) => {
rsx! {
div {
"Coin Status: "
{ err_val.to_string() }
}
}
}
None => {
rsx! {
div {
"Coin Status: None"
}
ShowCoinStatus{ coin_status: coin_result().clone() }
}
}
}