feat: ✨ Lock button while fetching
This commit is contained in:
parent
ffa21ae8df
commit
2755034013
3 changed files with 43 additions and 29 deletions
|
@ -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))
|
||||
}
|
|
@ -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"
|
||||
|
|
|
@ -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() }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue