v0.03

backend/src/main.rs

@@ -133,8 +133,8 @@ async fn hello(
     let query = format!("https://openlibrary.org/search.json?q={}", search);
     let res = reqwest::get(query).await.expect("Unable to request");
     let mut resjson = res.json::<Books>().await.expect("Unable to return value");
-    resjson.set_all_cover_urls();
     resjson.docs.truncate(10);
+    resjson.set_all_cover_urls();
     print!("Search token {:?}\n", search);
     return Json(resjson);
     //return "Hello";

frontend/Cargo.lock

@@ -98,8 +98,10 @@ dependencies = [
  "serde",
  "sycamore",
  "sycamore-router",
+ "wasm-bindgen",
  "wasm-bindgen-futures",
  "wasm-logger",
+ "web-sys",
 ]
 
 [[package]]
@@ -647,12 +649,11 @@ dependencies = [
 
 [[package]]
 name = "tokio"
-version = "1.20.1"
+version = "1.21.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7a8325f63a7d4774dd041e363b2409ed1c5cbbd0f867795e661df066b2b0a581"
+checksum = "a9e03c497dc955702ba729190dc4aac6f2a0ce97f913e5b1b5912fc5039d9099"
 dependencies = [
  "autocfg",
- "once_cell",
  "pin-project-lite",
 ]
 

frontend/Cargo.toml

@@ -17,5 +17,11 @@ wasm-logger = "0.2.0"
 serde = { version = "^1.0", features = ["derive"] }
 sycamore = {version = "0.8.0-beta.7", features = ["suspense"]}
 sycamore-router = "0.8.0-beta.7"
+wasm-bindgen = "0.2.79"
+#tokio = {version = "1.21.2", features = ["full"] }
 #yew = "0.19.3"
 #yew-router = "0.16.0"
+
+[dependencies.web-sys]
+features = ["InputEvent", "KeyboardEvent", "Location", "Storage"]
+version = "0.3.56"

frontend/src/main.rs

@@ -4,10 +4,12 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use sycamore::suspense::Suspense;
 use sycamore_router::{Route, Router, RouterProps};
-use wasm_bindgen_futures::spawn_local;
+//use tokio;
+use wasm_bindgen::JsCast;
+use web_sys::{Event, HtmlInputElement, KeyboardEvent}; // 0.3.5
 
-#[derive(Deserialize, Serialize, Debug)]
-struct Docs {
+#[derive(Deserialize, Serialize, Debug, Default)]
+pub struct Docs {
     key: String,
     title: String,
     first_publish_year: Option<u32>,
@@ -21,12 +23,24 @@ struct Docs {
     time: Option<Vec<String>>,
 }
 
-#[derive(Deserialize, Serialize, Debug)]
-struct Books {
+#[derive(Deserialize, Serialize, Debug, Default)]
+pub struct Books {
     num_found: u32,
     docs: Vec<Docs>,
 }
 
+#[derive(Debug, Default, Clone)]
+pub struct AppState {
+    pub books: RcSignal<Books>,
+}
+
+impl AppState {
+    //   #[tokio::main]
+    async fn set_books(&self, search: String) {
+        self.books.set(fetch_books(search).await.unwrap());
+    }
+}
+
 #[derive(Route)]
 enum AppRoutes {
     #[to("/")]
@@ -37,7 +51,7 @@ enum AppRoutes {
     NotFound,
 }
 
-async fn fetch_books(search: &str) -> Result<Books, reqwasm::Error> {
+async fn fetch_books(search: String) -> Result<Books, reqwasm::Error> {
     let url = format!("http://127.0.0.1:8080/api/hello?search={}", search);
     let resp = Request::get(&url).send().await?;
 
@@ -45,15 +59,52 @@ async fn fetch_books(search: &str) -> Result<Books, reqwasm::Error> {
     Ok(body)
 }
 
+#[component]
+pub fn Header<G: Html>(cx: Scope) -> View<G> {
+    let app_state = use_context::<AppState>(cx);
+    let value = create_signal(cx, String::new());
+    let input_ref = create_node_ref(cx);
+
+    let handle_submit = |event: Event| {
+        let event: KeyboardEvent = event.unchecked_into();
+
+        if event.key() == "Enter" {
+            let mut task = value.get().as_ref().clone();
+            task = task.trim().to_string();
+
+            if !task.is_empty() {
+                app_state.set_books(task);
+                value.set("".to_string());
+                input_ref
+                    .get::<DomNode>()
+                    .unchecked_into::<HtmlInputElement>()
+                    .set_value("");
+            }
+        }
+    };
+
+    view! { cx,
+        header(class="header") {
+            h1 { "todos" }
+            input(ref=input_ref,
+                class="new-todo",
+                placeholder="What needs to be done?",
+                bind:value=value,
+                on:keyup=handle_submit,
+            )
+        }
+    }
+}
+
 #[component]
 async fn VisitsCount<G: Html>(cx: Scope<'_>) -> View<G> {
-    let books = fetch_books("foundation").await.unwrap();
+    let app_state = use_context::<AppState>(cx);
     print!("Visitcounts\n");
     view! {cx,
              p {
             "Total visits: "
             span {
-                (books.num_found)
+                (app_state.books.get().num_found)
             }
         }
     }
@@ -61,9 +112,14 @@ async fn VisitsCount<G: Html>(cx: Scope<'_>) -> View<G> {
 
 #[component]
 fn App<G: Html>(cx: Scope) -> View<G> {
+    let app_state = AppState {
+        books: create_rc_signal(Books::default()),
+    };
+    provide_context(cx, app_state);
     view! {
         cx,
         div {
+            Header {}
             p { "Page Visit Counter" }
             Suspense(fallback=view! { cx, "Loading..." }) {
                 VisitsCount {}
@@ -106,5 +162,4 @@ fn main() {
     console_log::init_with_level(log::Level::Debug).unwrap();
 
     sycamore::render(|cx| view! { cx, App {} });
-    //sycamore::render(|cx|  App(cx));
 }