Set context globally and separate components

This commit is contained in:
Jeremy Wall 2022-01-27 21:29:17 -05:00
parent dc0e79a4d8
commit 58bd494368
4 changed files with 163 additions and 109 deletions

View File

@ -12,7 +12,11 @@
// See the License for the specific language governing permissions and
// limitations under the License.
mod typings;
mod service;
mod web;
mod root;
//mod recipe;
//mod menu;
use sycamore::prelude::*;
use web::UI;

48
web/src/root.rs Normal file
View File

@ -0,0 +1,48 @@
// 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 sycamore::{context::use_context, prelude::*};
#[component(Start<G>)]
pub fn start() -> View<G> {
view! {
div { "hello chefs!" }
RecipeList()
}
}
/// Component to list available recipes.
#[component(RecipeList<G>)]
pub fn recipe_list() -> 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! {
ul(class="recipe_list") {
Keyed(KeyedProps{
iterable: titles,
template: |(i, title)| {
view! { li(on:click=move |_| {
console_log!("clicked item with index: {}", i)
}) { (title) } }
},
key: |(i, title)| (*i, title.clone()),
})
}
}
}

69
web/src/service.rs Normal file
View File

@ -0,0 +1,69 @@
// 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_debug, console_error};
use reqwasm::http;
use sycamore::prelude::*;
use recipes::{parse, Recipe};
#[derive(Clone)]
pub struct AppService {
recipes: Signal<Vec<(usize, Recipe)>>,
}
impl AppService {
pub fn new() -> Self {
Self {
recipes: Signal::new(Vec::new()),
}
}
pub async fn fetch_recipes() -> Result<Vec<(usize, Recipe)>, String> {
let resp = match http::Request::get("/api/v1/recipes").send().await {
Ok(resp) => resp,
Err(e) => return Err(format!("Error: {}", e)),
};
if resp.status() != 200 {
return Err(format!("Status: {}", resp.status()));
} else {
console_debug!("We got a valid response back!");
let recipe_list = match resp.json::<Vec<String>>().await {
Ok(recipes) => recipes,
Err(e) => return Err(format!("Eror getting recipe list as json {}", e)),
};
let mut parsed_list = Vec::new();
for r in recipe_list {
let recipe = match parse::as_recipe(&r) {
Ok(r) => r,
Err(e) => {
console_error!("Error parsing recipe {}", e);
break;
}
};
console_debug!("We parsed a recipe {}", recipe.title);
parsed_list.push(recipe);
}
return Ok(parsed_list.drain(0..).enumerate().collect());
}
}
pub fn get_recipes(&self) -> Signal<Vec<(usize, Recipe)>> {
self.recipes.clone()
}
pub fn set_recipes(&mut self, recipes: Vec<(usize, Recipe)>) {
self.recipes.set(recipes);
}
}

View File

@ -12,87 +12,15 @@
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::{console_debug, console_error, console_log};
use reqwasm::http;
use sycamore::context::{use_context, ContextProvider, ContextProviderProps};
use sycamore::futures::spawn_local_in_scope;
use sycamore::prelude::*;
use crate::{root, service::AppService};
use sycamore::{
context::{ContextProvider, ContextProviderProps},
futures::spawn_local_in_scope,
prelude::*,
};
use sycamore_router::{HistoryIntegration, Route, Router, RouterProps};
use recipes::{parse, Recipe};
#[derive(Clone)]
struct AppService {
recipes: Signal<Vec<(usize, Recipe)>>,
}
impl AppService {
fn new() -> Self {
Self {
recipes: Signal::new(Vec::new()),
}
}
async fn fetch_recipes() -> Result<Vec<(usize, Recipe)>, String> {
let resp = match http::Request::get("/api/v1/recipes").send().await {
Ok(resp) => resp,
Err(e) => return Err(format!("Error: {}", e)),
};
if resp.status() != 200 {
return Err(format!("Status: {}", resp.status()));
} else {
console_debug!("We got a valid response back!");
let recipe_list = match resp.json::<Vec<String>>().await {
Ok(recipes) => recipes,
Err(e) => return Err(format!("Eror getting recipe list as json {}", e)),
};
let mut parsed_list = Vec::new();
for r in recipe_list {
let recipe = match parse::as_recipe(&r) {
Ok(r) => r,
Err(e) => {
console_error!("Error parsing recipe {}", e);
break;
}
};
console_debug!("We parsed a recipe {}", recipe.title);
parsed_list.push(recipe);
}
return Ok(parsed_list.drain(0..).enumerate().collect());
}
}
fn get_recipes(&self) -> Signal<Vec<(usize, Recipe)>> {
self.recipes.clone()
}
fn set_recipes(&mut self, recipes: Vec<(usize, Recipe)>) {
self.recipes.set(recipes);
}
}
/// Component to list available recipes.
#[component(RecipeList<G>)]
fn recipe_list() -> 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! {
ul {
Keyed(KeyedProps{
iterable: titles,
template: |(i, title)| {
view! { li(on:click=move |_| {
console_log!("clicked item with index: {}", i)
}) { (title) } }
},
key: |(i, title)| (*i, title.clone()),
})
}
}
}
#[derive(Route, Debug)]
enum AppRoutes {
#[to("/ui")]
@ -123,36 +51,41 @@ pub fn ui() -> View<G> {
});
}));
view! {
Router(RouterProps::new(HistoryIntegration::new(), move |routes: ReadSignal<AppRoutes>| {
let t = create_memo(cloned!((app_service) => move || {
console_debug!("Determining route.");
let route = routes.get();
console_debug!("Route {:?}", route);
match route.as_ref() {
AppRoutes::Root => view! {
div { "hello chefs!" }
ContextProvider(ContextProviderProps {
value: app_service.clone(),
children: || view! { RecipeList() }
})
},
AppRoutes::Recipe{index:_idx} => view! {
"TODO!!"
},
AppRoutes::Menu => view! {
"TODO!!"
},
AppRoutes::NotFound => view! {
"NotFound"
}
// NOTE(jwall): Set the app_service in our toplevel scope. Children will be able
// to find the service as long as they are a child of this scope.
ContextProvider(ContextProviderProps {
value: app_service.clone(),
children: || view! {
Router(RouterProps::new(HistoryIntegration::new(), move |routes: ReadSignal<AppRoutes>| {
let t = create_memo(move || {
console_debug!("Determining route.");
let route = routes.get();
console_debug!("Route {:?}", route);
match route.as_ref() {
AppRoutes::Root => view! {
root::Start()
},
AppRoutes::Recipe{index:_idx} => view! {
"TODO!!"
},
AppRoutes::Menu => view! {
"TODO!!"
},
AppRoutes::NotFound => view! {
"NotFound"
}
}
});
console_debug!("Created our route view memo.");
view! {
// 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") {
(t.get().as_ref().clone())
}
}
}))
}
}));
console_debug!("Created our route view memo.");
view! {
div(class="app") {
(t.get().as_ref().clone())
}
}
}))
})
}
}