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

linebender · Jul 28, 2024 · 727d696 · 727d696
1 parent 981fcc4
commit 727d696
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 28 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/xilem_web/web_examples/fetch/Cargo.toml b/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"] }

diff --git a/xilem_web/web_examples/fetch/src/main.rs b/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> {