From 8e68f3ed920c942ced05fd08a7c3ab206bcbef38 Mon Sep 17 00:00:00 2001
From: Rezaul Karim Shaon <rkshaon.ist@gmail.com>
Date: Fri, 13 Sep 2024 15:56:48 +0600
Subject: [PATCH] done: frontend - twice api call for page 1 fixed

---
 .../src/components/PaginationComponent.vue    |  2 -
 frontend/src/pages/HomePage.vue               | 52 +------------------
 frontend/src/services/v1/bookAPIService.js    |  6 +--
 frontend/src/store/modules/books.js           |  2 +-
 4 files changed, 4 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/PaginationComponent.vue b/frontend/src/components/PaginationComponent.vue
index 640af1e..b5cb724 100644
--- 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
index 9d42347..594e524 100644
--- 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
index 7443ba6..1773545 100644
--- 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
index cdec266..2ab5eee 100644
--- 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,