Search existing books

front/src/SearchBook.vue

@@ -1,11 +1,31 @@
 <script setup>
+  import BookListElement from './BookListElement.vue';
+  import { getSearchBooks } from './api.js'
+  import { onBeforeRouteUpdate } from 'vue-router'
+
   const props = defineProps({
     searchterm: String
+  });
+
+  let { data, error } = getSearchBooks(props.searchterm);
+
+  onBeforeRouteUpdate(async (to, from) => {
+    let res = getSearchBooks(to.params.searchterm);
+    data = res.data;
+    error = res.error;
   })
+
 </script>
 
 <template>
-  <div> You are searching for {{ searchterm }} </div>
+  <div class="booksearch">
+    <div v-if="error">{{$t('searchbook.error', {error: error.message})}}</div>
+    <div class="booksearchlist" v-else-if="data && data.length > 0" v-for="book in data" :key="book.id">
+      <BookListElement v-bind="book" />
+    </div>
+    <div v-else-if="data === null">{{$t('searchbook.loading')}}</div>
+    <div v-else>{{$t('searchbook.noresult')}}</div>
+  </div>
 </template>
 
 <style scoped></style>