v0.02ui

backend/src/main.rs

@@ -42,7 +42,7 @@ struct Opt {
     addr: String,
 
     /// set the listen port
-    #[clap(short = 'p', long = "port", default_value = "8080")]
+    #[clap(short = 'p', long = "port", default_value = "8081")]
     port: u16,
 
     /// set the directory where static files are to be found

frontend/Cargo.lock

@@ -92,8 +92,10 @@ dependencies = [
  "console_error_panic_hook",
  "console_log",
  "env_logger",
- "gloo-net",
+ "gloo-net 0.2.4",
  "log",
+ "reqwasm",
+ "serde",
  "sycamore",
  "sycamore-router",
  "wasm-bindgen-futures",
@@ -200,6 +202,26 @@ dependencies = [
  "wasi",
 ]
 
+[[package]]
+name = "gloo-net"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2899cb1a13be9020b010967adc6b2a8a343b6f1428b90238c9d53ca24decc6db"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "gloo-net"
 version = "0.2.4"
@@ -404,6 +426,15 @@ version = "0.6.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a3f87b73ce11b1619a3c6332f45341e0047173771e8b8b73f87bfeefb7b56244"
 
+[[package]]
+name = "reqwasm"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05b89870d729c501fa7a68c43bf4d938bbb3a8c156d333d90faa0e8b3e3212fb"
+dependencies = [
+ "gloo-net 0.1.0",
+]
+
 [[package]]
 name = "ryu"
 version = "1.0.11"

frontend/Cargo.toml

@@ -11,8 +11,10 @@ env_logger = "0.9.0"
 gloo-net = "^0.2"
 log = "0.4"
 console_log = { version = "0.2", features = ["color"] }
+reqwasm = {version = "0.5.0", features = ["json"]}
 wasm-bindgen-futures = "^0.4"
 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"
 #yew = "0.19.3"

frontend/src/main.rs

@@ -1,9 +1,31 @@
-use gloo_net::http::Request;
+use log::Level;
-use wasm_bindgen_futures::spawn_local;
+use reqwasm::http::Request;
+use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use sycamore::suspense::Suspense;
 use sycamore_router::{Route, Router, RouterProps};
-use log::Level;
+use wasm_bindgen_futures::spawn_local;
+
+#[derive(Deserialize, Serialize, Debug)]
+struct Docs {
+    key: String,
+    title: String,
+    first_publish_year: Option<u32>,
+    number_of_pages_median: Option<u32>,
+    isbn: Option<Vec<String>>,
+    cover_i: Option<u32>,
+    author_name: Option<Vec<String>>,
+    person: Option<Vec<String>>,
+    place: Option<Vec<String>>,
+    subject: Option<Vec<String>>,
+    time: Option<Vec<String>>,
+}
+
+#[derive(Deserialize, Serialize, Debug)]
+struct Books {
+    num_found: u32,
+    docs: Vec<Docs>,
+}
 
 #[derive(Route)]
 enum AppRoutes {
@@ -15,12 +37,40 @@ enum AppRoutes {
     NotFound,
 }
 
+async fn fetch_books(search: &str) -> Result<Books, reqwasm::Error> {
+    let url = format!("http://127.0.0.1:8080/api/hello?search={}", search);
+    let resp = Request::get(&url).send().await?;
+
+    let body = resp.json::<Books>().await?;
+    Ok(body)
+}
+
+#[component]
+async fn VisitsCount<G: Html>(cx: Scope<'_>) -> View<G> {
+    let books = fetch_books("foundation").await.unwrap();
+    print!("Visitcounts\n");
+    view! {cx,
+             p {
+            "Total visits: "
+            span {
+                (books.num_found)
+            }
+        }
+    }
+}
+
 #[component]
 fn App<G: Html>(cx: Scope) -> View<G> {
-view! {cx,
+    view! {
-    div{"Test"}
+        cx,
-/*
+        div {
-Router {
+            p { "Page Visit Counter" }
+            Suspense(fallback=view! { cx, "Loading..." }) {
+                VisitsCount {}
+            }
+        }
+    /*
+    Router {
             integration: {HistoryIntegration::new()},
             view: |cx, route: &ReadSignal<AppRoutes>| {
                 view! {
@@ -46,7 +96,6 @@ Router {
 
 #[component(HelloServer<G>)]
 fn HelloServer<G: Html>(cx: Scope) -> View<G> {
-
     view! {cx,
         div{"No server response"}
     }