Display a recipe in the page when clicked on

This commit is contained in:
Jeremy Wall 2022-02-02 16:57:24 -05:00
parent cb641f448f
commit 6d04de7a45
4 changed files with 24 additions and 12 deletions

View File

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

View File

@ -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(class="instructions") {}
div {
div(class="instructions") {
(step.instructions)
}
ul(class="ingredients") {
Indexed(IndexedProps{
iterable: Signal::new(step.ingredients).handle(),

View File

@ -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 |_| {
console_log!("clicked item with index: {}", i)
}) { (title) } }
view! { li { a(href=format!("/ui/recipe/{}", i)) { (title) } } }
},
key: |(i, title)| (*i, title.clone()),
})

View File

@ -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! {
"TODO!!"
AppRoutes::Recipe{index:idx} => view! {
RecipeView(*idx)
},
AppRoutes::Menu => view! {
"TODO!!"