Render when button pressed

[Tahinli]

Hi I'm new on Dioxus,
I wanted to render some text, when I pressed button.
I understand how to fetch data from server as you can see in server status but I couldn't figure it out how to trigger with button click (coin flip). There is a comment line in button, I tried it like this, but clearly it's not the thing it should be. Sorry code is a bit long but I wanted to explain what I'm trying.

use dioxus::prelude::*;
use serde::Deserialize;

const SERVER_ADDRESS: &str = "http://localhost:2323";
#[derive(Debug, Clone, PartialEq, Deserialize)]
struct ServerStatus{
    status: String,
}
#[derive(Debug, Clone, PartialEq, Deserialize)]
struct CoinStatus{
    status: String,
}

fn main() {
    println!("Hello, world!");
    launch(app);
}

async fn server_status_check() ->Result<ServerStatus, reqwest::Error> {
    Ok(reqwest::get(SERVER_ADDRESS).await.unwrap().json::<ServerStatus>().await.unwrap())
}
async fn coin_status_check() -> Result<CoinStatus, reqwest::Error> {
    Ok(reqwest::get(format!("{}{}", SERVER_ADDRESS, "/coin")).await.unwrap().json::<CoinStatus>().await.unwrap())
}

fn app() -> Element {
    rsx! {
        { page_base() }
        { coin_status_renderer() }
        { server_status_renderer() }
    }
}

fn page_base() ->Element {
    rsx! {
        h1 {
            "Radioxide"
        }
        div {
            div {
                class: "flex items-center",
                span {
                    button { 
                        //onclick: move |_| coin_status_renderer(),
                        "style":"width: 70px; height: 40px;",
                        "Coin Flip"
                    }
                }
                span { "   " },
                span {  }
            }
            
        }
    }
}

fn server_status_renderer() -> Element {
    let server_status = use_resource(move || server_status_check());
    match &*server_status.value().read() {
        Some(Ok(server_status)) => {
            rsx! {
                h5 {
                    ShowServerStatus { server_status: server_status.clone() }
                }
            }
            
        }
        Some(Err(err_val)) => {
            rsx! {
                h5 {
                    "Server Status: "
                    { err_val.to_string() }
                }
            }
        }
        None => {
            rsx! {
                h5 {
                    "Server Status: Dead"
                }
            }
        }
    }
}
fn coin_status_renderer() -> Element {
    let coin_status = use_resource(move || coin_status_check());
    match &*coin_status.value().read() {
        Some(Ok(coin_status)) => {
            rsx! {
                ShowCoinStatus{ coin_status: coin_status.clone() }
            }
        }
        Some(Err(err_val)) => {
            rsx! {
                div {
                    "Coin Status: "
                    { err_val.to_string() }
                }
            }
        }
        None => {
            rsx! {
                div {
                    "Coin Status: None"
                }
            }
        }
    }
}
#[component]
fn ShowServerStatus(server_status: ServerStatus) -> Element {
    rsx! {
        div {
            div { class: "flex items-center",
            span { "Server Status: " }
            span { { server_status.status } }
            }
        }
    }
}
#[component]
fn ShowCoinStatus(coin_status: CoinStatus) -> Element {
    rsx! {
        div {
            div { class: "flex items-center",
            span { "Coin Status: " }
            span { { coin_status.status } }
            }
        }
    }
}

[Tahinli]

Okay I found the solution in -> https://dioxuslabs.com/learn/0.5/reference/use_resource
I used restart() and here is my full code, as if someone also may need in the future.

Here is the part that, you may wanted to see

fn coin_status_renderer() -> Element {
    let mut coin_response = use_resource(move || coin_status_check());
    match &*coin_response.value().read() {
        Some(Ok(coin_status)) => {
            rsx! {
                button { 
                    //This is the place, where joke happens
                    onclick: move |_| coin_response.restart(),
                    "style":"width: 70px; height: 40px;",
                    "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"
                }
            }
        }
    }
}

This is the full code

use dioxus::prelude::*;
use serde::Deserialize;

const SERVER_ADDRESS: &str = "http://localhost:2323";
#[derive(Debug, Clone, PartialEq, Deserialize)]
struct ServerStatus{
    status: String,
}
#[derive(Debug, Clone, PartialEq, Deserialize)]
struct CoinStatus{
    status: String,
}

fn main() {
    println!("Hello, world!");
    launch(app);
}

async fn server_status_check() ->Result<ServerStatus, reqwest::Error> {
    Ok(reqwest::get(SERVER_ADDRESS).await.unwrap().json::<ServerStatus>().await.unwrap())
}
async fn coin_status_check() -> Result<CoinStatus, reqwest::Error> {
    Ok(reqwest::get(format!("{}{}", SERVER_ADDRESS, "/coin")).await.unwrap().json::<CoinStatus>().await.unwrap())
}
fn app() -> Element {
    rsx! {
        { page_base() }
        { coin_status_renderer() }
        { server_status_renderer() }
    }
}

fn page_base() ->Element {
    rsx! {
        h1 {
            "Radioxide"
        }
        div {
            div {
                class: "flex items-center",
                span {
                }
            }
            
        }
    }
}

fn server_status_renderer() -> Element {
    let server_status = use_resource(move || server_status_check());
    match &*server_status.value().read() {
        Some(Ok(server_status)) => {
            rsx! {
                h5 {
                    ShowServerStatus { server_status: server_status.clone() }
                }
            }
            
        }
        Some(Err(err_val)) => {
            rsx! {
                h5 {
                    "Server Status: "
                    { err_val.to_string() }
                }
            }
        }
        None => {
            rsx! {
                h5 {
                    "Server Status: Dead"
                }
            }
        }
    }
}
fn coin_status_renderer() -> Element {
    let mut coin_response = use_resource(move || coin_status_check());
    match &*coin_response.value().read() {
        Some(Ok(coin_status)) => {
            rsx! {
                button { 
                    //This is the place, where the joke happens
                    onclick: move |_| coin_response.restart(),
                    "style":"width: 70px; height: 40px;",
                    "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"
                }
            }
        }
    }
}
#[component]
fn ShowServerStatus(server_status: ServerStatus) -> Element {
    rsx! {
        div {
            div { class: "flex items-center",
            span { "Server Status: " }
            span { { server_status.status } }
            }
        }
    }
}
#[component]
fn ShowCoinStatus(coin_status: CoinStatus) -> Element {
    rsx! {
        div {
            div { class: "flex items-center",
            span { "Coin Status: " }
            span { { coin_status.status } }
            }
        }
    }
}