feat: load recipes from backend

Recipes are loaded through the API. This was implemented in the style
suggested by the Dioxus documentation where shared state is written to
from a "resolve" function.

Cargo.toml

@@ -25,6 +25,11 @@ tracing = "0.1.37"
 wasm-bindgen = "=0.2.87"
 wasm-bindgen-futures = "0.4.34"
 
+[workspace.dependencies.reqwest]
+version = "0.11.20"
+features = ["rustls-tls", "json"]
+default-features = false
+
 [profile.release]
 # opt-level = 2 # fast and small wasm
 

crates/ui/Cargo.toml

@@ -17,6 +17,7 @@ dioxus-router = "0.4.1"
 dioxus-web = "0.4.0"
 getrandom = { version = "0.2.8", features = ["js"] }
 js-sys = { workspace = true }
+reqwest = { workspace = true }
 serde = { workspace = true }
 tracing = { workspace = true }
 wasm-bindgen = { workspace = true }
@@ -26,6 +27,7 @@ wasm-logger = "0.2.0"
 version = "0.3.4"
 features = [
     "console",
+    "AbortController",
     "CssStyleDeclaration",
     "Document",
     "Element",

crates/ui/src/api.rs

@@ -0,0 +1,27 @@
+use crate::state::AppState;
+use annapurna_data::types::Recipe;
+use dioxus::hooks::UseSharedState;
+
+pub const BASE_API_URL: &str = "/api";
+pub const RECIPE_API_URL: &str = "/recipes";
+
+/// Format a relative path to an absolute URL for the API.
+fn format_url(path: &str) -> String {
+    // determine the absolute path to base of the current page from the browser
+    let current_url = web_sys::window().unwrap().location().origin().unwrap();
+
+    let url = format!("{}{}{}", current_url, BASE_API_URL, path);
+    url
+}
+
+/// Retrieves recipes from the API.
+pub async fn get_recipes() -> Result<Vec<Recipe>, reqwest::Error> {
+    let url = format_url(RECIPE_API_URL);
+    reqwest::get(&url).await?.json().await
+}
+
+/// Retrieves recipes from the API and updates the app state.
+pub async fn resolve_recipes(app_state: UseSharedState<AppState>) {
+    let recipes = get_recipes().await.unwrap();
+    app_state.write().recipes = recipes;
+}

crates/ui/src/lib.rs

@@ -1,9 +1,9 @@
 use crate::{routing::Route, state::AppState};
-use annapurna_data::types::{Ingredient, Recipe};
 use dioxus::prelude::*;
 use dioxus_router::components::Router;
 use wasm_bindgen::prelude::*;
 
+mod api;
 mod components;
 mod routing;
 mod state;
@@ -20,16 +20,7 @@ pub fn launch_app() {
 }
 
 fn app(cx: Scope) -> Element {
-    let recipes = vec![Recipe::new(
-        "pizza dough".to_string(),
-        vec![
-            Ingredient::new("flour".to_string()),
-            Ingredient::new("water".to_string()),
-            Ingredient::new("salt".to_string()),
-            Ingredient::new("yeast".to_string()),
-        ],
-    )];
-    use_shared_state_provider(cx, || AppState { recipes });
+    use_shared_state_provider(cx, AppState::default);
 
     render! {
         Router::<Route> { }

crates/ui/src/routing.rs

@@ -1,4 +1,4 @@
-use crate::{components::Recipe, state::AppState, util};
+use crate::{api::resolve_recipes, components::Recipe, state::AppState, util};
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 
@@ -28,10 +28,6 @@ pub(crate) fn Index(cx: Scope) -> Element {
             },
             "download file"
         }
-        Recipe {
-            name: "pizza dough".to_string(),
-            ingredients: vec!["flour".to_string(), "water".to_string(), "salt".to_string(), "yeast".to_string()],
-        }
     })
 }
 
@@ -45,13 +41,18 @@ pub(crate) fn AppIndex(cx: Scope) -> Element {
 #[allow(non_snake_case)]
 pub(crate) fn AppRecipes(cx: Scope) -> Element {
     let app_state = use_shared_state::<AppState>(cx).unwrap();
+    use_future(cx, (), |_| resolve_recipes(app_state.clone()));
 
     cx.render(rsx! {
-        app_state.read().recipes.iter().map(|recipe| rsx! {
-            Recipe {
-                name: recipe.name.clone(),
-                ingredients: recipe.ingredients.iter().map(|ingredient| ingredient.name.clone()).collect(),
-            }
-        })
+        div {
+            h1 { "Recipes" }
+
+            app_state.read().recipes.iter().map(|recipe| rsx! {
+                Recipe {
+                    name: recipe.name.clone(),
+                    ingredients: recipe.ingredients.iter().map(|ingredient| ingredient.name.clone()).collect(),
+                }
+            })
+        }
     })
 }