Rearrange ui for separate plan and editing sections

web/src/components/header.rs

@@ -18,8 +18,10 @@ use sycamore::prelude::*;
 pub fn Header<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
         nav(class="no-print") {
-            h1(class="title") { "Meal Plan" }
+            h1(class="title") { "Kitchen" }
             ul {
+                li { a(href="/ui/plan") { "MealPlan" } }
+                li { a(href="/ui/categories") { "Manage" } }
                 li { a(href="/ui/login") { "Login" } }
                 li { a(href="https://github.com/zaphar/kitchen") { "Github" } }
             }

web/src/components/tabs.rs

@@ -14,27 +14,23 @@
 use sycamore::prelude::*;
 use tracing::debug;
 
-use super::Header;
+#[derive(Prop)]
-#[derive(Clone, Prop)]
+pub struct TabState<'a, G: Html> {
-pub struct TabState<G: GenericNode> {
+    pub children: Children<'a, G>,
-    pub inner: View<G>,
     pub selected: Option<String>,
+    tablist: Vec<(&'static str, &'static str)>,
 }
 
 #[component]
-pub fn TabbedView<G: Html>(cx: Scope, state: TabState<G>) -> View<G> {
+pub fn TabbedView<'a, G: Html>(cx: Scope<'a>, state: TabState<'a, G>) -> View<G> {
-    let tablist = create_signal(
+    let TabState {
-        cx,
+        children,
-        vec![
+        selected,
-            ("/ui/plan", "Plan"),
+        tablist,
-            ("/ui/inventory", "Inventory"),
+    } = state;
-            ("/ui/cook", "Cook"),
+    let tablist = create_signal(cx, tablist.clone());
-            ("/ui/categories", "Categories"),
+    let children = children.call(cx);
-        ],
-    );
-    let TabState { inner, selected } = state;
     view! {cx,
-        Header { }
         nav {
             ul(class="tabs") {
                 Indexed(
@@ -54,7 +50,7 @@ pub fn TabbedView<G: Html>(cx: Scope, state: TabState<G>) -> View<G> {
             }
         }
         main(class=".conatiner-fluid") {
-            (inner)
+            (children)
         }
     }
 }

web/src/pages/login.rs

@@ -11,8 +11,6 @@
 // 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::tabs::*;
-
 use base64;
 use reqwasm::http;
 use sycamore::{futures::spawn_local_scoped, prelude::*};
@@ -80,9 +78,6 @@ pub fn LoginForm<G: Html>(cx: Scope) -> View<G> {
 #[component]
 pub fn LoginPage<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
-        TabbedView(TabState {
+            LoginForm()
-            inner: view! {cx, LoginForm { } },
-            selected: None,
-        })
     }
 }

web/src/pages/manage/categories.rs

@@ -11,8 +11,8 @@
 // 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 super::ManagePage;
 use crate::components::categories::*;
-use crate::components::tabs::*;
 
 use sycamore::prelude::*;
 use tracing::instrument;
@@ -21,11 +21,8 @@ use tracing::instrument;
 #[component()]
 pub fn CategoryPage<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
-        TabbedView(TabState {
+        ManagePage(
-            inner: view! {cx,
+            selected=Some("Categories".to_owned()),
-                Categories { }
+        ) { Categories() }
-            },
-            selected: Some("Categories".to_owned()),
-        })
     }
 }

web/src/pages/manage/mod.rs

@@ -0,0 +1,37 @@
+// Copyright 2022 Jeremy Wall (Jeremy@marzhilsltudios.com)
+//
+// 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::tabs::*;
+use sycamore::prelude::*;
+
+pub mod categories;
+
+#[derive(Prop)]
+pub struct PageState<'a, G: Html> {
+    pub children: Children<'a, G>,
+    pub selected: Option<String>,
+}
+
+#[component]
+pub fn ManagePage<'a, G: Html>(cx: Scope<'a>, state: PageState<'a, G>) -> View<G> {
+    let PageState { children, selected } = state;
+    let children = children.call(cx);
+    let manage_tabs: Vec<(&'static str, &'static str)> = vec![("/ui/categories", "Categories")];
+
+    view! {cx,
+        TabbedView(
+            selected=selected,
+            tablist=manage_tabs,
+        ) { (children) }
+    }
+}

web/src/pages/mod.rs

@@ -11,16 +11,14 @@
 // 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.
-mod categories;
-mod cook;
-mod inventory;
 mod login;
-mod plan;
+mod manage;
+mod planning;
 mod recipe;
 
-pub use categories::*;
-pub use cook::*;
-pub use inventory::*;
 pub use login::*;
-pub use plan::*;
+pub use manage::categories::*;
+pub use planning::cook::*;
+pub use planning::inventory::*;
+pub use planning::plan::*;
 pub use recipe::*;

web/src/pages/planning/cook.rs

@@ -11,18 +11,16 @@
 // 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_list::*, tabs::*};
-
 use sycamore::prelude::*;
 
+use super::PlanningPage;
+use crate::components::recipe_list::*;
+
 #[component]
 pub fn CookPage<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
-        TabbedView(TabState {
+        PlanningPage(
-            inner: view! {cx,
+            selected=Some("Cook".to_owned()),
-                RecipeList { }
+        ) { RecipeList() }
-            },
-            selected: Some("Cook".to_owned()),
-        })
     }
 }

web/src/pages/planning/inventory.rs

@@ -11,18 +11,16 @@
 // 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_list::*, tabs::*};
-
 use sycamore::prelude::*;
 
+use super::PlanningPage;
+use crate::components::shopping_list::*;
+
 #[component]
 pub fn InventoryPage<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
-        TabbedView(TabState {
+        PlanningPage(
-            inner: view! {cx,
+            selected=Some("Inventory".to_owned()),
-                ShoppingList {}
+        ) { ShoppingList() }
-            },
-            selected: Some("Inventory".to_owned()),
-        })
     }
 }

web/src/pages/planning/mod.rs

@@ -0,0 +1,43 @@
+// Copyright 2022 Jeremy Wall (Jeremy@marzhilsltudios.com)
+//
+// 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::tabs::*;
+use sycamore::prelude::*;
+
+pub mod cook;
+pub mod inventory;
+pub mod plan;
+
+#[derive(Prop)]
+pub struct PageState<'a, G: Html> {
+    pub children: Children<'a, G>,
+    pub selected: Option<String>,
+}
+
+#[component]
+pub fn PlanningPage<'a, G: Html>(cx: Scope<'a>, state: PageState<'a, G>) -> View<G> {
+    let PageState { children, selected } = state;
+    let children = children.call(cx);
+    let planning_tabs: Vec<(&'static str, &'static str)> = vec![
+        ("/ui/plan", "Plan"),
+        ("/ui/inventory", "Inventory"),
+        ("/ui/cook", "Cook"),
+    ];
+
+    view! {cx,
+        TabbedView(
+            selected=selected,
+            tablist=planning_tabs,
+        ) { (children) }
+    }
+}

web/src/pages/planning/plan.rs

@@ -11,18 +11,16 @@
 // 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_selector::*, tabs::*};
+use super::PlanningPage;
+use crate::components::recipe_selector::*;
 
 use sycamore::prelude::*;
 
 #[component]
 pub fn PlanPage<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
-        TabbedView(TabState {
+        PlanningPage(
-            inner: view! {cx,
+            selected=Some("Plan".to_owned()),
-                 RecipeSelector()
+        ) { RecipeSelector() }
-            },
-            selected: Some("Plan".to_owned()),
-        })
     }
 }

web/src/pages/recipe.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::{recipe::Recipe, tabs::*};
+use crate::components::recipe::Recipe;
 
 use sycamore::prelude::*;
 use tracing::instrument;
@@ -25,11 +25,6 @@ pub struct RecipePageProps {
 #[component()]
 pub fn RecipePage<G: Html>(cx: Scope, props: RecipePageProps) -> View<G> {
     view! {cx,
-        TabbedView(TabState {
+        Recipe(props.recipe)
-            inner: view! {cx,
-                Recipe(props.recipe)
-            },
-            selected: None,
-        })
     }
 }

web/src/web.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::pages::*;
+use sycamore::{futures::spawn_local_scoped, prelude::*};
-use crate::{api, app_state::*, router_integration::*};
 use tracing::{error, info, instrument};
 
-use sycamore::{futures::spawn_local_scoped, prelude::*};
+use crate::components::Header;
+use crate::pages::*;
+use crate::{api, app_state::*, router_integration::*};
 
 #[instrument]
 fn route_switch<G: Html>(cx: Scope, route: &ReadSignal<Routes>) -> View<G> {
@@ -67,6 +68,7 @@ pub fn UI<G: Html>(cx: Scope) -> View<G> {
             };
             view.set(view! { cx,
                 div(class="app") {
+                    Header { }
                     Router(RouterProps {
                         route: Routes::Plan,
                         route_select: route_switch,