From 22eadb832a9395de77cc688d0fe9cce4b538eabe Mon Sep 17 00:00:00 2001
From: Jeremy Wall <jeremy@marzhillstudios.com>
Date: Mon, 7 Feb 2022 16:03:51 -0500
Subject: [PATCH] Add header with some navigation

---
 web/src/components/header.rs   | 26 ++++++++++++++++
 web/src/components/mod.rs      |  6 ++--
 web/src/components/shopping.rs | 56 ++++++++++++++++++++++++++++++++++
 web/src/web.rs                 |  3 +-
 4 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/header.rs
 create mode 100644 web/src/components/shopping.rs

diff --git a/web/src/components/header.rs b/web/src/components/header.rs
new file mode 100644
index 0000000..3114c31
--- /dev/null
+++ b/web/src/components/header.rs
@@ -0,0 +1,26 @@
+// 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::*;
+
+#[component(Header<G>)]
+pub fn header() -> View<G> {
+    view! {
+        div(class="menu") {
+            span { a(href="/ui/") { "home" }}
+            " | "
+            span { a(href="/ui/shopping/") { "shopping list" }}
+        }
+    }
+}
diff --git a/web/src/components/mod.rs b/web/src/components/mod.rs
index 5e018f8..f0020fc 100644
--- a/web/src/components/mod.rs
+++ b/web/src/components/mod.rs
@@ -11,10 +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.
+pub mod header;
 pub mod recipe;
 pub mod root;
-//mod recipe;
-//mod menu;
+pub mod shopping;
 
+pub use header::*;
 pub use recipe::*;
 pub use root::*;
+pub use shopping::*;
diff --git a/web/src/components/shopping.rs b/web/src/components/shopping.rs
new file mode 100644
index 0000000..fe360b8
--- /dev/null
+++ b/web/src/components/shopping.rs
@@ -0,0 +1,56 @@
+// 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 std::rc::Rc;
+
+use sycamore::{context::use_context, prelude::*};
+
+#[component(RecipeSelector<G>)]
+pub fn recipe_selector() -> 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! {
+        fieldset(class="recipe_selector") {
+            Keyed(KeyedProps{
+                iterable: titles,
+                template: |(i, title)| {
+                    // This is total hack but it works around the borrow issues with
+                    // the `view!` macro.
+                    let id_as_str = Rc::new(format!("{}", i));
+                    let id_cloned = id_as_str.clone();
+                    let id_cloned_2 = id_as_str.clone();
+                    view! {
+                        input(type="checkbox", name="recipe_id", value=id_as_str.clone(), on:click=move |_| {
+                            console_log!("clicked checkbox for id {}", id_cloned);
+                        })
+                        label(for=id_cloned_2) { (title) } }
+                },
+                key: |(i, title)| (*i, title.clone()),
+            })
+        }
+    }
+}
+
+#[component(MenuView<G>)]
+pub fn shopping_view() -> View<G> {
+    view! {
+        h1 {
+            "Select your recipes"
+        }
+        RecipeSelector()
+    }
+}
diff --git a/web/src/web.rs b/web/src/web.rs
index 1cf2ccc..8ce50c5 100644
--- a/web/src/web.rs
+++ b/web/src/web.rs
@@ -27,7 +27,7 @@ enum AppRoutes {
     Root,
     #[to("/ui/recipe/<index>")]
     Recipe { index: usize },
-    #[to("/ui/menu")]
+    #[to("/ui/shopping")]
     Menu,
     #[not_found]
     NotFound,
@@ -81,6 +81,7 @@ pub fn ui() -> View<G> {
                             // 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") {
+                                Header()
                                 (t.get().as_ref().clone())
                             }
                         }