Display a recipe in the page when clicked on

web/src/components/mod.rs

@@ -15,3 +15,6 @@ pub mod recipe;
 pub mod root;
 //mod recipe;
 //mod menu;
+
+pub use recipe::*;
+pub use root::*;

web/src/components/recipe.rs

@@ -20,13 +20,14 @@ use sycamore::{context::use_context, prelude::*};
 fn steps(steps: ReadSignal<Vec<recipes::Step>>) -> View<G> {
     view! {
             h2 { "Steps: " }
-            ul(class="recipe_steps") {
+            div(class="recipe_steps") {
                 Indexed(IndexedProps{
                     iterable: steps,
                     template: |step: recipes::Step| { view! {
-                        li {
+                        div {
-                            //div() {}
+                            div(class="instructions") {
-                            div(class="instructions") {}
+                                (step.instructions)
+                            }
                             ul(class="ingredients") {
                                 Indexed(IndexedProps{
                                     iterable: Signal::new(step.ingredients).handle(),

web/src/components/root.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::console_log;
+use crate::components::*;
 use crate::service::AppService;
 
 use sycamore::{context::use_context, prelude::*};
@@ -24,6 +24,16 @@ pub fn start() -> View<G> {
     }
 }
 
+#[component(RecipeView<G>)]
+pub fn recipe_view(idx: usize) -> View<G> {
+    let idx = Signal::new(idx);
+    view! {
+        div { "hello chefs!"}
+        RecipeList()
+        Recipe(idx.handle())
+    }
+}
+
 /// Component to list available recipes.
 #[component(RecipeList<G>)]
 pub fn recipe_list() -> View<G> {
@@ -37,9 +47,7 @@ pub fn recipe_list() -> View<G> {
             Keyed(KeyedProps{
                 iterable: titles,
                 template: |(i, title)| {
-                    view! { li(on:click=move |_| {
+                    view! { li { a(href=format!("/ui/recipe/{}", i)) { (title) } } }
-                        console_log!("clicked item with index: {}", i)
-                    }) { (title) } }
                 },
                 key: |(i, title)| (*i, title.clone()),
             })

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::root, service::AppService};
+use crate::{components::*, service::AppService};
 use crate::{console_debug, console_error, console_log};
 
 use sycamore::{
@@ -63,10 +63,10 @@ pub fn ui() -> View<G> {
                             console_debug!("Route {:?}", route);
                             match route.as_ref() {
                                 AppRoutes::Root => view! {
-                                    root::Start()
+                                    Start()
                                 },
-                                AppRoutes::Recipe{index:_idx} => view! {
+                                AppRoutes::Recipe{index:idx} => view! {
-                                    "TODO!!"
+                                        RecipeView(*idx)
                                 },
                                 AppRoutes::Menu => view! {
                                     "TODO!!"