Interaction Failed Async

[little agate]

Hello!

i have no clue how to await an interaction in V14, but after trying, the code that is attached is what i came with.

however, it's simply not updating the interaction, nor is it printing my console logs which is causing me so much confusion

anyone that could point me to the right direction (no docs please, I've already read it like 4 times, and i'm understanding less the more I read it)

const { SlashCommandBuilder, EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');
const axios = require('axios');

async function fetchAndSortEvents() {
    let options = {
        method: "POST",
        url: "<Definitely not a Link placeholder>",
        headers: {
            cookie: "<Nom Nom Cookies>",
            "content-type": "application/json"
        },
        data: {
            query: "<Yay a Query>",
            variables: null,
            operationName: "Events"
        }
    };

    try {
        const response = await axios.request(options);
        const events = response.data.data.events;
        events.sort((a, b) => b.id - a.id);
        return events;
    } catch (error) {
        console.error(error);
    }
}

function displayEvents(events, startIndex, endIndex) {
    let result = 'Event ID | Event Name\n';
    for (let i = startIndex; i < endIndex; i++) {
        result += `${events[i].id} | ${events[i].displayName}\n`;
    }
    return result;
}

module.exports = {
    data: new SlashCommandBuilder()
        .setName('arenagamesfetch')
        .setDescription('Fetches and displays the latest 10 Arena Games events'),
    async execute(interaction) {
        const events = await fetchAndSortEvents();
        let startIndex = 0;
        let endIndex = 10;

        const result = displayEvents(events, startIndex, endIndex);
        const embed = new EmbedBuilder()
            .setTitle('Latest Arena Games Events')
            .setThumbnail('<Thumbnail Link>')
            .setDescription(result);


        const row = new ActionRowBuilder()
            .addComponents(
                new ButtonBuilder()
                    .setCustomId('listPrev')
                    .setLabel('Previous')
                    .setStyle(ButtonStyle.Primary),
                new ButtonBuilder()
                    .setCustomId('listNext')
                    .setLabel('Next')
                    .setStyle(ButtonStyle.Primary),
            );

        await interaction.reply({ embeds: [embed], components: [row] });

        const filter = i => i.customId === 'previous' || i.customId === 'next';
        const collector = interaction.channel.createMessageComponentCollector({ filter, time: 15000 });

        collector.on('collect', async i => {
            try {
                if (i.customId === 'listPrev') {
                    startIndex -= 10;
                    endIndex -= 10;
                    if (startIndex < 0) startIndex = 0;
                    if (endIndex < 10) endIndex = 10;
                    console.error("Previoused");
                } else if (i.customId === 'listNext') {
                    startIndex += 10;
                    endIndex += 10;
                    if (startIndex > events.length - 1) startIndex = events.length - 1;
                    if (endIndex > events.length) endIndex = events.length;
                    console.error("Nexted");
                }
            } catch (error) {
                console.error(error);
            }


            const result = displayEvents(events, startIndex, endIndex);
            embed.setDescription(result);
            await i.update({ embeds: [embed], components: [row] });
        });
    },
};

[wraith badge]

• What's your exact discord.js npm list discord.js and node node -v version?
• Post the full error stack trace, not just the top part!
• Show your code!
• Explain what exactly your issue is.
• Not a discord.js issue? Check out #useful-servers.

[little agate]

`-- [email protected]
v18.12.1
for the curious

oh also!

i recently updated from V13 to V14, but i don't see anything V13 related, so, uh, correct me when wrong

[severe arrow]

Does the collector not emit?

[little agate]

it should 🤔

maybe i should log that aswell if it actually emits or not

[severe arrow]

Yh, see what emits and logs

And what doesn’t

That’ll help us greatly here

You’ll also wanna use a collector attached to a Message instance rather then a channel here

[daring pebble]

If you are waiting for button or select menu input from a specific message, don't create the collector on the channel.

• Channel collectors return component interactions for any component within that channel.

- <Channel>.createMessageComponentCollector(…)
+ <Message>.createMessageComponentCollector(…)

[severe arrow]

so here it’ll be

const msg = await interaction.editReply(…options)

const collector = msg.createMessage…

editReply returns a Promise which once resolved resolves into a Message instance

[little agate]

Changed the following, seems its indeed not emitting```diff

•     await interaction.reply({ embeds: [embed], components: [row] });    
  

•     const msg = await interaction.reply({ embeds: [embed], components: [row] });
  

•     const collector = interaction.channel.createMessageComponentCollector({ filter, time: 15000 });    
  

•     const collector = msg.createMessageComponentCollector({ filter, time: 15000 });
  

•    collector.on('collect', (interaction) => {
  

•        console.log('Collector emitted collect event');
  

•    });
  

•    collector.on('end', (collected, reason) => {
  

•        console.log(`Collector stopped collecting interactions. Reason: ${reason}`);
  

•    });
  

[severe arrow]

If you remove the filter does it work?

[little agate]

oh my god, i just realized that i named the previous and next instead of the dumb custom names i gave them

[severe arrow]

Ah yes

Yh lol

listPrevious ≠ previous

[little agate]

yeeees, it works!

[severe arrow]

Nice work

[little agate]

eventhough it was a silly mistake, i did genuinely learn alot from this, thank you