Pagination for Conversation and Messages (#55)

signalwire · Feb 22, 2024 · 3afad52 · 3afad52
1 parent cf91847
commit 3afad52
Show file tree

Hide file tree

Showing 2 changed files with 167 additions and 18 deletions.
diff --git a/public/full.js b/public/full.js
@@ -908,12 +908,12 @@ function isBlank(str) {
 window.toggleTabState = async (activeButtonName) => {
   const config = [
     {
-      name: 'Directory',
+      name: 'directory',
       button: document.querySelector('button[name="Directory"]'),
       card: document.getElementById('addressCard'),
     },
     {
-      name: 'History',
+      name: 'history',
       button: document.querySelector('button[name="History"]'),
       card: document.getElementById('historyCard'),
     },
@@ -931,15 +931,62 @@ window.toggleTabState = async (activeButtonName) => {
     }
   })
 
-  if (activeButtonName === 'History') {
+  if (activeButtonName === 'history') {
     await fetchHistories()
   }
 
-  if (activeButtonName === 'Directory') {
+  if (activeButtonName === 'directory') {
     await fetchAddresses()
   }
 }
 
+function updatePaginationUI(activeButtonName) {
+  const config = [
+    {
+      name: 'address',
+      paginationDiv: document.getElementById('addressPagination'),
+      data: window.__addressData,
+      fetchNext: fetchNextAddresses,
+      fetcthPrev: fetchPrevAddresses,
+    },
+    {
+      name: 'history',
+      paginationDiv: document.getElementById('historyPagination'),
+      data: window.__historyData,
+      fetchNext: fetchNextHistories,
+      fetcthPrev: fetchPrevHistories,
+    },
+    {
+      name: 'message',
+      paginationDiv: document.getElementById('messagePagination'),
+      data: window.__messageData,
+      fetchNext: fetchNextMessages,
+      fetcthPrev: fetchPrevMessages,
+    },
+  ]
+
+  const currentConf = config.find((conf) => conf.name === activeButtonName)
+  if (!currentConf?.data) return
+
+  currentConf.paginationDiv.classList.remove('d-none')
+  const nextBtn = currentConf.paginationDiv.querySelector(
+    'button[name="fetch-next"]'
+  )
+  const prevBtn = currentConf.paginationDiv.querySelector(
+    'button[name="fetch-prev"]'
+  )
+
+  if (nextBtn) {
+    nextBtn.onclick = currentConf.fetchNext
+    nextBtn.disabled = !currentConf.data.hasNext
+  }
+
+  if (prevBtn) {
+    prevBtn.onclick = currentConf.fetchNext
+    prevBtn.disabled = !currentConf.data.hasPrev
+  }
+}
+
 /** ======= Tab utilities end ======= */
 
 /** ======= Address utilities start ======= */
@@ -1015,6 +1062,8 @@ function updateAddressUI() {
   addresses
     .map(createAddressListItem)
     .forEach((item) => addressUl.appendChild(item))
+
+  updatePaginationUI('address')
 }
 
 async function fetchAddresses() {
@@ -1034,15 +1083,16 @@ async function fetchAddresses() {
   }
 }
 
-window.dialAddress = async (address) => {
+async function dialAddress(address) {
   const destinationInput = document.getElementById('destination')
   destinationInput.value = address
   connect()
 }
 
-window.fetchNextAddresses = async () => {
-  const { nextPage } = window.__addressData
+async function fetchNextAddresses() {
+  const { hasNext, nextPage } = window.__addressData
   try {
+    if (!hasNext) return
     const nextAddresses = await nextPage()
     window.__addressData = nextAddresses
     updateAddressUI()
@@ -1051,9 +1101,10 @@ window.fetchNextAddresses = async () => {
   }
 }
 
-window.fetchPrevAddresses = async () => {
-  const { prevPage } = window.__addressData
+async function fetchPrevAddresses() {
+  const { hasPrev, prevPage } = window.__addressData
   try {
+    if (!hasPrev) return
     const prevAddresses = await prevPage()
     window.__addressData = prevAddresses
     updateAddressUI()
@@ -1125,6 +1176,8 @@ function updateHistoryUI() {
   histories
     .map(createConversationListItem)
     .forEach((item) => historyUl.appendChild(item))
+
+  updatePaginationUI('history')
 }
 
 async function fetchHistories() {
@@ -1200,6 +1253,30 @@ function subscribeToNewMessages() {
   }
 }
 
+async function fetchNextHistories() {
+  const { hasNext, nextPage } = window.__historyData
+  try {
+    if (!hasNext) return
+    const nextHistory = await nextPage()
+    window.__historyData = nextHistory
+    updateAddressUI()
+  } catch (error) {
+    console.error('Unable to fetch next histories', error)
+  }
+}
+
+async function fetchPrevHistories() {
+  const { hasPrev, prevPage } = window.__historyData
+  try {
+    if (!hasPrev) return
+    const prevHistory = await prevPage()
+    window.__historyData = prevHistory
+    updateAddressUI()
+  } catch (error) {
+    console.error('Unable to fetch prev histories', error)
+  }
+}
+
 /** ======= History utilities end ======= */
 
 /** ======= Message utilities start ======= */
@@ -1233,11 +1310,13 @@ function clearMessageModal() {
   const typeBadgeSpan = msgModalDiv.querySelector('.type-badge')
   const contactBtnDiv = msgModalDiv.querySelector('.contact-buttons')
   const messageList = msgModalDiv.querySelector('#messageList')
+  const messagePagination = msgModalDiv.querySelector('#messagePagination')
   const loaderListItem = msgModalDiv.querySelector('#messageList li')
   const avatarImage = msgModalDiv.querySelector('.avatar')
   titleH2.textContent = ''
   typeBadgeSpan.textContent = ''
   contactBtnDiv.classList.add('d-none')
+  messagePagination.classList.add('d-none')
   // Remove all the message list item except the first one (loader)
   Array.from(messageList.children)
     .slice(1)
@@ -1317,6 +1396,8 @@ function updateMessageUI() {
   messages
     .map(createMessageListItem)
     .forEach((li) => messageList.appendChild(li))
+
+  updatePaginationUI('message')
 }
 
 async function fetchMessages(id) {
@@ -1332,4 +1413,28 @@ async function fetchMessages(id) {
   }
 }
 
+async function fetchNextMessages() {
+  const { hasNext, nextPage } = window.__messageData
+  try {
+    if (!hasNext) return
+    const nextMessage = await nextPage()
+    window.__messageData = nextMessage
+    updateMessageUI()
+  } catch (error) {
+    console.error('Unable to fetch next message', error)
+  }
+}
+
+async function fetchPrevMessages() {
+  const { hasPrev, prevPage } = window.__messageData
+  try {
+    if (!hasPrev) return
+    const prevMessage = await prevPage()
+    window.__messageData = prevMessage
+    updateMessageUI()
+  } catch (error) {
+    console.error('Unable to fetch prev message', error)
+  }
+}
+
 /** ======= Message utilities end ======= */
diff --git a/views/index.ejs b/views/index.ejs
@@ -185,10 +185,10 @@
         <div id="tabs">
           <ul class="nav nav-tabs">
             <li class="nav-item">
-              <button class="nav-link text-secondary" name="History" onclick="toggleTabState('History')">History</button>
+              <button class="nav-link text-secondary" name="History" onclick="toggleTabState('history')">History</button>
             </li>
             <li class="nav-item">
-              <button class="nav-link active" name="Directory" onclick="toggleTabState('Directory')">Directory</button>
+              <button class="nav-link active" name="Directory" onclick="toggleTabState('address')">Directory</button>
             </li>
           </ul>
 
@@ -218,24 +218,26 @@
               <ul class="list-group list-group-flush"></ul>
             </div>
 
-            <!-- Pagination -->
-            <div class="d-flex justify-content-center pb-2 gap-2">
+            <!-- Address Pagination -->
+            <div id="addressPagination" class="d-flex justify-content-center pb-2 gap-2 d-none">
               <button 
-                name="fetch-prev-address" 
+                name="fetch-prev" 
                 type="button" 
                 class="btn btn-light btn-sm" 
-                onclick="fetchPrevAddresses()">
+                disabled
+              >
                 Prev
               </button>
               <button 
-                name="fetch-next-address" 
+                name="fetch-next" 
                 type="button" 
                 class="btn btn-light btn-sm" 
-                onclick="fetchNextAddresses()">
+                disabled
+              >
                 Next
               </button>
             </div>
-            <!-- Pagination end -->
+            <!-- Address Pagination end -->
           </div>
           <!-- Addresses end -->
 
@@ -244,6 +246,27 @@
             <div class="card-body" id="histories">
               <ul class="list-group list-group-flush"></ul>
             </div>
+
+            <!-- History Pagination -->
+            <div id="historyPagination" class="d-flex justify-content-center pb-2 gap-2 d-none">
+              <button 
+                name="fetch-prev" 
+                type="button" 
+                class="btn btn-light btn-sm" 
+                disabled  
+              >
+                Prev
+              </button>
+              <button 
+                name="fetch-next" 
+                type="button" 
+                class="btn btn-light btn-sm" 
+                disabled  
+              >
+                Next
+              </button>
+            </div>
+            <!-- History Pagination end -->
           </div>
           <!-- History end -->
         </div>
@@ -417,6 +440,27 @@
                 <span class="placeholder placeholder-lg col-12"></span>
               </li>
             </ul>
+
+            <!-- Message Pagination -->
+            <div id="messagePagination" class="d-flex justify-content-center pb-2 gap-2 d-none">
+              <button 
+                name="fetch-prev" 
+                type="button" 
+                class="btn btn-light btn-sm" 
+                disabled  
+              >
+                Prev
+              </button>
+              <button 
+                name="fetch-next" 
+                type="button" 
+                class="btn btn-light btn-sm" 
+                disabled  
+              >
+                Next
+              </button>
+            </div>
+            <!-- Message Pagination end -->
           </div>
         </div>
       </div>