add filter read/want read when browsing books

front/src/BooksBrowser.vue

@@ -1,14 +1,51 @@
 <script setup>
+import { ref } from 'vue'
 import BookCard from './BookCard.vue';
 import { getMyBooks } from './api.js'
 
-const { data, error } = getMyBooks();
+
+
+const FilterStates = Object.freeze({
+    READ: "read",
+    WANTREAD: "wantread",
+});
+
+let currentFilterState = ref(FilterStates.READ);
+
+let { data, error } = getMyBooks(currentFilterState.value);
+
+
+function fetchData() {
+  let res = getMyBooks(currentFilterState.value);
+  data = res.data;
+  error = res.error;
+}
+
+function onFilterButtonClick(newstate) {
+  currentFilterState.value = newstate;
+  fetchData();
+}
+
+function computeDynamicClass(state) {
+  return currentFilterState.value === state ? 'is-active is-primary' : '';
+}
 
 </script>
 
 <template>
+  <div class="mb-5">
+    <button class="button is-medium"
+            @click="onFilterButtonClick(FilterStates.READ)"
+            :class="computeDynamicClass(FilterStates.READ)">
+      {{$t('bookbrowser.read')}}
+    </button>
+    <button class="button is-medium"
+            @click="onFilterButtonClick(FilterStates.WANTREAD)"
+            :class="computeDynamicClass(FilterStates.WANTREAD)">
+      {{$t('bookbrowser.wantread')}}
+    </button>
+  </div>
   <div class="books">
-
     <div v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
     <div class="book" v-else-if="data" v-for="book in data" :key="book.id">
       <BookCard v-bind="book" />