done: frontend - dynamic page number handle

rkshaon · Sep 13, 2024 · b809cbe · b809cbe
1 parent daf6adb
commit b809cbe
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 58 deletions.
diff --git a/frontend/src/components/PaginationComponent.vue b/frontend/src/components/PaginationComponent.vue
@@ -1,20 +1,22 @@
 <template>
-    <div class="flex justify-between mt-8 mb-8">
-        <!-- Previous button -->
-        <div v-if="previousPage" class="flex-1">
-            <button @click="goToPage(previousPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-                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="goToPage(nextPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-                Next
-            </button>
-        </div>
+  <div class="flex justify-between mt-8 mb-8">
+    <!-- Previous button -->
+    <div v-if="previousPage" class="flex-1">
+      <button @click="changePage(previousPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+        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">
+        Next
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -28,16 +30,24 @@ export default {
     nextPage: {
       type: String,
       default: null
+    },
+    pageSize: {
+      type: Number,
+      default: 8
     }
   },
   methods: {
-    goToPage (url) {
-      this.$emit('fetch-page', url) // Emit an event to the parent component
+    changePage (url) {
+      if (url) {
+        const urlParams = new URL(url)
+        const newPage = urlParams.searchParams.get('page')
+        this.$emit('fetch-page', newPage)
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-/* Custom styles for pagination can be added here */
+/* Custom styles for PaginationComponent.vue */
 </style>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
@@ -6,37 +6,18 @@
         Explore a vast collection of books, share your reviews, and connect with other book lovers.
       </p>
     </div>
-    <!-- <div class="flex justify-between mt-8 mb-8">
-      <div v-if="previousPage" class="flex-1">
-        <button @click="fetchBooks(previousPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-          Previous
-        </button>
-      </div>
-      <div class="flex-1"></div>
-      <div v-if="nextPage" class="flex-1 text-right">
-        <button @click="fetchBooks(nextPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-          Next
-        </button>
-      </div>
-    </div> -->
-    <PaginationComponent :previousPage="previousPage" :nextPage="nextPage" @fetch-page="fetchBooks" />
+
+    <!-- PaginationComponent for navigation -->
+    <PaginationComponent :previousPage="previousPageUrl" :nextPage="nextPageUrl" :pageSize="pageSize"
+      @fetch-page="changePage" />
+
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
       <BookCardComponent v-for="(book, index) in books" :key="index" :book="book" />
     </div>
-    <PaginationComponent :previousPage="previousPage" :nextPage="nextPage" @fetch-page="fetchBooks" />
-    <!-- <div class="flex justify-between mt-8">
-      <div v-if="previousPage" class="flex-1">
-        <button @click="fetchBooks(previousPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-          Previous
-        </button>
-      </div>
-      <div class="flex-1"></div>
-      <div v-if="nextPage" class="flex-1 text-right">
-        <button @click="fetchBooks(nextPage)" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
-          Next
-        </button>
-      </div>
-    </div> -->
+
+    <!-- PaginationComponent at the bottom -->
+    <PaginationComponent :previousPage="previousPageUrl" :nextPage="nextPageUrl" :pageSize="pageSize"
+      @fetch-page="changePage" />
   </main>
 </template>
 
@@ -52,29 +33,36 @@ export default {
     PaginationComponent
   },
   computed: {
-    ...mapGetters(['allBooks', 'nextPage', 'previousPage', 'currentPageSize']),
+    ...mapGetters(['allBooks', 'nextPageUrl', 'previousPageUrl', 'currentPageSize']),
     books () {
       return this.allBooks
     },
-    nextPage () {
-      return this.nextPageUrl
-    },
-    previousPage () {
-      return this.previousPageUrl
-    },
     pageSize () {
       return this.currentPageSize
     }
   },
+  watch: {
+    '$route.query.page': {
+      immediate: true,
+      handler (newPage) {
+        const page = newPage || 1
+        this.fetchBooks({ page, pageSize: this.pageSize })
+      }
+    }
+  },
   mounted () {
     this.fetchBooks()
   },
   methods: {
-    ...mapActions(['fetchBooks'])
+    ...mapActions(['fetchBooks']),
+    changePage (page) {
+      this.$router.push({ query: { page } })
+      this.fetchBooks({ page, pageSize: this.pageSize })
+    }
   }
 }
 </script>
 
 <style scoped>
-/* Additional custom styles can go here if needed */
+/* Custom styles for HomePage.vue */
 </style>
diff --git a/frontend/src/store/modules/books.js b/frontend/src/store/modules/books.js
@@ -11,8 +11,8 @@ export default {
   },
   getters: {
     allBooks: (state) => state.books,
-    nextPage: (state) => state.nextPageUrl,
-    previousPage: (state) => state.previousPageUrl,
+    nextPageUrl: (state) => state.nextPageUrl,
+    previousPageUrl: (state) => state.previousPageUrl,
     currentPageSize: (state) => state.pageSize
   },
   mutations: {
@@ -30,7 +30,7 @@ export default {
     }
   },
   actions: {
-    async fetchBooks ({ commit }, { page = 1, pageSize = 8 }) {
+    async fetchBooks ({ commit }, { page = 1, pageSize = 8 } = {}) {
       try {
         const response = await bookAPIService.fetchV1Books(page, pageSize)
         commit('SET_BOOKS', response.results)