add userbook from searched book

front/src/BookListElement.vue

@@ -1,4 +1,9 @@
 <script setup>
+  import { ref } from 'vue'
+  import { postUserBook } from './api.js'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter();
 
   const props = defineProps({
   title: String,
@@ -6,15 +11,27 @@
   id: BigInt,
   imagePath: String,
 });
-const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "../defaultbook.png" : props.imagePath;
+  const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "../defaultbook.png" : props.imagePath;
+  const error = ref(null)
 
+async function onUserBookAdd() {
+  const res = await postUserBook({bookId: props.id});
+  if (res.ok) {
+    router.push('/books')
+  } else {
+    res.json().then((json) => (error.value = json));
+  }
+}
 
 </script>
 
 <template>
+  <div v-if="error" class="notification is-danger">
+    <p>{{error}}</p>
+  </div>
   <div class="columns box container has-background-dark">
   <div class="column is-narrow">
-    <button class="button">
+    <button @click="onUserBookAdd" class="button">
       <span class="icon" title="Add">
         <b-icon-plus />
       </span>

front/src/api.js

@@ -36,6 +36,10 @@ export function postBook(book) {
   return genericPostCall('/book', book.value)
 }
 
+export async function postUserBook(userbook) {
+  return genericPostCall('/userbook', userbook)
+}
+
 export function postLogin(user) {
   return genericPostCallNoAuth('/auth/login', user.value)
 }