v0.10-frontend-intermediate

frontend/src/main.rs

@@ -4,7 +4,7 @@ use reqwasm::http::Request;
 use serde::{Deserialize, Serialize};
 use sycamore::futures::spawn_local;
 use sycamore::prelude::*;
-use sycamore::suspense::Suspense;
+//use sycamore::suspense::Suspense;
 use sycamore_router::Route;
 use wasm_bindgen::JsCast;
 use web_sys::{Event, HtmlInputElement, KeyboardEvent}; // 0.3.5
@@ -32,32 +32,13 @@ pub struct BookUI {
     isbn: Option<Vec<String>>,
 }
 
-#[derive(Deserialize, Serialize, Debug, Default, Clone, PartialEq, Hash, Eq)]
-pub struct Docs {
-    id: u32,
-    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, Default)]
-pub struct Books {
-    num_found: u32,
-    docs: Vec<Docs>,
-}
-
 #[derive(Debug, Default, Clone)]
 pub struct AppState {
     pub books: RcSignal<Vec<BookUI>>,
     pub search: RcSignal<String>,
+    pub openlibrary: RcSignal<bool>,
+    pub adding: RcSignal<bool>,
+    pub addingbook: RcSignal<BookUI>,
 }
 
 #[derive(Route)]
@@ -78,6 +59,26 @@ async fn fetch_books(search: String) -> Result<Vec<BookUI>, reqwasm::Error> {
     Ok(body)
 }
 
+async fn add_book(record: BookUI) -> Result<String, reqwasm::Error> {
+    let url = format!("http://localhost:8081/api/create");
+    let _resp = Request::post(&url).body(serde_wasm_bindgen::to_value(&record).unwrap()).send().await?;
+    Ok("OK".to_string())
+}
+
+async fn delete_book(id: i32) -> Result<String, reqwasm::Error> {
+    let url = format!("http://localhost:8081/api/delete/{}", id);
+    let _resp = Request::post(&url).send().await?;
+    Ok("OK".to_string())
+}
+
+async fn list_books() -> Result<Vec<BookUI>, reqwasm::Error> {
+    let url = format!("http://localhost:8081/api/list");
+    let resp = Request::post(&url).send().await?;
+    println!("Fetching books\n");
+    let body = resp.json::<Vec<BookUI>>().await?;
+    Ok(body)
+}
+
 #[component]
 pub fn Header<G: Html>(cx: Scope) -> View<G> {
     let app_state = use_context::<AppState>(cx);
@@ -93,7 +94,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
 
             if !task.is_empty() {
                 app_state.search.set(task);
-
+    app_state.openlibrary.set(true);
                 println!("Fetching search\n");
                 info!("Fetching search\n");
                 value.set("".to_string());
@@ -104,22 +105,72 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
             }
         }
     };
-
+ let click_listall = |_| (app_state.openlibrary.set(false));
+  let click_addbook = |_| {
+      app_state.adding.set(true);
+  app_state.addingbook.set(BookUI::default());
+  };
     view! { cx,
         header(class="header") {
-            h1 { "todos" }
+            h1 { "Search OpenLibrary" }
             input(ref=input_ref,
                 class="new-todo",
                 placeholder="What needs to be done?",
                 bind:value=value,
                 on:keyup=handle_submit,
             )
+                 button(on:click=click_listall) { "List All DB" }
+                  button(on:click=click_addbook) { "+ Add New" }
+ 
+
         }
     }
 }
 
 #[component]
-async fn VisitsCount<G: Html>(cx: Scope<'_>) -> View<G> {
+async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
+    let app_state = use_context::<AppState>(cx);
+    create_effect(cx, || {
+        let app_state = app_state.clone();
+        
+        if *app_state.openlibrary.get() == false {
+        spawn_local(async move {
+            app_state.books.set(
+                list_books()
+                    .await
+                    .unwrap(),
+            )
+        });
+        }
+    });
+ 
+    let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>());
+    view! {cx,
+        p {
+                (if *app_state.openlibrary.get() == false {
+              view!{ cx,
+                //span {(app_state.books.get().num_found)}
+                ul {
+            Keyed(
+             iterable=docs,
+             view=move |cx, x| view! { cx,
+                 li { (format!("{:?}",x))
+                 }
+              },
+              key =|x| x.id )
+              }
+             }
+                } else {
+                    view!{cx,""}
+                }
+              )
+        }
+    }
+}
+
+
+#[component]
+async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
     let app_state = use_context::<AppState>(cx);
     create_effect(cx, || {
         //info!(
@@ -136,51 +187,64 @@ async fn VisitsCount<G: Html>(cx: Scope<'_>) -> View<G> {
             )
         });
     });
-    let state = create_signal(cx, 0i32);
-//    let increment = |x: Docs| (state.set(x.first_publish_year.unwrap().try_into().unwrap()));
-    let increment = |_| (state.set(2));
  
     let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>());
     //let docs = create_signal(cx, vec![1, 2]);
     view! {cx,
         p {
-            (if !app_state.search.get().is_empty() {
+            (if *app_state.openlibrary.get() == true {
                 view!{ cx,
-                //span {(app_state.books.get().num_found)}
-                ul {
+                 ul {
             Keyed(
              iterable=docs,
              view=move |cx, x| view! { cx,
                  li { (format!("{:?}",x))
-                 button(on:click=increment) { "+" }
                  }
               },
               key =|x| x.id )
               }
              }
+            } else {
+                view!{cx,""}
             }
-            else {
-            view! { cx, span { "World" } }
-            })
+            )
         }
     }
 }
 
+#[component]
+async fn AddingUI<G: Html>(cx: Scope<'_>) -> View<G> {
+    let app_state = use_context::<AppState>(cx);
+    view! {cx,
+        p {
+(if *app_state.adding.get() == true {
+                view!{ cx,"Hello" }
+            } else {
+                view!{cx,""}
+            }
+            )
+        }
+    }
+}
+
+
 #[component]
 fn App<G: Html>(cx: Scope) -> View<G> {
     let app_state = AppState {
         books: create_rc_signal(Vec::new()),
         search: create_rc_signal(String::default()),
+        openlibrary: create_rc_signal(bool::default()),
+        adding: create_rc_signal(bool::default()),
+        addingbook: create_rc_signal(BookUI::default()),
     };
     provide_context(cx, app_state);
     view! {
         cx,
         div {
             Header {}
-            p { "Page Visit Counter" }
-            Suspense(fallback=view! { cx, "Loading..." }) {
-                VisitsCount {}
-            }
+            AddingUI{}
+            ListOL {}
+            ListDB{}
         }
     }
 }