discord.js - Imagine an app•7d ago

"chained" StringSelect

Hi, is there anyway to send a message with a default embed + a select component, and depend of the select interaction, edit the embed. For now I've achieved to do it once

export async function run({ interaction }: SlashCommandProps) {
  const user: User = interaction.options.getUser("user") || interaction.user;

  const selectOptions = [
    {
      label: "Profile",
      value: "1",
      description: "Show your profile",
    },
    {
      label: "Stats",
      value: "2",
      description: "Show your stats",
    },
  ];

  const selectMenu = new StringSelectMenuBuilder()
    .setCustomId(interaction.id)
    .setPlaceholder("Select a category")
    .setMinValues(1)
    .setMaxValues(1)
    .addOptions(
      selectOptions.map((option) =>
        new StringSelectMenuOptionBuilder()
          .setLabel(option.label)
          .setValue(option.value)
          .setDescription(option.description)
      )
    );

  const actionRow = new ActionRowBuilder().addComponents(selectMenu);
  const reply = await interaction.reply({
    embeds: [getProfileEmbed(interaction)],
    components: [actionRow],
  });

  const collector = reply.createMessageComponentCollector({
    componentType: ComponentType.StringSelect,
    filter: (i) => i.user.id === user.id && i.customId === interaction.id,
  });
  collector.on("collect", async (i) => {
    const value = i.values[0];
    if (value === "1") {
      console.log(`${user.username} selected profile`);
      reply.edit({
        embeds: [getProfileEmbed(interaction)],
        components: [actionRow],
      });
    } else if (value === "2") {
      console.log(`${user.username} selected stats`);
      reply.edit({
        embeds: [getStatsEmbed(interaction)],
        components: [actionRow],
      });
    }
  });
}

function getProfileEmbed(interaction: ChatInputCommandInteraction): Embed {
  const profileEmbed = new EmbedBuilder();

  profileEmbed.setTitle(`${interaction.user.username}'s profile`);
  profileEmbed.setColor(0x9b59b6);
  profileEmbed.setTimestamp(new Date().getTime());

  return profileEmbed;
}

function getStatsEmbed(interaction: ChatInputCommandInteraction): Embed {
  const statsEmbed = new EmbedBuilder();

  statsEmbed.setTitle(`${interaction.user.username}'s stats`);
  statsEmbed.setColor(0x9b59b6);
  statsEmbed.setTimestamp(new Date().getTime());

  return statsEmbed;
}

export async function run({ interaction }: SlashCommandProps) {
  const user: User = interaction.options.getUser("user") || interaction.user;

  const selectOptions = [
    {
      label: "Profile",
      value: "1",
      description: "Show your profile",
    },
    {
      label: "Stats",
      value: "2",
      description: "Show your stats",
    },
  ];

  const selectMenu = new StringSelectMenuBuilder()
    .setCustomId(interaction.id)
    .setPlaceholder("Select a category")
    .setMinValues(1)
    .setMaxValues(1)
    .addOptions(
      selectOptions.map((option) =>
        new StringSelectMenuOptionBuilder()
          .setLabel(option.label)
          .setValue(option.value)
          .setDescription(option.description)
      )
    );

  const actionRow = new ActionRowBuilder().addComponents(selectMenu);
  const reply = await interaction.reply({
    embeds: [getProfileEmbed(interaction)],
    components: [actionRow],
  });

  const collector = reply.createMessageComponentCollector({
    componentType: ComponentType.StringSelect,
    filter: (i) => i.user.id === user.id && i.customId === interaction.id,
  });
  collector.on("collect", async (i) => {
    const value = i.values[0];
    if (value === "1") {
      console.log(`${user.username} selected profile`);
      reply.edit({
        embeds: [getProfileEmbed(interaction)],
        components: [actionRow],
      });
    } else if (value === "2") {
      console.log(`${user.username} selected stats`);
      reply.edit({
        embeds: [getStatsEmbed(interaction)],
        components: [actionRow],
      });
    }
  });
}

function getProfileEmbed(interaction: ChatInputCommandInteraction): Embed {
  const profileEmbed = new EmbedBuilder();

  profileEmbed.setTitle(`${interaction.user.username}'s profile`);
  profileEmbed.setColor(0x9b59b6);
  profileEmbed.setTimestamp(new Date().getTime());

  return profileEmbed;
}

function getStatsEmbed(interaction: ChatInputCommandInteraction): Embed {
  const statsEmbed = new EmbedBuilder();

  statsEmbed.setTitle(`${interaction.user.username}'s stats`);
  statsEmbed.setColor(0x9b59b6);
  statsEmbed.setTimestamp(new Date().getTime());

  return statsEmbed;
}

But it only work the first time, after what the interaction keep failing even if I don't have error in my console

2 Replies

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

Hezaerd•7d ago

Worked! Thanks you :just_right:

Gaming

Programming

"chained" StringSelect