refactored updatePagination to encapsulate it

cisagov · Oct 31, 2024 · a377daa · a377daa
1 parent 3d398a6
commit a377daa
Showing 1 changed file with 31 additions and 31 deletions.
diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
@@ -1196,27 +1196,45 @@ class BaseTable {
 
     counterSelectorEl.innerHTML = `${totalItems} ${this.itemName}${totalItems > 1 ? 's' : ''}${this.currentSearchTerm ? ' for ' + '"' + this.currentSearchTerm + '"' : ''}`;
 
+    // Helper function to create a pagination item, such as a 
+    const createPaginationItem = (page) => {
+      const paginationItem = document.createElement('li');
+      paginationItem.className = 'usa-pagination__item usa-pagination__page-no';
+      paginationItem.innerHTML = `
+        <a href="${parentTableSelector}" class="usa-pagination__button" aria-label="Page ${page}">${page}</a>
+      `;
+      if (page === currentPage) {
+        paginationItem.querySelector('a').classList.add('usa-current');
+        paginationItem.querySelector('a').setAttribute('aria-current', 'page');
+      }
+      paginationItem.querySelector('a').addEventListener('click', (event) => {
+        event.preventDefault();
+        this.loadTable(page);
+      });
+      return paginationItem;
+    };
+
     if (hasPrevious) {
-      const prevPageItem = document.createElement('li');
-      prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-      prevPageItem.innerHTML = `
+      const prevPaginationItem = document.createElement('li');
+      prevPaginationItem.className = 'usa-pagination__item usa-pagination__arrow';
+      prevPaginationItem.innerHTML = `
         <a href="${parentTableSelector}" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
           <svg class="usa-icon" aria-hidden="true" role="img">
             <use xlink:href="/public/img/sprite.svg#navigate_before"></use>
           </svg>
           <span class="usa-pagination__link-text">Previous</span>
         </a>
       `;
-      prevPageItem.querySelector('a').addEventListener('click', (event) => {
+      prevPaginationItem.querySelector('a').addEventListener('click', (event) => {
         event.preventDefault();
         this.loadTable(currentPage - 1);
       });
-      paginationButtons.appendChild(prevPageItem);
+      paginationButtons.appendChild(prevPaginationItem);
     }
 
     // Add first page and ellipsis if necessary
     if (currentPage > 2) {
-      paginationButtons.appendChild(this.createPageItem(1, parentTableSelector, currentPage));
+      paginationButtons.appendChild(createPaginationItem(1));
       if (currentPage > 3) {
         const ellipsis = document.createElement('li');
         ellipsis.className = 'usa-pagination__item usa-pagination__overflow';
@@ -1228,7 +1246,7 @@ class BaseTable {
 
     // Add pages around the current page
     for (let i = Math.max(1, currentPage - 1); i <= Math.min(numPages, currentPage + 1); i++) {
-      paginationButtons.appendChild(this.createPageItem(i, parentTableSelector, currentPage));
+      paginationButtons.appendChild(createPaginationItem(i));
     }
 
     // Add last page and ellipsis if necessary
@@ -1240,25 +1258,25 @@ class BaseTable {
         ellipsis.innerHTML = '<span>…</span>';
         paginationButtons.appendChild(ellipsis);
       }
-      paginationButtons.appendChild(this.createPageItem(numPages, parentTableSelector, currentPage));
+      paginationButtons.appendChild(createPaginationItem(numPages));
     }
 
     if (hasNext) {
-      const nextPageItem = document.createElement('li');
-      nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
-      nextPageItem.innerHTML = `
+      const nextPaginationItem = document.createElement('li');
+      nextPaginationItem.className = 'usa-pagination__item usa-pagination__arrow';
+      nextPaginationItem.innerHTML = `
         <a href="${parentTableSelector}" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
           <span class="usa-pagination__link-text">Next</span>
           <svg class="usa-icon" aria-hidden="true" role="img">
             <use xlink:href="/public/img/sprite.svg#navigate_next"></use>
           </svg>
         </a>
       `;
-      nextPageItem.querySelector('a').addEventListener('click', (event) => {
+      nextPaginationItem.querySelector('a').addEventListener('click', (event) => {
         event.preventDefault();
         this.loadTable(currentPage + 1);
       });
-      paginationButtons.appendChild(nextPageItem);
+      paginationButtons.appendChild(nextPaginationItem);
     }
   }
 
@@ -1288,24 +1306,6 @@ class BaseTable {
     }
   };
 
-  // Helper function to create a page item
-  createPageItem(page, parentTableSelector, currentPage) {
-    const pageItem = document.createElement('li');
-    pageItem.className = 'usa-pagination__item usa-pagination__page-no';
-    pageItem.innerHTML = `
-      <a href="${parentTableSelector}" class="usa-pagination__button" aria-label="Page ${page}">${page}</a>
-    `;
-    if (page === currentPage) {
-      pageItem.querySelector('a').classList.add('usa-current');
-      pageItem.querySelector('a').setAttribute('aria-current', 'page');
-    }
-    pageItem.querySelector('a').addEventListener('click', (event) => {
-      event.preventDefault();
-      this.loadTable(page);
-    });
-    return pageItem;
-  }
-
   /**
    * A helper that resets sortable table headers
    *