v0.12-searchP2

frontend/src/main.rs

@@ -49,6 +49,8 @@ pub struct AppState {
     pub books: RcSignal<Vec<BookUI>>,
     pub search: RcSignal<String>,
     pub openlibrary: RcSignal<bool>,
+    pub internalsearch: RcSignal<bool>,
+    pub pagenum: RcSignal<u32>,
     pub adding: RcSignal<bool>,
     pub updating: RcSignal<bool>,
     pub displaying: RcSignal<bool>,
@@ -74,6 +76,14 @@ async fn fetch_books(search: String) -> Result<Vec<BookUI>, reqwasm::Error> {
     Ok(body)
 }
 
+async fn search_books(search: String, page: u32) -> Result<Vec<BookUI>, reqwasm::Error> {
+    let url = format!("http://localhost:8081/api/list_search?search={}&page={}", search, page);
+    let resp = Request::get(&url).send().await?;
+    println!("Fetching books\n");
+    let body = resp.json::<Vec<PaginatedBookUIList>().await?;
+    Ok(body)
+}
+
 async fn add_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Error> {
     let url = format!("http://localhost:8081/api/create");
     let resp = Request::post(&url).body(serde_wasm_bindgen::to_value(&serde_json::to_string(&record).unwrap()).unwrap()).header("content-type","application/json").send().await?;
@@ -115,7 +125,9 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
 
             if !task.is_empty() {
                 app_state.search.set(task);
-    app_state.openlibrary.set(true);
+                app_state.openlibrary.set(true);
+                app_state.internalsearch.set(false);
+
                 info!("Fetching search\n");
                 value.set("".to_string());
                 input_ref
@@ -125,11 +137,34 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
             }
         }
     };
- let click_listall = |_| (app_state.openlibrary.set(false));
+ let click_listall = |_| {
+    app_state.openlibrary.set(false);
+    app_state.internalsearch.set(false);
+
+ };
+
+  let click_searchall = |_| {
+
+    let mut task = value.get().as_ref().clone();
+    task = task.trim().to_string();
+
+    if !task.is_empty() {
+        app_state.search.set(task);
+        app_state.openlibrary.set(false);
+        app_state.internalsearch.set(true);
+         value.set("".to_string());
+                input_ref
+                    .get::<DomNode>()
+                    .unchecked_into::<HtmlInputElement>()
+                    .set_value("");
+    }
+  };
+
   let click_addbook = |_| {
       app_state.adding.set(true);
-  app_state.addingbook.set(BookUI::default());
+        app_state.addingbook.set(BookUI::default());
   };
+
     view! { cx,
         header(class="header") {
             h1 { "Search OpenLibrary" }
@@ -140,7 +175,8 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 on:keyup=handle_submit,
             )
                  button(on:click=click_listall) { "List All DB" }
-                  button(on:click=click_addbook) { "+ Add New" }
+                 button(on:click=click_searchall) { "Search internal" }
+                 button(on:click=click_addbook) { "+ Add New" }
         }
     }
 }
@@ -150,16 +186,31 @@ 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();
-        
+        app_state.search.track();
+        app_state.pagenum.track();
+
         if *app_state.openlibrary.get() == false {
-        spawn_local(async move {
-            app_state.books.set(
-                list_books(1)
-                    .await
-                    .unwrap().books,
-            )
-        });
+            if  *app_state.internalsearch.get() == false {
+            spawn_local(async move {
+                app_state.books.set(
+                    list_books(app_state.pagenum.get())
+                        .await
+                        .unwrap().books,
+                )
+            });
+            } else {
+                spawn_local(async move {
+                app_state.books.set(
+                        search_books(app_state.search.get().to_string(), app_state.pagenum.get())
+                            .await
+                            .unwrap(),
+                    )
+                }
+            }
         }
+
+
+
     });
  
     let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>());
@@ -187,12 +238,14 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
 #[component(inline_props)]
 pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
         let app_state = use_context::<AppState>(cx);
-    let book = bookitem.bookitem.clone();
     let bookdelete = bookitem.bookitem.clone();
+    let bookupdate = bookitem.bookitem.clone();
+    let bookdisplay = bookitem.bookitem.clone();
+
     let coverurl = book.cover.clone().unwrap_or("http://localhost:8081/images/placeholder.jpg".to_string());
     let handle_delete = move |_| {
         spawn_local(async move {
-            let temp = delete_book(book.id).await.unwrap();
+            let temp = delete_book(bookdelete.id).await.unwrap();
         println!("{}",temp.status());
         });
     };
@@ -200,9 +253,14 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
      let handle_update = move |_| {
         app_state.adding.set(false);
         app_state.updating.set(true);
-        app_state.addingbook.set(bookdelete.clone());
+        app_state.addingbook.set(bookupdate.clone());
     };
 
+     let handle_display = move |_| {
+        app_state.displaying.set(true);
+        app_state.updating.set(false);
+        app_state.displayingbook.set(bookdisplay.clone());
+    };
     view! { cx,
          div(class="column"){
                 div(class="card"){
@@ -211,6 +269,8 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     (format!("{:?}",book))
         button(class="delete", on:click=handle_delete){ "-" }
         button(class="update", on:click=handle_update){ "=" }
+        button(class="info", on:click=handle_display){ "+" }
+
 
     }
     }
@@ -228,13 +288,16 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
         //);
         let app_state = app_state.clone();
         app_state.search.track();
+
         spawn_local(async move {
             if *app_state.search.get() != "" {
-            app_state.books.set(
-                fetch_books(app_state.search.get().to_string())
-                    .await
-                    .unwrap(),
-            )
+                if *app_state.openlibrary.get() == true {
+                app_state.books.set(
+                    fetch_books(app_state.search.get().to_string() )
+                        .await
+                        .unwrap(),
+                )
+                }
             }
         });
     });
@@ -406,12 +469,36 @@ info!("Adding book");
 }
 
 
+#[component]
+async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
+    let app_state = use_context::<AppState>(cx);
+    let displ_book = create_signal(cx, (*app_state.displayingbook.get()).clone());
+
+    let handle_update = move |_| {
+        app_state.displaying.set(false);
+    };
+    view! {cx,
+       (if *app_state.displaying.get() == true  {
+       p {
+                div(class="select-book"){
+                img(src=coverurl,width="100")
+                (format!("{:?}",book))
+                    button(class="close", on:click=handle_close){ "CLOSE" }
+                }
+            }
+        }
+    })
+}
+
+
 #[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()),
+        internalsearch: create_rc_signal(bool::default()),
+        pagenum: create_rc_signal(1),
         adding: create_rc_signal(bool::default()),
         updating: create_rc_signal(bool::default()),
         addingbook: create_rc_signal(BookUI::default()),
@@ -424,6 +511,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
         div {
             Header {}
             AddingUI{}
+            SelectedUI{}
             ListOL {}
             ListDB{}
         }