feat: update pagination logic on filtered cards as well

Author: KC900201

src/components/CardList.astro

@@ -55,7 +55,7 @@ const paginateOptions = [
 <!-- To-do -->
 <!--
   [x] Implement pagination feature with buttons and dropdowns (6, 12, 24)
-  [ ] Implement unit test for pagination feature
+  [x] Implement unit test for pagination feature
   [x] Migrate pagination feature to a new script (./scripts/pagination.ts)
  -->
 

src/pages/index.astro

@@ -48,3 +48,4 @@ const terms = await getCollection("terms")
 <script src="../scripts/cards.ts"></script>
 <script src="../scripts/modal.ts"></script>
 <script src="../scripts/hero-action.ts"></script>
+<script src="../scripts/paginate.ts"></script>

src/scripts/hero-action.ts

@@ -1,5 +1,5 @@
 class Hero extends HTMLElement {
-  
+
   constructor() {
     super()
 
@@ -29,18 +29,27 @@ class Hero extends HTMLElement {
       searchInput.value = ""
 
       if (selectedCategory === "") {
-        cards.forEach((card: HTMLElement) => (card.style.display = ""))
+        cards.forEach((card: HTMLElement) => {
+          card.style.display = ""
+          card.removeAttribute('data-hidden-by-filter')
+        })
+        // Trigger pagination refresh
+        window.dispatchEvent(new CustomEvent('cardsFiltered'))
         return
       }
       for (let i = 0; i < cards.length; i++) {
         const cardCategories =
           cards[i]!.getAttribute("data-categories")!.split(", ")
         if (cardCategories.includes(selectedCategory)) {
           ;(cards[i] as HTMLElement).style.display = ""
+          ;(cards[i] as HTMLElement).removeAttribute('data-hidden-by-filter')
         } else {
           ;(cards[i] as HTMLElement).style.display = "none"
+          ;(cards[i] as HTMLElement).setAttribute('data-hidden-by-filter', 'true')
         }
       }
+      // Trigger pagination refresh
+      window.dispatchEvent(new CustomEvent('cardsFiltered'))
     })
 
     let currentFocus = -1 // Track the currently focused item in the autocomplete list
@@ -168,10 +177,14 @@ class Hero extends HTMLElement {
           filterByCategory(selectedCategory, cardCategories)
         ) {
           ;(cards[i] as HTMLElement).style.display = ""
+          ;(cards[i] as HTMLElement).removeAttribute('data-hidden-by-filter')
         } else {
           ;(cards[i] as HTMLElement).style.display = "none"
+          ;(cards[i] as HTMLElement).setAttribute('data-hidden-by-filter', 'true')
         }
       }
+      // Trigger pagination refresh
+      window.dispatchEvent(new CustomEvent('cardsFiltered'))
     }
   }
 }

src/scripts/paginate.test.ts

@@ -21,28 +21,44 @@ const setupDOM = (cardCount: number = 10) => {
           <button id="next-button">Next</button>
         </div>
         <div id="cardContainer">
-          ${Array.from({ length: cardCount }, (_, i) =>
+          ${Array.from({ length: cardCount }, (_, i) => 
             `<div class="card" data-title="Card ${i + 1}">Card ${i + 1}</div>`
           ).join('')}
         </div>
       </body>
     </html>
-  `)
+  `, {
+    url: "http://localhost", // Provide a URL to avoid localStorage issues
+  })
 
   global.document = dom.window.document
   global.window = dom.window as any
   global.Event = dom.window.Event
-}
-
-// Simple PaginationManager class for testing (extracted from paginate.ts)
+  global.CustomEvent = dom.window.CustomEvent
+  
+  // Mock localStorage
+  const localStorageMock = {
+    getItem: vi.fn(),
+    setItem: vi.fn(), 
+    removeItem: vi.fn(),
+    clear: vi.fn(),
+    length: 0,
+    key: vi.fn()
+  }
+  Object.defineProperty(dom.window, 'localStorage', {
+    value: localStorageMock,
+    writable: true
+  })
+  global.localStorage = localStorageMock
+}// Simple PaginationManager class for testing (extracted from paginate.ts)
 class PaginationManager {
-  private cards: HTMLElement[]
+  private allCards: HTMLElement[]
   private currentPage: number = 1
   private itemsPerPage: number = 6
   private totalPages: number = 1
 
   constructor() {
-    this.cards = Array.from(document.querySelectorAll(".card"))
+    this.allCards = Array.from(document.querySelectorAll(".card"))
     this.init()
   }
 
@@ -58,6 +74,11 @@ class PaginationManager {
     const prevButton = document.getElementById("prev-button")
     const nextButton = document.getElementById("next-button")
 
+    // Listen for filter changes
+    window.addEventListener('cardsFiltered', () => {
+      setTimeout(() => this.refreshPagination(), 10)
+    })
+
     paginateSelect?.addEventListener("change", (e) => {
       const target = e.target as HTMLSelectElement
       this.itemsPerPage = parseInt(target.value)
@@ -84,19 +105,33 @@ class PaginationManager {
     })
   }
 
+  private refreshPagination() {
+    this.currentPage = 1
+    this.calculateTotalPages()
+    this.showCurrentPage()
+    this.updateButtonStates()
+  }
+
   private calculateTotalPages() {
-    this.totalPages = Math.ceil(this.cards.length / this.itemsPerPage)
+    const filteredCards = this.getFilteredCards()
+    this.totalPages = Math.ceil(filteredCards.length / this.itemsPerPage)
+    if (this.totalPages === 0) this.totalPages = 1
   }
 
   private showCurrentPage() {
+    const filteredCards = this.getFilteredCards()
     const startIndex = (this.currentPage - 1) * this.itemsPerPage
     const endIndex = startIndex + this.itemsPerPage
 
-    this.cards.forEach((card) => {
-      card.style.display = "none"
+    this.allCards.forEach((card) => {
+      if (card.getAttribute('data-hidden-by-filter') === 'true') {
+        card.style.display = "none"
+      } else {
+        card.style.display = "none"
+      }
     })
 
-    this.cards.slice(startIndex, endIndex).forEach((card) => {
+    filteredCards.slice(startIndex, endIndex).forEach((card) => {
       card.style.display = "block"
     })
   }
@@ -130,7 +165,13 @@ class PaginationManager {
   }
 
   public getVisibleCards(): HTMLElement[] {
-    return this.cards.filter(card => card.style.display !== "none")
+    return this.allCards.filter(card => card.style.display !== "none")
+  }
+
+  public getFilteredCards(): HTMLElement[] {
+    return this.allCards.filter(card => {
+      return card.getAttribute('data-hidden-by-filter') !== 'true'
+    })
   }
 }
 
@@ -268,4 +309,46 @@ describe("PaginationManager", () => {
     nextButton.click()
     expect(paginationManager.getCurrentPage()).toBe(1)
   })
+
+  test("works with filtered cards", () => {
+    setupDOM(10)
+    paginationManager = new PaginationManager()
+
+    // Simulate filtering by marking some cards as hidden by filter
+    const cards = Array.from(document.querySelectorAll('.card'))
+    if (cards.length >= 3) {
+      cards[0]!.setAttribute('data-hidden-by-filter', 'true')
+      cards[1]!.setAttribute('data-hidden-by-filter', 'true')
+      cards[2]!.setAttribute('data-hidden-by-filter', 'true')
+    }
+
+    // Trigger pagination refresh with custom event
+    window.dispatchEvent(new CustomEvent('cardsFiltered'))
+
+    // Should now work with 7 visible cards instead of 10
+    expect(paginationManager.getTotalPages()).toBe(2) // 7 cards / 6 per page = 2 pages
+    
+    // First page should show 6 cards
+    const visibleCards = paginationManager.getVisibleCards()
+    expect(visibleCards).toHaveLength(6)
+  })
+
+  test("resets to page 1 when filters change", async () => {
+    setupDOM(15)
+    paginationManager = new PaginationManager()
+
+    // Go to page 2
+    const nextButton = document.getElementById("next-button") as HTMLButtonElement
+    nextButton.click()
+    expect(paginationManager.getCurrentPage()).toBe(2)
+
+    // Simulate filter change
+    window.dispatchEvent(new CustomEvent('cardsFiltered'))
+
+    // Wait for the setTimeout in the event handler
+    await new Promise(resolve => setTimeout(resolve, 20))
+
+    // Should reset to page 1
+    expect(paginationManager.getCurrentPage()).toBe(1)
+  })
 })

src/scripts/paginate.ts

@@ -1,12 +1,13 @@
   class PaginationManager {
-    private cards: HTMLElement[]
+    private allCards: HTMLElement[]
     private currentPage: number = 1
     private itemsPerPage: number = 6
     private totalPages: number = 1
 
     constructor() {
-      this.cards = Array.from(document.querySelectorAll(".card"))
+      this.allCards = Array.from(document.querySelectorAll(".card"))
       this.init()
+      this.observeFilterChanges()
     }
 
     private init() {
@@ -16,6 +17,27 @@
       this.updateButtonStates()
     }
 
+    private observeFilterChanges() {
+      // Listen for the custom event dispatched by hero-action.ts
+      window.addEventListener('cardsFiltered', () => {
+        setTimeout(() => this.refreshPagination(), 10)
+      })
+    }
+
+    private getFilteredCards(): HTMLElement[] {
+      // Get cards that are not hidden by filtering
+      return this.allCards.filter(card => {
+        return card.getAttribute('data-hidden-by-filter') !== 'true'
+      })
+    }
+
+    private refreshPagination() {
+      this.currentPage = 1 // Reset to first page when filters change
+      this.calculateTotalPages()
+      this.showCurrentPage()
+      this.updateButtonStates()
+    }
+
     private setupEventListeners() {
       const paginateSelect = document.getElementById(
         "pagination-select"
@@ -53,20 +75,29 @@
     }
 
     private calculateTotalPages() {
-      this.totalPages = Math.ceil(this.cards.length / this.itemsPerPage)
+      const filteredCards = this.getFilteredCards()
+      this.totalPages = Math.ceil(filteredCards.length / this.itemsPerPage)
+      if (this.totalPages === 0) this.totalPages = 1
     }
 
     private showCurrentPage() {
+      const filteredCards = this.getFilteredCards()
       const startIndex = (this.currentPage - 1) * this.itemsPerPage
       const endIndex = startIndex + this.itemsPerPage
 
-      // Hide all cards
-      this.cards.forEach((card) => {
-        card.style.display = "none"
+      // First, hide all cards
+      this.allCards.forEach((card) => {
+        // If card is hidden by filter, keep it hidden
+        if (card.getAttribute('data-hidden-by-filter') === 'true') {
+          card.style.display = "none"
+        } else {
+          // For filtered cards, hide by default (pagination will show the correct ones)
+          card.style.display = "none"
+        }
       })
 
-      // Show cards for current page
-      this.cards.slice(startIndex, endIndex).forEach((card) => {
+      // Show only the cards for current page from filtered results
+      filteredCards.slice(startIndex, endIndex).forEach((card) => {
         card.style.display = "block"
       })
     }