Slightly better state handling

web/src/web.rs

@@ -20,33 +20,30 @@ use reqwasm::http;
 
 use recipes::{parse, Recipe};
 
-#[derive(Props, PartialEq)]
+#[derive(Props, PartialEq, Clone)]
-struct RecipeListProps {
+struct AppService {
-    recipe_list: Vec<Recipe>,
+    recipes: Vec<Recipe>,
 }
 
-/// Component to list available recipes.
+impl AppService {
-fn RecipeList(cx: Scope) -> Element {
+    fn new() -> Self {
-    let props = use_state(&cx, || RecipeListProps {
+        Self {
-        recipe_list: vec![],
+            recipes: Vec::new(),
-    });
+        }
+    }
 
-    use_future(&cx, || {
+    async fn fetch_recipes() -> Result<Vec<Recipe>, String> {
-        let props = props.for_async();
+        let resp = match http::Request::get("/api/v1/recipes").send().await {
-        async move {
+            Ok(resp) => resp,
-            let req = http::Request::get("/api/v1/recipes").send().await;
+            Err(e) => return Err(format!("Error: {}", e)),
-            match req {
+        };
-                Ok(resp) => {
         if resp.status() != 200 {
-                        console_log!("Status: {}", resp.status());
+            return Err(format!("Status: {}", resp.status()));
         } else {
             console_log!("We got a valid response back!");
             let recipe_list = match resp.json::<Vec<String>>().await {
                 Ok(recipes) => recipes,
-                            Err(e) => {
+                Err(e) => return Err(format!("Eror getting recipe list as json {}", e)),
-                                console_log!("Eror getting recipe list as json {}", e);
-                                Vec::new()
-                            }
             };
             let mut parsed_list = Vec::new();
             for r in recipe_list {
@@ -60,20 +57,34 @@ fn RecipeList(cx: Scope) -> Element {
                 console_log!("We parsed a recipe {}", recipe.title);
                 parsed_list.push(recipe);
             }
-                        props.set(RecipeListProps {
+            // TODO(jwall): It would appear that their API doesn't support this
-                            recipe_list: parsed_list,
+            // model for async operations.
-                        });
+            //self.recipes = parsed_list;
+            return Ok(parsed_list);
         }
     }
-                Err(e) => {
+
-                    console_log!("Error: {}", e);
+    fn get_recipes(&self) -> &Vec<Recipe> {
+        &self.recipes
     }
+
+    fn set_recipes(&mut self, recipes: Vec<Recipe>) {
+        self.recipes = recipes;
     }
-        }
+}
-    });
+
+#[derive(Props)]
+struct RecipeListProps<'a> {
+    app_service: UseState<'a, AppService>,
+}
+
+/// Component to list available recipes.
+fn recipe_list<'a>(cx: Scope<'a, RecipeListProps<'a>>) -> Element {
+    let props = cx.props.app_service;
+
     cx.render(rsx! {
         ul {
-            (&props.recipe_list).into_iter().map(|i| {
+            props.get_recipes().into_iter().map(|i| {
                 let title = &i.title;
                 rsx!(li { "{title}" })
              })
@@ -82,8 +93,24 @@ fn RecipeList(cx: Scope) -> Element {
 }
 
 pub fn ui(cx: Scope) -> Element {
+    let app_state = use_state(&cx, AppService::new);
+
+    let fut = use_future(&cx, || async move { AppService::fetch_recipes().await });
     cx.render(rsx! {
         div { "hello chefs!" }
-        RecipeList { }
+        {match fut.value() {
+            Some(Ok(recipes)) => {
+                app_state.modify().set_recipes(recipes.clone());
+                rsx!{ recipe_list(app_service: app_state) }
+            }
+            Some(Err(e)) => {
+                console_log!("{}", e);
+                rsx!{ div { class: "error", "{e}" } }
+            }
+            None => {
+                //panic!("We seem to have failed to execute our future.")
+                rsx!{ div { "Loading recipe list..." }}
+            }
+        }}
     })
 }