Refactor to a page based model for the UI

web/src/app_state.rs

@@ -0,0 +1,23 @@
+// 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.
+
+
+#[derive(Debug)]
+pub enum AppRoutes {
+    Plan,
+    Recipe { index: usize },
+    NotFound,
+    Inventory,
+    Cook,
+}

web/src/components/shopping.rs

@@ -11,8 +11,7 @@
 // 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::components::Recipe;
+use crate::{app_state::*, components::Recipe, service::AppService};
-use crate::service::AppService;
 use crate::{console_error, console_log};
 use std::collections::HashMap;
 use std::{
@@ -50,7 +49,7 @@ fn recipe_selection(props: RecipeCheckBoxProps) -> View<G> {
 }
 
 #[component(RecipeSelector<G>)]
-pub fn recipe_selector() -> View<G> {
+pub fn recipe_selector(page_state: crate::pages::PageState) -> View<G> {
     let app_service = use_context::<AppService>();
     let rows = create_memo(cloned!(app_service => move || {
         let mut rows = Vec::new();
@@ -72,6 +71,11 @@ pub fn recipe_selector() -> View<G> {
         }));
     }));
     view! {
+        input(type="button", value="Refresh Recipes", on:click=move |_| {
+            // Poor man's click event signaling.
+            let toggle = !*clicked.get();
+            clicked.set(toggle);
+        })
         fieldset(class="recipe_selector no-print container no-left-mgn pad-top") {
             (View::new_fragment(
                 rows.get().iter().cloned().map(|r| {
@@ -88,16 +92,17 @@ pub fn recipe_selector() -> View<G> {
                 }).collect()
             ))
         }
-        input(type="button", value="Refresh Recipes", on:click=move |_| {
+        input(type="button", value="Inventory", on:click=cloned!((page_state) => move |_| {
-            // Poor man's click event signaling.
+            page_state.route.set(AppRoutes::Inventory);
-            let toggle = !*clicked.get();
+        }))
-            clicked.set(toggle);
+        input(type="button", value="Cook", class="no-print", on:click=cloned!((page_state) => move |_| {
-        })
+            page_state.route.set(AppRoutes::Cook);
+        }))
     }
 }
 
 #[component(ShoppingList<G>)]
-fn shopping_list() -> View<G> {
+pub fn shopping_list(page_state: crate::pages::PageState) -> View<G> {
     let app_service = use_context::<AppService>();
     let filtered_keys = Signal::new(HashSet::new());
     let ingredients_map = Signal::new(BTreeMap::new());
@@ -161,11 +166,17 @@ fn shopping_list() -> View<G> {
             modified_amts.set(HashMap::new());
         }))
         (table_view.get().as_ref().clone())
+        input(type="button", value="Plan", class="no-print", on:click=cloned!((page_state) => move |_| {
+            page_state.route.set(AppRoutes::Plan);
+        }))
+        input(type="button", value="Cook", class="no-print", on:click=cloned!((page_state) => move |_| {
+            page_state.route.set(AppRoutes::Cook);
+        }))
     }
 }
 
 #[component(RecipeList<G>)]
-fn recipe_list() -> View<G> {
+pub fn recipe_list(page_state: crate::pages::PageState) -> View<G> {
     let app_service = use_context::<AppService>();
     let menu_list = create_memo(move || app_service.get_menu_list());
     view! {
@@ -181,6 +192,12 @@ fn recipe_list() -> View<G> {
                 }
             }
         })
+        input(type="button", value="Inventory", class="no-print", on:click=cloned!((page_state) => move |_| {
+            page_state.route.set(AppRoutes::Inventory);
+        }))
+        input(type="button", value="Cook", class="no-print", on:click=cloned!((page_state) => move |_| {
+            page_state.route.set(AppRoutes::Cook);
+        }))
     }
 }
 
@@ -190,8 +207,8 @@ pub fn meal_plan() -> View<G> {
         h1 {
             "Select your recipes"
         }
-        RecipeSelector()
+        //RecipeSelector()
-        ShoppingList()
+        //ShoppingList()
-        RecipeList()
+        //RecipeList()
     }
 }

web/src/main.rs

@@ -12,9 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 mod components;
+mod pages;
 mod service;
 mod typings;
 mod web;
+mod app_state;
 
 use sycamore::prelude::*;
 

web/src/pages/cook.rs

@@ -0,0 +1,28 @@
+// 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::components::shopping::RecipeList;
+use crate::pages::PageState;
+
+use sycamore::prelude::*;
+
+pub struct CookPageProps {
+    pub page_state: PageState,
+}
+
+#[component(CookPage<G>)]
+pub fn cook_page(props: CookPageProps) -> View<G> {
+    view! {
+        RecipeList(props.page_state)
+    }
+}

web/src/pages/inventory.rs

@@ -0,0 +1,28 @@
+// 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::components::shopping::ShoppingList;
+use crate::pages::PageState;
+
+use sycamore::prelude::*;
+
+pub struct InventoryPageProps {
+    pub page_state: PageState,
+}
+
+#[component(InventoryPage<G>)]
+pub fn inventory_page(props: InventoryPageProps) -> View<G> {
+    view! {
+        ShoppingList(props.page_state)
+    }
+}

web/src/pages/mod.rs

@@ -0,0 +1,29 @@
+// 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 sycamore::prelude::*;
+
+use crate::app_state::AppRoutes;
+
+mod plan;
+mod inventory;
+mod cook;
+
+pub use plan::*;
+pub use inventory::*;
+pub use cook::*;
+
+#[derive(Clone)]
+pub struct PageState {
+    pub route: Signal<AppRoutes>  
+}

web/src/pages/plan.rs

@@ -0,0 +1,28 @@
+// 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::pages::PageState;
+use crate::components::RecipeSelector;
+
+use sycamore::prelude::*;
+
+pub struct PlanPageProps {
+    pub page_state: PageState
+}
+
+#[component(PlanPage<G>)]
+pub fn plan_page(props: PlanPageProps) -> View<G> {
+    view! {
+        RecipeSelector(props.page_state)
+    }
+}

web/src/web.rs

@@ -11,7 +11,7 @@
 // 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::{components::*, service::AppService};
+use crate::{app_state::*, components::*, service::AppService};
 use crate::{console_debug, console_error, console_log};
 
 use sycamore::{
@@ -19,23 +19,21 @@ use sycamore::{
     futures::spawn_local_in_scope,
     prelude::*,
 };
-use sycamore_router::{HistoryIntegration, Route, Router, RouterProps};
 
-#[derive(Route, Debug)]
+use crate::pages::*;
-enum AppRoutes {
-    #[to("/ui/")]
-    Plan,
-    #[to("/ui/recipe/<index>")]
-    Recipe { index: usize },
-    #[not_found]
-    NotFound,
-}
 
-fn route_switch<G: Html>(route: ReadSignal<AppRoutes>) -> View<G> {
+fn route_switch<G: Html>(page_state: PageState) -> View<G> {
-    view! {
+    let route = page_state.route.clone();
+    cloned!((page_state, route) => view! {
         (match route.get().as_ref() {
             AppRoutes::Plan => view! {
-                MealPlan()
+                PlanPage(PlanPageProps { page_state: page_state.clone() })
+            },
+            AppRoutes::Inventory => view! {
+                InventoryPage(InventoryPageProps { page_state: page_state.clone() })
+            },
+            AppRoutes::Cook => view! {
+                CookPage(CookPageProps { page_state: page_state.clone() })
             },
             AppRoutes::Recipe { index: idx } => view! {
                 RecipeView(*idx)
@@ -44,7 +42,7 @@ fn route_switch<G: Html>(route: ReadSignal<AppRoutes>) -> View<G> {
                 "NotFound"
             },
         })
-    }
+    })
 }
 
 #[component(UI<G>)]
@@ -56,11 +54,12 @@ pub fn ui() -> View<G> {
         // to find the service as long as they are a child of this scope.
         ContextProvider(ContextProviderProps {
             value: app_service.clone(),
-                children: || view! {
+            children: || {
-                    Router(RouterProps::new(HistoryIntegration::new(), move |routes: ReadSignal<AppRoutes>| {
                 let view = Signal::new(View::empty());
-                        create_effect(cloned!((view) => move || {
+                let route = Signal::new(AppRoutes::Plan);
-                            spawn_local_in_scope(cloned!((routes, view) => {
+                let page_state = PageState { route: route.clone() };
+                create_effect(cloned!((page_state, view) => move || {
+                    spawn_local_in_scope(cloned!((page_state, view) => {
                         let mut app_service = app_service.clone();
                         async move {
                             match AppService::fetch_recipes().await {
@@ -73,7 +72,7 @@ pub fn ui() -> View<G> {
                                 Err(msg) => console_error!("Failed to get recipes {}", msg),
                             }
                             console_debug!("Determining route.");
-                                    view.set(route_switch(routes));
+                            view.set(route_switch(page_state.clone()));
                             console_debug!("Created our route view effect.");
                         }
                     }));
@@ -86,7 +85,6 @@ pub fn ui() -> View<G> {
                         (view.get().as_ref().clone())
                     }
                 }
-                    }))
             }
         })
     }