DIA
discord.js - Imagine an appā€¢3mo ago
Asbron

Disabling Buttons on new Components V2

I need some help I am currently work with v2 components mostly containers and I have action rows / buttons which need to be disabled on click but now I always need to remake the full container to do that is there any better way ?
12 Replies
d.js toolkit
d.js toolkitā€¢3mo ago
- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - āœ… Marked as resolved by OP
Jacobi
Jacobiā€¢3mo ago
I've posted in another thread, but this is my implementation to disable all buttons in container: 
// container is of type ContainerBuilder
for (const component of container.components) {
  if (component instanceof SectionBuilder) {
    if (!component.accessory) {
      continue;
    }
    if (component.accessory.data.type === ComponentType.Button) {
      component.accessory.data.disabled = true;
    }
  }
}

await interaction.editReply({ components: [container] });
// container is of type ContainerBuilder
for (const component of container.components) {
  if (component instanceof SectionBuilder) {
    if (!component.accessory) {
      continue;
    }
    if (component.accessory.data.type === ComponentType.Button) {
      component.accessory.data.disabled = true;
    }
  }
}

await interaction.editReply({ components: [container] });
you can encapsulate this in a function like disableButtons(interaction, container) if you have more complex responses (such with more than one container), you'll need to update the code, but I think this is a nice start @Asbron
Asbron
AsbronOPā€¢3mo ago
yeah I used this but in a ticket system kind getting complex let me try finding buttons/selectmenu on find all my buttons are dynamic and some have near same names 
            .addActionRowComponents([
              new ActionRowBuilder<ButtonBuilder>().addComponents([
                new ButtonBuilder()
                  .setCustomId(`claimTicket~${cachedata.ticketId}`)
                  .setLabel("Claim Ticket")
                  .setStyle(ButtonStyle.Secondary) // Initially disabled
                  .setDisabled(false),
              ]),
            ]),
        ],
            .addActionRowComponents([
              new ActionRowBuilder<ButtonBuilder>().addComponents([
                new ButtonBuilder()
                  .setCustomId(`claimTicket~${cachedata.ticketId}`)
                  .setLabel("Claim Ticket")
                  .setStyle(ButtonStyle.Secondary) // Initially disabled
                  .setDisabled(false),
              ]),
            ]),
        ],
nvm ig got it
Jacobi
Jacobiā€¢3mo ago
I see. My implementation only considers buttons inside sections as Accessories. That's the only way that I use them right now
Asbron
AsbronOPā€¢3mo ago
yeah but can be used like that to get Action row and disabling a particular button
Jacobi
Jacobiā€¢3mo ago
you can also set your ButtonBuilder to a const and rebuild all the container (but now, the button will be disabled) I think that use .find to find the row and then .find to find the button a little over processing, using two array methods, no? depending on the complexity of container and size of array
Asbron
AsbronOPā€¢3mo ago
      const interval = setInterval(async () => {
        if (countDown <= 0) {
          clearInterval(interval);
          if (msg.components[0].type !== ComponentType.Container) return;
          const container = new ContainerBuilder(msg.components[0].toJSON());
    
          const actionRow = container.components.find(
            (c: any) => c.data && c.data.id === '1234'
          );
          if (actionRow && actionRow instanceof ActionRowBuilder) {
            actionRow.addComponents(
              new ButtonBuilder()
                .setCustomId(`claimTicket~${cachedata.ticketId}`)
                .setLabel('Claim Ticket')
                .setStyle(ButtonStyle.Secondary)
                .setDisabled(false)
            );
          }
          await msg.edit({
            flags: 'IsComponentsV2',
            components: [container],
          });
        }
      })
      const interval = setInterval(async () => {
        if (countDown <= 0) {
          clearInterval(interval);
          if (msg.components[0].type !== ComponentType.Container) return;
          const container = new ContainerBuilder(msg.components[0].toJSON());
    
          const actionRow = container.components.find(
            (c: any) => c.data && c.data.id === '1234'
          );
          if (actionRow && actionRow instanceof ActionRowBuilder) {
            actionRow.addComponents(
              new ButtonBuilder()
                .setCustomId(`claimTicket~${cachedata.ticketId}`)
                .setLabel('Claim Ticket')
                .setStyle(ButtonStyle.Secondary)
                .setDisabled(false)
            );
          }
          await msg.edit({
            flags: 'IsComponentsV2',
            components: [container],
          });
        }
      })
@Qjuh do you mean something like this ? 
            .addActionRowComponents([
              new ActionRowBuilder<ButtonBuilder>().addComponents([
                new ButtonBuilder()
                .setId(123)
                  .setCustomId(`claimTicket~${cachedata.ticketId}`)
                  .setLabel("Claim Ticket")
                  .setStyle(ButtonStyle.Secondary) // Initially disabled
                  .setDisabled(false),
              ]).setId(1234),
            ]),
            .addActionRowComponents([
              new ActionRowBuilder<ButtonBuilder>().addComponents([
                new ButtonBuilder()
                .setId(123)
                  .setCustomId(`claimTicket~${cachedata.ticketId}`)
                  .setLabel("Claim Ticket")
                  .setStyle(ButtonStyle.Secondary) // Initially disabled
                  .setDisabled(false),
              ]).setId(1234),
            ]),
Jacobi
Jacobiā€¢3mo ago
you use setInterval to set a time limit to user respond to the buttons?
Asbron
AsbronOPā€¢3mo ago
nope there is 10 sec cooldown down* on claim button
Jacobi
Jacobiā€¢3mo ago
undestood
Asbron
AsbronOPā€¢3mo ago
then I need to disable the claim button when it get clicked again if unclaim it need get enabled ah I see what should be the type šŸ«¤ both works just need it to be disable let me try @Qjuh any idea ? (parameter) c: any 
     const interval = setInterval(async () => {
        if (countDown <= 0) {
          clearInterval(interval);
          if (msg.components[0].type !== ComponentType.Container) return;
          const container = new ContainerBuilder(msg.components[0].toJSON());
    
          const actionRow = container.components.find(
            (c) => c.data && c.data.id === 1234
          );
          if (actionRow && actionRow instanceof ActionRowBuilder) {
            actionRow.components.find(
              (c) => c.data && c.data.
            )

          }
          await msg.edit({
            flags: 'IsComponentsV2',
            components: [container],
          });
        }
      })
     const interval = setInterval(async () => {
        if (countDown <= 0) {
          clearInterval(interval);
          if (msg.components[0].type !== ComponentType.Container) return;
          const container = new ContainerBuilder(msg.components[0].toJSON());
    
          const actionRow = container.components.find(
            (c) => c.data && c.data.id === 1234
          );
          if (actionRow && actionRow instanceof ActionRowBuilder) {
            actionRow.components.find(
              (c) => c.data && c.data.
            )

          }
          await msg.edit({
            flags: 'IsComponentsV2',
            components: [container],
          });
        }
      })
getting into 2nd find 
      const interval = setInterval(async () => {
        if (countDown <= 0) {
          clearInterval(interval);
          if (msg.components[0].type !== ComponentType.Container) return;
          const container = new ContainerBuilder(msg.components[0].toJSON());
    
          const actionRow = container.components.find(
            (c) => c.data && c.data.id === 1234
          );
          if (actionRow && actionRow instanceof ActionRowBuilder) {
            const button = actionRow.components.find(
              (c: ButtonBuilder) => c.data && c.data.id === 123
            )
            if (button && button instanceof ButtonBuilder) {
              button.setDisabled(true);
            }

          }
      const interval = setInterval(async () => {
        if (countDown <= 0) {
          clearInterval(interval);
          if (msg.components[0].type !== ComponentType.Container) return;
          const container = new ContainerBuilder(msg.components[0].toJSON());
    
          const actionRow = container.components.find(
            (c) => c.data && c.data.id === 1234
          );
          if (actionRow && actionRow instanceof ActionRowBuilder) {
            const button = actionRow.components.find(
              (c: ButtonBuilder) => c.data && c.data.id === 123
            )
            if (button && button instanceof ButtonBuilder) {
              button.setDisabled(true);
            }

          }
ig this oh yea
Asbron
AsbronOPā€¢3mo ago
nvm its not letting me to do
No description

Did you find this page helpful?