Skeleton for a tabbed component

web/src/components/mod.rs

@@ -15,8 +15,10 @@ pub mod header;
 pub mod recipe;
 pub mod root;
 pub mod shopping;
+pub mod tabs;
 
 pub use header::*;
 pub use recipe::*;
 pub use root::*;
 pub use shopping::*;
+pub use tabs::*;

web/src/components/shopping.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::{app_state::*, components::Recipe, service::AppService};
+use crate::{components::Recipe, service::AppService};
 use crate::{console_error, console_log};
 use std::collections::HashMap;
 use std::{
@@ -49,7 +49,7 @@ fn recipe_selection(props: RecipeCheckBoxProps) -> View<G> {
 }
 
 #[component(RecipeSelector<G>)]
-pub fn recipe_selector(page_state: crate::pages::PageState) -> View<G> {
+pub fn recipe_selector() -> View<G> {
     let app_service = use_context::<AppService>();
     let rows = create_memo(cloned!(app_service => move || {
         let mut rows = Vec::new();
@@ -92,17 +92,11 @@ pub fn recipe_selector(page_state: crate::pages::PageState) -> View<G> {
                 }).collect()
             ))
         }
-        input(type="button", value="Inventory", 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);
-        }))
     }
 }
 
 #[component(ShoppingList<G>)]
-pub fn shopping_list(page_state: crate::pages::PageState) -> View<G> {
+pub fn shopping_list() -> View<G> {
     let app_service = use_context::<AppService>();
     let filtered_keys = Signal::new(HashSet::new());
     let ingredients_map = Signal::new(BTreeMap::new());
@@ -166,17 +160,11 @@ pub fn shopping_list(page_state: crate::pages::PageState) -> 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>)]
-pub fn recipe_list(page_state: crate::pages::PageState) -> View<G> {
+pub fn recipe_list() -> View<G> {
     let app_service = use_context::<AppService>();
     let menu_list = create_memo(move || app_service.get_menu_list());
     view! {
@@ -192,23 +180,5 @@ pub fn recipe_list(page_state: crate::pages::PageState) -> 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);
-        }))
-    }
-}
-
-#[component(MealPlan<G>)]
-pub fn meal_plan() -> View<G> {
-    view! {
-        h1 {
-            "Select your recipes"
-        }
-        //RecipeSelector()
-        //ShoppingList()
-        //RecipeList()
     }
 }

web/src/components/tabs.rs

@@ -0,0 +1,38 @@
+// 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;
+
+#[derive(Clone)]
+pub struct TabState<G: GenericNode> {
+    pub route: Signal<AppRoutes>,
+    pub inner: View<G>,
+}
+
+#[component(TabbedView<G>)]
+pub fn tabbed_view(state: TabState<G>) -> View<G> {
+    cloned!((state) => view! {
+        input(type="button", value="Plan", class="no-print", on:click=cloned!((state) => move |_| {
+            state.route.set(AppRoutes::Plan);
+        }))
+        input(type="button", value="Inventory", class="no-print", on:click=cloned!((state) => move |_| {
+            state.route.set(AppRoutes::Inventory);
+        }))
+        input(type="button", value="Cook", class="no-print", on:click=cloned!((state) => move |_| {
+            state.route.set(AppRoutes::Cook);
+        }))
+        (state.inner)
+    })
+}

web/src/pages/cook.rs

@@ -11,11 +11,12 @@
 // 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::components::{shopping::RecipeList, tabs::*};
 use crate::pages::PageState;
 
 use sycamore::prelude::*;
 
+#[derive(Clone)]
 pub struct CookPageProps {
     pub page_state: PageState,
 }
@@ -23,6 +24,11 @@ pub struct CookPageProps {
 #[component(CookPage<G>)]
 pub fn cook_page(props: CookPageProps) -> View<G> {
     view! {
-        RecipeList(props.page_state)
+        TabbedView(TabState {
+            route: props.page_state.route.clone(),
+            inner: view! {
+                RecipeList()
+            },
+        })
     }
 }

web/src/pages/inventory.rs

@@ -11,11 +11,12 @@
 // 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::components::{shopping::ShoppingList, tabs::*};
 use crate::pages::PageState;
 
 use sycamore::prelude::*;
 
+#[derive(Clone)]
 pub struct InventoryPageProps {
     pub page_state: PageState,
 }
@@ -23,6 +24,11 @@ pub struct InventoryPageProps {
 #[component(InventoryPage<G>)]
 pub fn inventory_page(props: InventoryPageProps) -> View<G> {
     view! {
-        ShoppingList(props.page_state)
+        TabbedView(TabState {
+            route: props.page_state.route.clone(),
+            inner: view! {
+                ShoppingList()
+            },
+        })
     }
 }

web/src/pages/mod.rs

@@ -15,15 +15,15 @@ use sycamore::prelude::*;
 
 use crate::app_state::AppRoutes;
 
-mod plan;
-mod inventory;
 mod cook;
+mod inventory;
+mod plan;
 
-pub use plan::*;
-pub use inventory::*;
 pub use cook::*;
+pub use inventory::*;
+pub use plan::*;
 
 #[derive(Clone)]
 pub struct PageState {
-    pub route: Signal<AppRoutes>  
+    pub route: Signal<AppRoutes>,
 }

web/src/pages/plan.rs

@@ -11,18 +11,24 @@
 // 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::RecipeSelector, tabs::*};
 use crate::pages::PageState;
-use crate::components::RecipeSelector;
 
 use sycamore::prelude::*;
 
+#[derive(Clone)]
 pub struct PlanPageProps {
-    pub page_state: PageState
+    pub page_state: PageState,
 }
 
 #[component(PlanPage<G>)]
 pub fn plan_page(props: PlanPageProps) -> View<G> {
     view! {
-        RecipeSelector(props.page_state)
+        TabbedView(TabState {
+            route: props.page_state.route.clone(),
+            inner: view! {
+                RecipeSelector()
+            },
+        })
     }
 }