How can I set a button as disabled after the 15s has passed without any interaction?? Discord v14

Question

const config = require('../../botconfig');

module.exports = {
name: 'invite',
description: 'Crimson and Server invites',
run: async (client, interaction, args) => {
   try {
   const inviteEmbed = new EmbedBuilder()
      .setDescription('**__Invite • Support__**\n\n<a:Arrow:735141069033046106> Want to invite Crimson to your server? Feel free to click on the **"Invite"** button.\n\n<a:Arrow:735141069033046106> Need additional help with Crimson? Come join us in our humble abode by clicking on the **"Support"** button.')
      .setColor('#EE1C25')
      .setFooter({ text: `Command Requested by: ${interaction.user.tag}`, iconURL: interaction.user.displayAvatarURL() })
      .setTimestamp()
      .setThumbnail(client.user.displayAvatarURL());

   let botInvite = new ButtonBuilder()
      .setStyle(ButtonStyle.Link)
      .setURL(`https://discord.com/`)
      .setLabel('Invite');

   let support = new ButtonBuilder()
      .setStyle(ButtonStyle.Link)
      .setURL('https://discord.gg/')
      .setLabel('Support');
    
   let del = new ButtonBuilder()
      .setLabel(`Close`)
      .setCustomId(`delete`)
      .setEmoji(`❌`)
      .setStyle(ButtonStyle.Danger);

   const inviteMsg = await interaction.reply({ embeds: [inviteEmbed], components: [new ActionRowBuilder().addComponents(botInvite, support, del)], fetchReply: true });

   const collector = inviteMsg.createMessageComponentCollector({ componentType: ComponentType.Button, time: 15000 });

   collector.on('collect', async i => {
      if (i.user.id === interaction.user.id) {
        console.log(`${i.user.tag} clicked on the ${i.customId} button.`);
      } else {
        await i.reply({ content: `This button is not for you!`, ephemeral: true });
      }

      if (i.id === 'delete') {
         inviteMsg.delete();
         interaction.delete();
     await i.reply.defer();
      }
   });
   
   collector.on('end', collected => {
      console.log(`Collected ${collected.size} interactions.`);
   });

   } catch (err) {
     console.log(err);
     return interaction.reply(`\`${err}\`.`);
   }
  }
};

I’ve been trying to mess around with it to see if i can but I’m running out of options to try 😂

I don’t know if I can do the same thing as the embed and set it as disabled through the components thing but not sure if that’s the correct way to do it.

Answer 1

You can do that easily by disabling the buttons once your collector ends.

collector.on('end', collected => {
  botInvite.setDisabled(true);
  support.setDisabled(true);
  del.setDisabled(true);

  // edit the message with the components disabled
  inviteMsg.edit({embeds: [inviteEmbed], components: [new ActionRowBuilder().addComponents(botInvite, support, del)]});

  console.log(`Collected ${collected.size} interactions.`);
});

If you have multiple buttons that need to be disabled, this can get a little annoying to add in your code.

What you can do is creating a row with your components, adding it to your message, and then looping through the buttons.

const row = new ActionRowBuilder().addComponents(botInvite, support, del);

const inviteMsg = await interaction.reply({ embeds: [inviteEmbed], components: [row], fetchReply: true });

// when your collector ends:

collector.on('end', collected => {
  row.components.forEach(c => c.setDisabled(true));

  // edit message
  inviteMsg.edit({embeds: [inviteEmbed], components: [row]});
  console.log(`Collected ${collected.size} interactions.`);
});