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!({
|
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))
|
||||||
}
|
}
|
|
@ -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"
|
||||||
|
|
|
@ -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]
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue