CRY$TAL Comments - Answer Overflow

CRY$TAL

•Created by CRY$TAL on 6/19/2023 in #djs-questions

Isolating interactions on Select Menu’s

For anyone who might stumble on this thread, I managed to get this working as below (now, other use interactions do not disrupt selections). Note: I will leave this open temporarily in-case there is some bad practice here or something that could be better handled: Summary: 1. I have nested component collectors for each reply with new components 2. Instead of saving selected value to a global variable on Select Menu click, I am accessing the map of the collector to get the Select Menu selection embedHandler.js

module.exports = {
    name: Events.InteractionCreate,
    async execute(interaction) { 


    if(interaction.type == InteractionType.MessageComponent) {
        if(interaction.customId == 'view-shop') {   

            const packs = await Packs.find(); 
            const select = new StringSelectMenuBuilder()
            .setCustomId('cards')
            .setPlaceholder('Select a Card Pack!')
            .setDisabled(false)
            packs.forEach(item =>
            select.addOptions( 
                    new StringSelectMenuOptionBuilder()
                    .setLabel(item.packName)
                    .setDescription(`A ${item.packTier} Card Pack. Price: ${item.packCost} Gold`)
                    .setEmoji('🃏')
                    .setValue(item.packId),
                )
            );

            const row1 = new ActionRowBuilder()
            .addComponents(select);

            await interaction.reply({components: [row1], ephemeral: true});
            const response = await interaction.fetchReply(); 

            const filters = i => (i.user.id === interaction.user.id);
            const selection = await response.createMessageComponentCollector({filter: filters, componentType: ComponentType.StringSelect});
            
            selection.on('collect', async i => {
                await interaction.deleteReply();
                await i.reply({content: `Confirm your purchase for ${i.values[0]}?`, components: [row2], ephemeral: true});
                const response2 = await i.fetchReply(); 
                const confirmButt = await response2.createMessageComponentCollector({filter: filters, componentType: ComponentType.Button});

                confirmButt.on('collect', async i => {
                    if (i.customId === 'confirm-shop-buy') {
                        const map = selection.collected.first();
                        //console.log(map.values[0], "SELECTION"); 
                        const bResponse = await userAddPack(map.values[0], i.member.id);
                        await i.followUp(bResponse);
                    }
                })
            });


            }
        }
         
    },
};

module.exports = {
    name: Events.InteractionCreate,
    async execute(interaction) { 


    if(interaction.type == InteractionType.MessageComponent) {
        if(interaction.customId == 'view-shop') {   

            const packs = await Packs.find(); 
            const select = new StringSelectMenuBuilder()
            .setCustomId('cards')
            .setPlaceholder('Select a Card Pack!')
            .setDisabled(false)
            packs.forEach(item =>
            select.addOptions( 
                    new StringSelectMenuOptionBuilder()
                    .setLabel(item.packName)
                    .setDescription(`A ${item.packTier} Card Pack. Price: ${item.packCost} Gold`)
                    .setEmoji('🃏')
                    .setValue(item.packId),
                )
            );

            const row1 = new ActionRowBuilder()
            .addComponents(select);

            await interaction.reply({components: [row1], ephemeral: true});
            const response = await interaction.fetchReply(); 

            const filters = i => (i.user.id === interaction.user.id);
            const selection = await response.createMessageComponentCollector({filter: filters, componentType: ComponentType.StringSelect});
            
            selection.on('collect', async i => {
                await interaction.deleteReply();
                await i.reply({content: `Confirm your purchase for ${i.values[0]}?`, components: [row2], ephemeral: true});
                const response2 = await i.fetchReply(); 
                const confirmButt = await response2.createMessageComponentCollector({filter: filters, componentType: ComponentType.Button});

                confirmButt.on('collect', async i => {
                    if (i.customId === 'confirm-shop-buy') {
                        const map = selection.collected.first();
                        //console.log(map.values[0], "SELECTION"); 
                        const bResponse = await userAddPack(map.values[0], i.member.id);
                        await i.followUp(bResponse);
                    }
                })
            });


            }
        }
         
    },
};

5 replies

DIAdiscord.js - Imagine an app

•Created by CRY$TAL on 6/19/2023 in #djs-questions

Isolating interactions on Select Menu’s

Does that also include each reply with new components?

5 replies

Gaming

Programming