From ad5b51b0034433e6c5d92a3c4639124704c8dd93 Mon Sep 17 00:00:00 2001 From: dev-737 <73829355+dev-737@users.noreply.github.com> Date: Sun, 12 Mar 2023 16:25:11 +0530 Subject: [PATCH] fix: Better pagination buttons --- src/Utils/functions/paginator.ts | 55 ++++++++++++++++---------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/src/Utils/functions/paginator.ts b/src/Utils/functions/paginator.ts index 647d73e4..fc171cba 100644 --- a/src/Utils/functions/paginator.ts +++ b/src/Utils/functions/paginator.ts @@ -1,32 +1,28 @@ -import { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder, CommandInteraction, Message, ComponentType } from 'discord.js'; +import { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder, CommandInteraction, ComponentType } from 'discord.js'; /** - * @param pages - An array of embeds to be paginated - * @param time - in milliseconds default is `60000ms` + * @param stopAfter - Number in milliseconds */ export async function paginate(interaction: CommandInteraction, pages: EmbedBuilder[], buttons = { - back: interaction.client.emoji.icons.back, - exit: interaction.client.emoji.icons.delete, - next: interaction.client.emoji.icons.next, + back: interaction.client.emoji.normal.back, + exit: '🛑', + next: interaction.client.emoji.normal.forward, }, - time = 60000) { - if (pages.length < 0 || time < 10000) throw new Error('Invalid Parameters'); + stopAfter = 60000) { + if (pages.length < 1) { + interaction.reply({ content: `${interaction.client.emoji.normal.tick} No more pages to display!`, ephemeral: true }); + return; + } - // eslint-disable-next-line prefer-const - let index = 0, row = new ActionRowBuilder().addComponents([ + let index = 0, pagenumber = 1; + const row = new ActionRowBuilder().addComponents([ new ButtonBuilder().setEmoji(buttons.back).setCustomId('1').setStyle(ButtonStyle.Primary).setDisabled(true), - new ButtonBuilder().setEmoji(buttons.exit).setCustomId('3').setStyle(ButtonStyle.Secondary), + new ButtonBuilder().setEmoji(buttons.exit).setCustomId('3').setStyle(ButtonStyle.Danger).setLabel(`Page ${pagenumber} of ${pages.length}`), new ButtonBuilder().setEmoji(buttons.next).setCustomId('2').setStyle(ButtonStyle.Primary).setDisabled(pages.length <= index + 1), ]); - let pagenumber = 0; - try { - pages[pagenumber].setFooter({ text: `Page ${pagenumber + 1} / ${pages.length}` }); - } - catch {/**/} - const data = { embeds: [pages[index]], components: [row], @@ -34,30 +30,35 @@ export async function paginate(interaction: CommandInteraction, pages: EmbedBuil }; const listMessage = interaction.replied || interaction.deferred ? await interaction.followUp(data) : await interaction.reply(data); - const col = listMessage.createMessageComponentCollector({ filter: i => i.user.id === interaction.user.id, idle: time, componentType: ComponentType.Button }); + const col = listMessage.createMessageComponentCollector({ filter: i => i.user.id === interaction.user.id, idle: stopAfter, componentType: ComponentType.Button }); col.on('collect', (i) => { - if (i.customId === '1') {--pagenumber, index--;} - else if (i.customId === '2') {pagenumber++, index++;} + if (i.customId === '1') { + pagenumber--; + index--; + } + else if (i.customId === '2') { + pagenumber++; + index++; + } else { - (listMessage as Message).edit({ components: [] }); col.stop(); return; } - row.setComponents([ new ButtonBuilder().setEmoji(buttons.back).setStyle(ButtonStyle.Primary).setCustomId('1').setDisabled(index === 0), - new ButtonBuilder().setEmoji(buttons.exit).setStyle(ButtonStyle.Secondary).setCustomId('3'), + new ButtonBuilder().setEmoji(buttons.exit).setStyle(ButtonStyle.Danger).setCustomId('3').setLabel(`Page ${pagenumber} of ${pages.length}`), new ButtonBuilder().setEmoji(buttons.next).setStyle(ButtonStyle.Primary).setCustomId('2').setDisabled(index === pages.length - 1), ]); - try {pages[pagenumber].setFooter({ text: `Page ${pagenumber + 1} / ${pages.length}` });} - catch {/**/} - i.update({ components: [row], embeds: [pages[index]], }); }); -} \ No newline at end of file + + col.on('end', () => { + listMessage.edit({ components: [] }); + }); +}