Collection: Implement paginated embed

Cards are listed in a paginated embed showing 8 cards per page

commands/collection.js

@@ -1,5 +1,6 @@
-const { SlashCommandBuilder } = require("discord.js");
+const { SlashCommandBuilder, EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require("discord.js");
 const { Card, User, Character } = require("../models");
+const UserUtils = require("../util/users");
 
 //fetch all cards owned by the user and list them
 module.exports = {
@@ -7,41 +8,106 @@ module.exports = {
             .setName("collection")
             .setDescription("List all cards in your collection"),
     async execute(interaction) {
-        //fetch the user given the userID and include his cards
+        let user = await UserUtils.getUserByDiscordId(interaction.member.id);
-        const user = await User.findOne({
+        let offset = 0;
-            where: {
+        const uid = interaction.id;
-                discordId: interaction.member.id
+
+        let embed = new EmbedBuilder()
+            .setTitle("Collection")
+            .setDescription("Loading your collection...")
+            .setColor(0x00AE86);
+
+        //add collector for pagination
+        const filter = (i) => i.customId === `previous-${uid}` || i.customId === `next-${uid}`;
+        const collector = interaction.channel.createMessageComponentCollector({ filter, time: 60000 });
+        
+        //add buttons for pagination
+        const row = new ActionRowBuilder();
+        row.addComponents(
+            new ButtonBuilder()
+                .setCustomId(`previous-${uid}`)
+                .setLabel(`Previous`)
+                .setStyle(ButtonStyle.Primary),
+            new ButtonBuilder()
+                .setCustomId(`next-${uid}`)
+                .setLabel(`Next`)
+                .setStyle(ButtonStyle.Primary)
+        );
+
+        let embedMessage = await interaction.reply({
+            embeds: [embed],
+            components: [row],
+            ephemeral: false,
+            fetchReply: true
+        });
+
+        this.updatePageEmbed(embedMessage, user, offset);  
+
+        //TODO: magic number 8 has to be refactored
+        /*  BUGBUG: pagination goes past max cards showing empty pages
+                    going lower than the first page throws SQL error
+        */
+        collector.on('collect', async (i) => {
+            i.deferUpdate();
+            if (i.customId === `previous-${uid}`) {
+                //next
+                offset-=8;
+            } else if (i.customId === `next-${uid}`) {
+                //previous
+                offset+=8;
+            }
+            this.updatePageEmbed(embedMessage, user, offset);
+        });
+
+        collector.on('end', collected => {
+            embedMessage.edit({ components: [] });
+            console.log(`Collected ${collected.size} items`);
+        });
+
+
     },
+
+    async updatePageEmbed(i, user, offset) {
+        const cardsPerPage = 8;
+        let cards = await Card.findAndCountAll({
+            where: {
+                userId: user.id
+            },
+            limit: cardsPerPage,
+            offset: offset,
             include: [{
-                model: Card, 
+                model: Character,
-                include: [Character] 
             }]
         });
 
+        //create embed using embedBuilder
+        let embed = new EmbedBuilder()
+            .setTitle(`$'s collection`)
+            .setColor(0x00ff00)
+            .setTimestamp()
+            .setFooter({ text: `Cards ${offset+1} - ${offset + cards.rows.length} / ${cards.count}` });
+
         //if the user has no cards, tell him
-        if (user.Cards.length === 0) {
+        if (cards.count === 0) {
-            interaction.reply({
+            embed.setTitle("You have no cards in your collection");
-                content: "You have no cards in your collection",
-                ephemeral: true
-            });
             return;
         }
 
         //if the user has cards, list them
-        let message = "";
+        for (let i = 0; i < cards.rows.length; i++) {
-        for (let i = 0; i < user.Cards.length; i++) {
+            let card = cards.rows[i];
-            message += `${user.Cards[i].id} - ${user.Cards[i].characterId} \n`;
+            embed.addFields({
-            message += `Identifier: ${user.Cards[i].identifier} \n`;
+                inline: true,
-            message += `Name: ${user.Cards[i].Character.name} \n`;
+                name: `${i+offset+1}:[${card.identifier}] ${card.Character.name}`,
-            message += `Image: ${user.Cards[i].Character.imageURL} \n`;
+                value: `P: ${card.printNr} Q: ${card.quality}`
-            message += `Quality: ${user.Cards[i].quality} \n`;
-            message += `Print number: ${user.Cards[i].printNr} \n`;
-            message += `------------------------ \n`;
-        }
-        interaction.reply({
-            content: message.substring(0, 1500),
-            ephemeral: false
             });
 
+            //Add a blank field every two items to force two columns
+            if (i % 2 === 1) {
+                embed.addFields({ name:'\u200b', value: '\u200b'});
+            }
+        }
+
+        await i.edit({ embeds: [embed] });
     }
 }