discord.js - Imagine ❄•6mo ago

Dealing with button components

Hello guys! This code is basically mapping the button components of my interaction that were used previously, what I'm doing is basically "filtering" for my current button that has the same ID and returning the others. My question is how I can put it inside "components" to be able to send the buttons, because it's returning the following in JSON:

new Responder({
  customId: "premium/assinar/plus",
  type: ResponderType.Button,
  cache: "cached",
  async run(interaction) {
    const currentMonth = 1; // I'm still thinking about a code that makes it possible to count the number of times the button has been clicked
    const monthVariable = currentMonth > 1 ? "meses" : "mês";
    const currentPrice = 9.9 * currentMonth;

    const button = ButtonBuilder.from(interaction.component).setLabel(
      `${currentMonth} ${monthVariable} (R$${currentPrice})`,
    );

    const subscribeRowIndex = interaction.message.components.findIndex((row) =>
      row.components.some(
        (component) => component.customId === "premium/assinar/months",
      ),
    );
    if (subscribeRowIndex !== -1) {
      const subscribeRow = interaction.message.components[subscribeRowIndex];
      const updatedComponents = subscribeRow.components.map((component) => {
        if (component.customId === "premium/assinar/months") {
          return button;
        }
        return component;
      });

      console.log(updatedComponents);

      // interaction.message.components[subscribeRowIndex] = { ...subscribeRow, components: updatedComponents };
    }

    // await interaction.update({ components: [subscribeRow] });
  },
});

new Responder({
  customId: "premium/assinar/plus",
  type: ResponderType.Button,
  cache: "cached",
  async run(interaction) {
    const currentMonth = 1; // I'm still thinking about a code that makes it possible to count the number of times the button has been clicked
    const monthVariable = currentMonth > 1 ? "meses" : "mês";
    const currentPrice = 9.9 * currentMonth;

    const button = ButtonBuilder.from(interaction.component).setLabel(
      `${currentMonth} ${monthVariable} (R$${currentPrice})`,
    );

    const subscribeRowIndex = interaction.message.components.findIndex((row) =>
      row.components.some(
        (component) => component.customId === "premium/assinar/months",
      ),
    );
    if (subscribeRowIndex !== -1) {
      const subscribeRow = interaction.message.components[subscribeRowIndex];
      const updatedComponents = subscribeRow.components.map((component) => {
        if (component.customId === "premium/assinar/months") {
          return button;
        }
        return component;
      });

      console.log(updatedComponents);

      // interaction.message.components[subscribeRowIndex] = { ...subscribeRow, components: updatedComponents };
    }

    // await interaction.update({ components: [subscribeRow] });
  },
});

12 Replies

d.js toolkit•6mo 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

LuaanOP•6mo ago

[
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '-5',
      id: 2,
      disabled: true,
      custom_id: 'premium/assinar/minusfive'
    }
  },
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '-',
      id: 3,
      disabled: true,
      custom_id: 'premium/assinar/minus'    
    }
  },
  ButtonBuilder {
    data: {
      type: 2,
      style: 2,
      label: '1 mês (R$9.9)',
      id: 5,
      custom_id: 'premium/assinar/plus',
      emoji: undefined
    }
  },
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '+',
      id: 5,
      custom_id: 'premium/assinar/plus'
    }
  },
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '+5',
      id: 6,
      custom_id: 'premium/assinar/plusfive'
    }
  }
]

[
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '-5',
      id: 2,
      disabled: true,
      custom_id: 'premium/assinar/minusfive'
    }
  },
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '-',
      id: 3,
      disabled: true,
      custom_id: 'premium/assinar/minus'    
    }
  },
  ButtonBuilder {
    data: {
      type: 2,
      style: 2,
      label: '1 mês (R$9.9)',
      id: 5,
      custom_id: 'premium/assinar/plus',
      emoji: undefined
    }
  },
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '+',
      id: 5,
      custom_id: 'premium/assinar/plus'
    }
  },
  ButtonComponent {
    data: {
      type: 2,
      style: 2,
      label: '+5',
      id: 6,
      custom_id: 'premium/assinar/plusfive'
    }
  }
]