Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination UI for Conversations and Messages #55

Merged
merged 1 commit into from
Feb 22, 2024
Merged

Pagination UI for Conversations and Messages #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 114 additions & 9 deletions public/full.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -891,12 +891,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'),
},
Expand All @@ -914,15 +914,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 ======= */
Expand Down Expand Up @@ -998,6 +1045,8 @@ function updateAddressUI() {
addresses
.map(createAddressListItem)
.forEach((item) => addressUl.appendChild(item))

updatePaginationUI('address')
}

async function fetchAddresses() {
Expand All @@ -1017,15 +1066,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()
Expand All @@ -1034,9 +1084,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()
Expand Down Expand Up @@ -1108,6 +1159,8 @@ function updateHistoryUI() {
histories
.map(createConversationListItem)
.forEach((item) => historyUl.appendChild(item))

updatePaginationUI('history')
}

async function fetchHistories() {
Expand Down Expand Up @@ -1183,6 +1236,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 ======= */
Expand Down Expand Up @@ -1216,11 +1293,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)
Expand Down Expand Up @@ -1300,6 +1379,8 @@ function updateMessageUI() {
messages
.map(createMessageListItem)
.forEach((li) => messageList.appendChild(li))

updatePaginationUI('message')
}

async function fetchMessages(id) {
Expand All @@ -1315,4 +1396,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 ======= */
62 changes: 53 additions & 9 deletions views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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 -->

Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down