xilem_web: Use separate FetchState in fetch example (#454)

Cargo.lock

@@ -1307,9 +1307,9 @@ dependencies = [
 
 [[package]]
 name = "gloo-net"
-version = "0.5.0"
+version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43aaa242d1239a8822c15c645f02166398da4f8b5c4bae795c1f5b44e9eee173"
+checksum = "c06f627b1a58ca3d42b45d6104bf1e1a03799df472df00988b6ba21accc10580"
 dependencies = [
  "gloo-utils",
  "http",
@@ -1469,9 +1469,9 @@ checksum = "dfa686283ad6dd069f105e5ab091b04c62850d3e4cf5d67debad1933f55023df"
 
 [[package]]
 name = "http"
-version = "0.2.12"
+version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "601cbb57e577e2f5ef5be8e7b83f0f63994f25aa94d673e54a92d5c516d101f1"
+checksum = "21b9ddb458710bc376481b842f5da65cdf31522de232c1ca8146abce2a358258"
 dependencies = [
  "bytes",
  "fnv",

xilem_web/web_examples/fetch/Cargo.toml

@@ -11,7 +11,7 @@ workspace = true
 [dependencies]
 console_error_panic_hook = "0.1"
 console_log = "1"
-gloo-net = { version = "0.5.0", default-features = false, features = ["http", "json", "serde"] }
+gloo-net = { version = "0.6.0", default-features = false, features = ["http", "json", "serde"] }
 log = "0.4"
 serde = { version = "1", features = ["derive"] }
 web-sys = { version = "0.3.69", features = ["Event", "HtmlInputElement"] }

xilem_web/web_examples/fetch/src/main.rs

@@ -1,6 +1,8 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
+use gloo_net::http::Request;
+use serde::{Deserialize, Serialize};
 use wasm_bindgen::{JsCast, UnwrapThrowExt};
 use xilem_web::{
     concurrent::memoized_await,
@@ -11,9 +13,6 @@ use xilem_web::{
     App,
 };
 
-use gloo_net::http::Request;
-use serde::{Deserialize, Serialize};
-
 const TOO_MANY_CATS: usize = 8;
 
 #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
@@ -45,6 +44,34 @@ impl Default for AppState {
     }
 }
 
+impl AppState {
+    fn fetch_state(&self) -> FetchState {
+        if self.cats_to_fetch != 0 && self.cats_to_fetch == self.cats.len() {
+            FetchState::Finished
+        } else if self.cats_to_fetch >= TOO_MANY_CATS {
+            FetchState::TooMany
+        } else if self.debounce_in_ms > 0 && self.cats_to_fetch > 0 && self.reset_debounce_on_update
+        {
+            FetchState::Debounced
+        } else if self.debounce_in_ms > 0 && self.cats_to_fetch > 0 {
+            FetchState::Throttled
+        } else if self.cats_to_fetch > 0 && self.cats_are_being_fetched {
+            FetchState::Fetching
+        } else {
+            FetchState::Initial
+        }
+    }
+}
+
+enum FetchState {
+    Initial,
+    Fetching,
+    TooMany,
+    Debounced,
+    Throttled,
+    Finished,
+}
+
 async fn fetch_cats(count: usize) -> Result<Vec<Cat>, gloo_net::Error> {
     log::debug!("Fetch {count} cats");
     if count == 0 {
@@ -123,26 +150,15 @@ fn cat_images_and_fetching_indicator(state: &AppState) -> impl HtmlDivElement<Ap
         .error
         .as_ref()
         .map(|err| div((h2("Error"), p(err.to_string()))).class("error"));
-    div((
-        error_message,
-        if state.cats_to_fetch != 0 && state.cats_to_fetch == cat_images.len() {
-            Either::A(h1("Here are your cats:").class("blink"))
-        } else if state.cats_to_fetch >= TOO_MANY_CATS {
-            Either::B(p("Woah there, that's too many cats"))
-        } else if state.debounce_in_ms > 0
-            && state.cats_to_fetch > 0
-            && state.reset_debounce_on_update
-        {
-            Either::B(p("Debounced fetch of cats..."))
-        } else if state.debounce_in_ms > 0 && state.cats_to_fetch > 0 {
-            Either::B(p("Throttled fetch of cats..."))
-        } else if state.cats_to_fetch > 0 && state.cats_are_being_fetched {
-            Either::B(p("Fetching cats..."))
-        } else {
-            Either::B(p("You need to fetch cats"))
-        },
-        cat_images,
-    ))
+    let fetch_state = match state.fetch_state() {
+        FetchState::Initial => Either::B(p("You need to fetch cats")),
+        FetchState::Fetching => Either::B(p("Fetching cats...")),
+        FetchState::TooMany => Either::B(p("Woah there, that's too many cats")),
+        FetchState::Debounced => Either::B(p("Debounced fetch of cats...")),
+        FetchState::Throttled => Either::B(p("Throttled fetch of cats...")),
+        FetchState::Finished => Either::A(h1("Here are your cats:").class("blink")),
+    };
+    div((error_message, fetch_state, cat_images))
 }
 
 fn cat_fetch_controls(state: &AppState) -> impl Element<AppState> {