Set context globally and separate components

web/src/main.rs

@@ -12,7 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 mod typings;
+mod service;
 mod web;
+mod root;
+//mod recipe;
+//mod menu;
 use sycamore::prelude::*;
 
 use web::UI;

web/src/root.rs

@@ -0,0 +1,48 @@
+// Copyright 2022 Jeremy Wall
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+use crate::console_log;
+use crate::service::AppService;
+
+use sycamore::{context::use_context, prelude::*};
+
+#[component(Start<G>)]
+pub fn start() -> View<G> {
+    view! {
+        div { "hello chefs!" }
+        RecipeList()
+    }
+}
+
+/// Component to list available recipes.
+#[component(RecipeList<G>)]
+pub fn recipe_list() -> View<G> {
+    let app_service = use_context::<AppService>();
+
+    let titles = create_memo(cloned!(app_service => move || {
+        app_service.get_recipes().get().iter().map(|(i, r)| (*i, r.title.clone())).collect::<Vec<(usize, String)>>()
+    }));
+    view! {
+        ul(class="recipe_list") {
+            Keyed(KeyedProps{
+                iterable: titles,
+                template: |(i, title)| {
+                    view! { li(on:click=move |_| {
+                        console_log!("clicked item with index: {}", i)
+                    }) { (title) } }
+                },
+                key: |(i, title)| (*i, title.clone()),
+            })
+        }
+    }
+}

web/src/service.rs

@@ -0,0 +1,69 @@
+// Copyright 2022 Jeremy Wall
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+use crate::{console_debug, console_error};
+
+use reqwasm::http;
+use sycamore::prelude::*;
+
+use recipes::{parse, Recipe};
+
+#[derive(Clone)]
+pub struct AppService {
+    recipes: Signal<Vec<(usize, Recipe)>>,
+}
+
+impl AppService {
+    pub fn new() -> Self {
+        Self {
+            recipes: Signal::new(Vec::new()),
+        }
+    }
+
+    pub async fn fetch_recipes() -> Result<Vec<(usize, Recipe)>, String> {
+        let resp = match http::Request::get("/api/v1/recipes").send().await {
+            Ok(resp) => resp,
+            Err(e) => return Err(format!("Error: {}", e)),
+        };
+        if resp.status() != 200 {
+            return Err(format!("Status: {}", resp.status()));
+        } else {
+            console_debug!("We got a valid response back!");
+            let recipe_list = match resp.json::<Vec<String>>().await {
+                Ok(recipes) => recipes,
+                Err(e) => return Err(format!("Eror getting recipe list as json {}", e)),
+            };
+            let mut parsed_list = Vec::new();
+            for r in recipe_list {
+                let recipe = match parse::as_recipe(&r) {
+                    Ok(r) => r,
+                    Err(e) => {
+                        console_error!("Error parsing recipe {}", e);
+                        break;
+                    }
+                };
+                console_debug!("We parsed a recipe {}", recipe.title);
+                parsed_list.push(recipe);
+            }
+            return Ok(parsed_list.drain(0..).enumerate().collect());
+        }
+    }
+
+    pub fn get_recipes(&self) -> Signal<Vec<(usize, Recipe)>> {
+        self.recipes.clone()
+    }
+
+    pub fn set_recipes(&mut self, recipes: Vec<(usize, Recipe)>) {
+        self.recipes.set(recipes);
+    }
+}

web/src/web.rs

@@ -12,87 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 use crate::{console_debug, console_error, console_log};
-use reqwasm::http;
+use crate::{root, service::AppService};
-use sycamore::context::{use_context, ContextProvider, ContextProviderProps};
+
-use sycamore::futures::spawn_local_in_scope;
+use sycamore::{
-use sycamore::prelude::*;
+    context::{ContextProvider, ContextProviderProps},
+    futures::spawn_local_in_scope,
+    prelude::*,
+};
 use sycamore_router::{HistoryIntegration, Route, Router, RouterProps};
 
-use recipes::{parse, Recipe};
-
-#[derive(Clone)]
-struct AppService {
-    recipes: Signal<Vec<(usize, Recipe)>>,
-}
-
-impl AppService {
-    fn new() -> Self {
-        Self {
-            recipes: Signal::new(Vec::new()),
-        }
-    }
-
-    async fn fetch_recipes() -> Result<Vec<(usize, Recipe)>, String> {
-        let resp = match http::Request::get("/api/v1/recipes").send().await {
-            Ok(resp) => resp,
-            Err(e) => return Err(format!("Error: {}", e)),
-        };
-        if resp.status() != 200 {
-            return Err(format!("Status: {}", resp.status()));
-        } else {
-            console_debug!("We got a valid response back!");
-            let recipe_list = match resp.json::<Vec<String>>().await {
-                Ok(recipes) => recipes,
-                Err(e) => return Err(format!("Eror getting recipe list as json {}", e)),
-            };
-            let mut parsed_list = Vec::new();
-            for r in recipe_list {
-                let recipe = match parse::as_recipe(&r) {
-                    Ok(r) => r,
-                    Err(e) => {
-                        console_error!("Error parsing recipe {}", e);
-                        break;
-                    }
-                };
-                console_debug!("We parsed a recipe {}", recipe.title);
-                parsed_list.push(recipe);
-            }
-            return Ok(parsed_list.drain(0..).enumerate().collect());
-        }
-    }
-
-    fn get_recipes(&self) -> Signal<Vec<(usize, Recipe)>> {
-        self.recipes.clone()
-    }
-
-    fn set_recipes(&mut self, recipes: Vec<(usize, Recipe)>) {
-        self.recipes.set(recipes);
-    }
-}
-
-/// Component to list available recipes.
-#[component(RecipeList<G>)]
-fn recipe_list() -> View<G> {
-    let app_service = use_context::<AppService>();
-
-    let titles = create_memo(cloned!(app_service => move || {
-        app_service.get_recipes().get().iter().map(|(i, r)| (*i, r.title.clone())).collect::<Vec<(usize, String)>>()
-    }));
-    view! {
-        ul {
-            Keyed(KeyedProps{
-                iterable: titles,
-                template: |(i, title)| {
-                    view! { li(on:click=move |_| {
-                        console_log!("clicked item with index: {}", i)
-                    }) { (title) } }
-                },
-                key: |(i, title)| (*i, title.clone()),
-            })
-        }
-    }
-}
-
 #[derive(Route, Debug)]
 enum AppRoutes {
     #[to("/ui")]
@@ -123,18 +51,19 @@ pub fn ui() -> View<G> {
         });
     }));
     view! {
+        // NOTE(jwall): Set the app_service in our toplevel scope. Children will be able
+        // to find the service as long as they are a child of this scope.
+        ContextProvider(ContextProviderProps {
+                value: app_service.clone(),
+                children: || view! {
                     Router(RouterProps::new(HistoryIntegration::new(), move |routes: ReadSignal<AppRoutes>| {
-            let t = create_memo(cloned!((app_service) => move || {
+                        let t = create_memo(move || {
                             console_debug!("Determining route.");
                             let route = routes.get();
                             console_debug!("Route {:?}", route);
                             match route.as_ref() {
                                 AppRoutes::Root => view! {
-                        div { "hello chefs!" }
+                                    root::Start()
-                        ContextProvider(ContextProviderProps {
-                                value: app_service.clone(),
-                                children: || view! { RecipeList() }
-                        })
                                 },
                                 AppRoutes::Recipe{index:_idx} => view! {
                                     "TODO!!"
@@ -146,13 +75,17 @@ pub fn ui() -> View<G> {
                                     "NotFound"
                                 }
                             }
-            }));
+                        });
                         console_debug!("Created our route view memo.");
                         view! {
+                            // NOTE(jwall): The Router component *requires* there to be exactly one node as the root of this view.
+                            // No fragments or missing nodes allowed or it will panic at runtime.
                             div(class="app") {
                                 (t.get().as_ref().clone())
                             }
                         }
                     }))
                 }
+        })
+    }
 }