Toldi Posts - Answer Overflow

Toldi

•Created by Toldi on 1/11/2024 in #djs-questions

Disable buttons if none were clicked when timer runs out

This is a follow up question to one of my previous posts where I wanted to dynamically disable buttons based on their customId once they were clicked. While I was able to get that to work thanks to the input of the kind souls from this server, I ran into an issue while testing my functions further. If no buttons are clicked and the timer you set on the collector runs out, then the Collection that is emitted is empty: Collection(0) [Map] {} (If you click at least one, or more buttons, then you will get back: Collection(i) [Map] {Button Interaction info...}, with i being how many buttons you clicked). I was using the Collection Map to get all the buttons back, so that I could loop over them and disable them individually (I can't just disable the buttons by their name, as I am dynamically creating buttons without a name). Code for my collector (I am "filtering" on 'collect'):

const collector =  response.createMessageComponentCollector({
  componentType: ComponentType.Button,
  time: 8_000, // return it to 30s
  max: maxButtonsToClick
});

const collector =  response.createMessageComponentCollector({
  componentType: ComponentType.Button,
  time: 8_000, // return it to 30s
  max: maxButtonsToClick
});

Code for my collector on 'end' (which works fine as long as at least one button was clicked):

collector.on('end', (interaction) => {
  const arrayOfActionRows = interaction.first().message.components;
  const buttons = [];
  for (const actionRow of arrayOfActionRows){
    const componentsRow = actionRow.components;
      for (let a = 0; a < componentsRow.length; a++){
        const current = componentsRow[a];
          buttons.push(
            new ButtonBuilder()
              .setCustomId(`${current.data.custom_id}`)
              .setLabel(`${current.data.label}`)
              .setStyle(ButtonStyle.Secondary)
              .setDisabled(true)
          );
        }
    const buttonsArray = buttonWrapper(buttons);

    response.edit({
       components: buttonsArray
    })
  }
})

collector.on('end', (interaction) => {
  const arrayOfActionRows = interaction.first().message.components;
  const buttons = [];
  for (const actionRow of arrayOfActionRows){
    const componentsRow = actionRow.components;
      for (let a = 0; a < componentsRow.length; a++){
        const current = componentsRow[a];
          buttons.push(
            new ButtonBuilder()
              .setCustomId(`${current.data.custom_id}`)
              .setLabel(`${current.data.label}`)
              .setStyle(ButtonStyle.Secondary)
              .setDisabled(true)
          );
        }
    const buttonsArray = buttonWrapper(buttons);

    response.edit({
       components: buttonsArray
    })
  }
})

Thanks for the help in advance! Discord.js: v14.14.1 Node.js: v20.10.0

5 replies

DIAdiscord.js - Imagine an app

•Created by Toldi on 1/6/2024 in #djs-questions

Disable a button using its custom_id

Can I disable a button (that has not been assigned to a variable) by using it's custom_id? I am creating buttons dynamically with a for loop with the following code:

if(similarMatchesList){
        for (let a = 0; a < similarMatchesList.length; a++){
            const current = similarMatchesList[a];
            buttons.push(
                new ButtonBuilder()         
                     .setCustomId(`${buttonPrefix}${current.id}`) 
                     .setLabel(`${current.name} [${current.id}]`)
                     .setStyle(ButtonStyle.Secondary)
            );
        }
    }

if(similarMatchesList){
        for (let a = 0; a < similarMatchesList.length; a++){
            const current = similarMatchesList[a];
            buttons.push(
                new ButtonBuilder()         
                     .setCustomId(`${buttonPrefix}${current.id}`) 
                     .setLabel(`${current.name} [${current.id}]`)
                     .setStyle(ButtonStyle.Secondary)
            );
        }
    }

I am able to pass the buttons into an ActionRowBuilder. Then send the ActionRowBuilder with the message correctly, and I am able to "collect" when the button is interacted with. But I am struggling with disabling the button (adding setDisabled(true) to it) that was just clicked since I don't have a variable associated with the button. I was hoping to disable the button using it's custom_id, but haven't been able to find a way to do that. I thought about assigning each button to a new variable as I go through the for loop, but haven't been able to think of a way of doing that. Thanks for the help in advance! Discord.js version: 14.14.1 Node version: 20.8.0

58 replies

Gaming

Programming