user-auth store frontend v2

frontend/src/main.rs

@@ -7,7 +7,7 @@ use serde_json;
 use sycamore::futures::spawn_local;
 use sycamore::prelude::*;
 //use sycamore::suspense::Suspense;
-use sycamore_router::Route;
+//use sycamore_router::Route;
 use wasm_bindgen::JsCast;
 use web_sys::{Event, HtmlInputElement, KeyboardEvent}; // 0.3.5
 use dotenv_codegen::dotenv;
@@ -80,19 +80,11 @@ pub struct AppState {
     pub deleterequest: RcSignal<bool>,
     pub userlist: RcSignal<HashMap<String, i32>>,
     pub userid: RcSignal<i32>,
+    pub useridloggedin: RcSignal<i32>,
     pub userscreen: RcSignal<bool>,
     pub loggedin: RcSignal<bool>,
     pub editmode: RcSignal<bool>,
-}
+    pub dropdownselect: RcSignal<bool>,
-
-#[derive(Route)]
-enum AppRoutes {
-    #[to("/")]
-    Home,
-    #[to("/hello-server")]
-    HelloServer,
-    #[not_found]
-    NotFound,
 }
 
 /* TODO
@@ -297,25 +289,15 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
         }
     };
 
-  let click_addbulk = |_| {
-
-    let mut task = value3.get().as_ref().clone();
-    task = task.trim().to_string();
-
-    if !task.is_empty() {
-
-            spawn_local(async move {
-                    let _temp = add_books_isbns(task).await.unwrap();
-
-            });
-    }
-  };
 
   let click_logout = |_| {
     spawn_local(async move {
             logout_user().await.unwrap();
     });
-  };
+    app_state.loggedin.set(false);
+    app_state.editmode.set(false);
+
+};
 
   let click_userscreen = |_| {
     app_state.userscreen.set(true);
@@ -323,8 +305,19 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
 
   let toggle_editmode = |_| {
     app_state.editmode.set(*editchecked.get());
+    app_state.userid.set(*app_state.useridloggedin.get());
   };
 
+  let dropdown_userselect = |_| {
+    spawn_local(async move {
+        app_state.userlist.set(list_users()
+            .await.expect("Couldn't list user"));
+    });
+    app_state.dropdownselect.set(true);
+};
+
+    let users = create_memo(cx, || app_state.userlist.get().keys().cloned().collect::<Vec<String>>());
+
     view! { cx,
         header(class="header") {
         div(class="header-button"){
@@ -344,7 +337,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 }
             })
         }
-            (if *app_state.loggedin.get() == false {
+            (if *app_state.editmode.get() == true {
               view!{ cx,
         div(class="header-column"){
             input(ref=input_ref,
@@ -359,6 +352,27 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
             })
 
         div(class="header-column"){
+                (if *app_state.editmode.get() == false {
+              view!{ cx,
+                button(on:click=dropdown_userselect) { "Select User" }
+                (if *app_state.dropdownselect.get() == true {
+                view!{ cx,
+                    div(class="dropdown-content") {
+                    Keyed(
+                    iterable=users,
+                    view=move |cx, x| view! { cx,
+                        DropDownUser(user=x)
+                    },
+                    key =|x| x )
+                    }
+                    }
+                } else {
+                    view!{cx, ""}
+                })
+              }} else {
+                view!{cx, ""}
+              })
+
             button(on:click=click_listall) { "All books" }
             input(ref=input_ref2,
                 class="new-todo",
@@ -368,7 +382,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
             )
         }
 
-        (if *app_state.editmode.get() == false {
+        (if *app_state.editmode.get() == true {
               view!{ cx,
         div(class="header-column"){
 
@@ -379,7 +393,6 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 bind:value=value3,
                 on:keyup=handle_submit_addbulk,
             )
-                 button(on:click=click_addbulk) { "Add bulk ISBNs" }
                  }
                   }       } else {
             view!{cx, ""}
@@ -392,6 +405,20 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
     }
 }
 
+#[component(inline_props)]
+pub fn DropDownUser<G: Html>(cx: Scope, user: String) -> View<G> {
+    let app_state = use_context::<AppState>(cx);
+
+    let handle_select_user = move |_| {
+        app_state.userid.set( *(*app_state.userlist.get()).get(&(user).clone()).unwrap_or(&0));
+        app_state.dropdownselect.set(false);
+    };
+
+    view! { cx,
+        button(class="delete", on:click=handle_select_user){ format!("{}",user) }
+    }
+}
+
 #[component]
 async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
     let app_state = use_context::<AppState>(cx);
@@ -467,7 +494,18 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
     let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>());
     view! {cx,
         p {
-                (if *app_state.openlibrary.get() == false {
+                (if *app_state.openlibrary.get() == false &&  *app_state.editmode.get() == false {
+              view!{ cx,
+                ul {
+            Keyed(
+             iterable=docs,
+             view=|cx, x| view! { cx,
+                BookDB_View(bookitem=x)
+             },
+              key =|x| x.id )
+              }
+             }
+                } else if *app_state.openlibrary.get() == false &&  *app_state.editmode.get() == true {
               view!{ cx,
                 ul {
             Keyed(
@@ -479,7 +517,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
               }
              }
                 } else {
-                    view!{cx,""}
+                    view!{cx, ""}
                 }
               )
         }
@@ -536,12 +574,61 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
          div(class="column"){
                 div(class="card"){
 
-                               div(class="card-buttons"){
+                    div(class="card-buttons"){
 
-        button(class="delete", on:click=handle_delete){ "DEL-" }
+                    button(class="delete", on:click=handle_delete){ "DEL-" }
-        button(class="update", on:click=handle_update){ "EDIT=" }
+                    button(class="update", on:click=handle_update){ "EDIT=" }
-        button(class="info", on:click=handle_display){ "INFO+" }
+                    button(class="info", on:click=handle_display){ "INFO+" }
-        }
+                }
+    div(class="card-main"){
+    img(src=coverurl,width="100")
+
+    div(class="card-title"){
+    (format!("{}",loctitle))
+    }
+    div(class="card-authors"){
+    (format!("{}",locauthors))
+    }
+    //div(class="card-image"){
+    //}
+    }
+
+    div(class="card-desc"){
+    (format!("{}",locloc))
+    br{}br{}
+    (format!("{}",locdesc))
+    }
+
+    }
+    }
+
+    }
+}
+
+#[component(inline_props)]
+pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
+    let app_state = use_context::<AppState>(cx);
+    let bookdisplay = bookitem.bookitem.clone();
+    let loctitle = bookitem.bookitem.clone().title.clone();
+    let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", ");
+    let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
+    let locloc = bookitem.bookitem.clone().location.unwrap_or("".to_string());
+
+    let coverurl = bookdisplay.clone().cover.clone().unwrap_or("None".to_string());
+     let handle_display = move |_| {
+        app_state.displaying.set(true);
+        app_state.updating.set(false);
+        //info!("Setting displaying book {:?}",bookdisplay);
+        app_state.displayingbook.set(bookdisplay.clone());
+    };
+    view! { cx,
+         div(class="column"){
+                div(class="card"){
+
+                    div(class="card-buttons"){
+
+                    button(class="info", on:click=handle_display){ "INFO+" }
+                }
     div(class="card-main"){
     img(src=coverurl,width="100")
 
@@ -1083,6 +1170,7 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
     let input_refP = create_node_ref(cx);
 
     let handle_register = move |_| {
+        let app_state = app_state.clone();
         let user = AxumUser{
             id: 0,
             name: (*userval.get()).clone(),
@@ -1092,6 +1180,10 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
             register_user(user)
                 .await.expect("Couldn't register user");
         });
+        spawn_local(async move {
+            app_state.userlist.set(list_users()
+                .await.expect("Couldn't list user"));
+        });
         app_state.userscreen.set(false);
     };
 
@@ -1105,6 +1197,9 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
             login_user(user)
                 .await.expect("Couldn't login user");
         });
+        app_state.loggedin.set(true);
+        app_state.useridloggedin.set( *(*app_state.userlist.get()).get(&(*userval.get()).clone()).unwrap_or(&0));
+        app_state.userid.set( *(*app_state.userlist.get()).get(&(*userval.get()).clone()).unwrap_or(&0));
         app_state.userscreen.set(false);
     };
 
@@ -1152,11 +1247,15 @@ fn App<G: Html>(cx: Scope) -> View<G> {
         deleterequest: create_rc_signal(bool::default()),
         userlist: create_rc_signal(HashMap::new()),
         userid: create_rc_signal(0),
+        useridloggedin: create_rc_signal(0),
         userscreen: create_rc_signal(bool::default()),
         loggedin: create_rc_signal(bool::default()),
         editmode: create_rc_signal(bool::default()),
+        dropdownselect: create_rc_signal(bool::default()),
     };
     provide_context(cx, app_state);
+
+
     view! {
         cx,
         div {