modx 0.1.4

A way to handle states with structs in Dioxus inspired by mobx
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

use {
    dioxus::prelude::*,
    modx::{props, resource, store},
    serde::Deserialize,
};

fn main() {
    launch(app);
}

#[resource(fetch_cat)]
#[props(number_of_cats)]
#[store(Default)]
struct CatStore {
    number_of_cats: usize,
    fetch_cat:      Result<ApiResponse, reqwest::Error>,
}

#[derive(Deserialize, Debug)]
struct ApiResponse {
    id: String,
}

impl CatStore {
    fn clear(&mut self) {
        self.fetch_cat.clear();
        self.number_of_cats.set(0);
    }

    async fn fetch_cat(&mut self) -> Result<ApiResponse, reqwest::Error> {
        self.number_of_cats += 1;

        match reqwest::get("https://cataas.com/cat?json=true").await {
            Ok(rep) => rep.json::<ApiResponse>().await,
            Err(why) => Err(why),
        }
    }
}

fn app() -> Element {
    let mut store = CatStore::new(CatStoreProps { number_of_cats: 1 });

    rsx!(
        match &*store.fetch_cat.read()  {
            Some(Ok(api_response)) =>
                rsx! {
                    div {
                        img {
                            max_width: "500px",
                            max_height: "500px",
                            src: "https://cataas.com/cat/{api_response.id}"
                        }
                    }
                    "Wow! An amazing cat! (N°{store.number_of_cats})"
                },
            Some(Err(_)) => rsx! { "An error occured while getting a cat :(" },
            None => rsx!( "No cat for now." ),
        }
        button {
            onclick: move |_| store.fetch_cat.restart(),
            "Get a new cat!"
        }
        button {
            onclick: move |_| store.clear(),
            "Clear cats"
        }
    )
}