User book API: use a single query with result and count

front/src/BooksBrowser.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import BookCard from './BookCard.vue'
-import { getMyBooks, getCountMyBooks } from './api.js'
+import { getMyBooks } from './api.js'
 import Pagination from './Pagination.vue'
 
 
@@ -21,18 +21,15 @@ let currentFilterState = ref(FilterStates.READ);
 
 let data = ref(null);
 let error = ref(null);
-let totalBooksData = ref(null);
-let errorFetchTotal = ref(null);
 
-let totalBooksNumber = computed(() => (typeof(totalBooksData) != 'undefined' &&
-  totalBooksData.value != null) ? totalBooksData.value["count"] : 0);
+let totalBooksNumber = computed(() => (typeof(data) != 'undefined' &&
+  data.value != null) ? data.value["count"] : 0);
 let pageTotal = computed(() => Math.ceil(totalBooksNumber.value / limit))
 
 fetchData();
 
 function fetchData() {
   let res = getMyBooks(data, error, currentFilterState.value, limit, offset.value);
-  let resCount = getCountMyBooks(totalBooksData, errorFetchTotal, currentFilterState.value);
 }
 
 function onFilterButtonClick(newstate) {
@@ -74,7 +71,7 @@ function pageChange(newPageNumber) {
   <div v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
   <div v-else-if="data">
     <div class="books">
-      <div class="book" v-for="book in data" :key="book.id">
+      <div class="book" v-for="book in data.books" :key="book.id">
         <BookCard v-bind="book" />
       </div>
     </div>

front/src/api.js

@@ -28,10 +28,6 @@ function useFetch(data, error, url) {
   }
 }
 
-export function getCountMyBooks(data, error, arg) {
-  return useFetch(data, error, baseUrl + '/mybooks/' + arg + "/count");
-}
-
 export function getMyBooks(data, error, arg, limit, offset) {
   const queryParams = new URLSearchParams({limit: limit, offset: offset});
   return useFetch(data, error, baseUrl + '/mybooks/' + arg + "?" + queryParams.toString());