done: frontend - twice api call for page 1 fixed

rkshaon · Sep 13, 2024 · 8e68f3e · 8e68f3e
1 parent 595c81c
commit 8e68f3e
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 58 deletions.
diff --git a/frontend/src/components/PaginationComponent.vue b/frontend/src/components/PaginationComponent.vue
@@ -6,10 +6,8 @@
         Previous
       </button>
     </div>
-
     <!-- Spacer to balance layout -->
     <div class="flex-1"></div>
-
     <!-- Next button -->
     <div v-if="nextPage" class="flex-1 text-right">
       <button @click="changePage(nextPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">

diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
@@ -36,86 +36,36 @@ export default {
       return this.currentPageSize
     }
   },
-  // watch: {
-  //   '$route.query.page': {
-  //     immediate: true,
-  //     handler (newPage) {
-  //       // const page = newPage || 1
-  //       let page = newPage
-  //       // let page = parseInt(newPage, 10)
-
-  //       if (!page || isNaN(page)) {
-  //         console.log('page number: ', page)
-  //         this.$router.replace({ query: { page: 1 } })
-  //         page = 1
-  //       }
-
-  //       this.fetchBooks({ page, pageSize: this.pageSize })
-  //     }
-  //   }
-  // },
   watch: {
     '$route.query.page': {
       immediate: true,
       handler (newPage) {
-        // If the 'newPage' is undefined, null, or not a number, set it to 1
         let page = parseInt(newPage, 10)
 
         if (!page || isNaN(page)) {
-          console.log('Invalid or missing page number:', page)
           this.$router.replace({ query: { page: 1 } })
           page = 1
+          return
         }
 
-        // Fetch the correct page data
         this.fetchBooks({ page, pageSize: this.pageSize })
       }
     }
   },
-  // mounted () {
-  //   // const currentPage = this.$route.query.page || 1
-  //   // if (!this.$route.query.page) {
-  //   //   this.fetchBooks({ page: currentPage, pageSize: this.pageSize })
-  //   // }
-  //   // When the component is mounted, ensure there's always a valid 'page' parameter
-  //   const currentPage = this.$route.query.page
-
-  //   // If no page query is present, redirect to page 1
-  //   if (!currentPage || isNaN(currentPage)) {
-  //     this.$router.replace({ query: { page: 1 } })
-  //   }
-  //   // else {
-  //   //   // Otherwise, fetch the books for the existing page
-  //   //   console.log('Current Page: ', currentPage)
-
-  //   //   // this.fetchBooks({ page: currentPage, pageSize: this.pageSize })
-  //   // }
-  // },
   mounted () {
-    // When the component is mounted, check if there's no 'page' query
     const currentPage = this.$route.query.page
 
-    // If there's no page parameter, set it to 1 and let the watcher handle the API call
     if (!currentPage || isNaN(currentPage)) {
       this.$router.replace({ query: { page: 1 } })
     }
-    // DO NOT call fetchBooks here because the watcher will handle it
   },
   methods: {
     ...mapActions(['fetchBooks']),
 
-    // This method updates the URL query when the next or previous button is clicked
     changePage (page) {
       this.$router.push({ query: { page } })
-      // No need to call fetchBooks here, the watcher will handle it
     }
   }
-  // methods: {
-  //   ...mapActions(['fetchBooks']),
-  //   changePage (page) {
-  //     this.$router.push({ query: { page } })
-  //   }
-  // }
 }
 </script>
 

diff --git a/frontend/src/services/v1/bookAPIService.js b/frontend/src/services/v1/bookAPIService.js
@@ -5,11 +5,9 @@ import axios from 'axios'
 const API_BASE_URL = process.env.VUE_APP_BACKEND_URL
 
 export default {
-  async fetchV1Books (page = 1, pageSize = 4) {
-    // console.log('api call function, at the beginning: ', page, pageSize)
+  async fetchV1Books (page = 1, pageSize = 8) {
     page = page ?? 1
-    pageSize = pageSize ?? 4
-    // console.log('api call function, after validation: ', page, pageSize)
+    pageSize = pageSize ?? 8
     const URL = `${API_BASE_URL}/book/v1/?page_size=${pageSize}&page=${page}`
     console.log('Book API:', URL, page, pageSize)
 

diff --git a/frontend/src/store/modules/books.js b/frontend/src/store/modules/books.js
@@ -7,7 +7,7 @@ export default {
     books: [],
     nextPageUrl: null,
     previousPageUrl: null,
-    pageSize: 4
+    pageSize: 8
   },
   getters: {
     allBooks: (state) => state.books,