discord.js - Imagine an app•2y ago

Determine what page the current embed is in when a button was pressed

I am trying to add next/back page buttons to my embed. how can i know what the current page is when the button was pressed. the embed is basically for a leaderboard

9 Replies

Unknown User•2y ago

Message Not Public

조아오•2y ago

You can use an variable in the button custom id too Like <embed_unique_id>:goto_page:3 Yeah, there's that

Febkosq8OP•2y ago

async execute(interaction, client) {
    let currPage = interaction.message.embeds[0].data.footer.text[5];
    console.log("currPage");
    console.log(currPage);
    const butttonLabelList = [
      { key: "BackLeaderboard", value: "◀️ Previous Page" },
      { key: "FrontLeaderboard", value: "Next Page ▶️" },
    ];

    let buttonRow = new ActionRowBuilder();
    for (let i = 0; i < butttonLabelList.length; i++) {
      buttonRow.addComponents(
        new ButtonBuilder()
          .setCustomId(butttonLabelList[i].key)
          .setLabel(butttonLabelList[i].value)
          .setStyle(ButtonStyle.Primary)
      );
    }
    let levelEmbed = await LevelHandler.getLeaderboardEmbed(
      interaction,
      parseInt(currPage) + 1
    );
    console.log("levelEmbed");
    console.log(levelEmbed);
    interaction.editReply({
      embeds: [levelEmbed],
      components: [buttonRow],
    });
  }

async execute(interaction, client) {
    let currPage = interaction.message.embeds[0].data.footer.text[5];
    console.log("currPage");
    console.log(currPage);
    const butttonLabelList = [
      { key: "BackLeaderboard", value: "◀️ Previous Page" },
      { key: "FrontLeaderboard", value: "Next Page ▶️" },
    ];

    let buttonRow = new ActionRowBuilder();
    for (let i = 0; i < butttonLabelList.length; i++) {
      buttonRow.addComponents(
        new ButtonBuilder()
          .setCustomId(butttonLabelList[i].key)
          .setLabel(butttonLabelList[i].value)
          .setStyle(ButtonStyle.Primary)
      );
    }
    let levelEmbed = await LevelHandler.getLeaderboardEmbed(
      interaction,
      parseInt(currPage) + 1
    );
    console.log("levelEmbed");
    console.log(levelEmbed);
    interaction.editReply({
      embeds: [levelEmbed],
      components: [buttonRow],
    });
  }

this is what i came up with i figured out how to get the page number i cant figure out how to add custom values to a button id

const butttonLabelList = [
          { key: "FrontLeaderboard", value: "Next Page ▶️" },
        ];

        let buttonRow = new ActionRowBuilder();
        for (let i = 0; i < butttonLabelList.length; i++) {
          buttonRow.addComponents(
            new ButtonBuilder()
              .setCustomId(butttonLabelList[i].key)
              .setLabel(butttonLabelList[i].value)
              .setStyle(ButtonStyle.Primary)
          );
        }

const butttonLabelList = [
          { key: "FrontLeaderboard", value: "Next Page ▶️" },
        ];

        let buttonRow = new ActionRowBuilder();
        for (let i = 0; i < butttonLabelList.length; i++) {
          buttonRow.addComponents(
            new ButtonBuilder()
              .setCustomId(butttonLabelList[i].key)
              .setLabel(butttonLabelList[i].value)
              .setStyle(ButtonStyle.Primary)
          );
        }

this is my button code yea but how can i handle the unique keys everytime yea tbh i figured out the pages but i dont know how to edit the original embed with the new one

interaction.editReply({
      embeds: [levelEmbed],
      components: [buttonRow],
    });

interaction.editReply({
      embeds: [levelEmbed],
      components: [buttonRow],
    });

this failed bcz the interaction here is the button didnt understand what you meant over there what do i use update on

Febkosq8OP•2y ago

when i press Next page over here

Febkosq8OP•2y ago

d.js docs•2y ago

ButtonInteraction#update() Updates the original message of the component on which the interaction was received on.

Febkosq8OP•2y ago

will try thanks that worked i never used that so was new to me How can i lock the buttons to basically who called my first interaction i just need to know the user who did the first interaction rest i can figure out

async execute(interaction, client) {
    let currPage = parseInt(
      interaction.message.embeds[0].data.footer.text.match(/\d+/g)[0]
    );
    console.log("currPage : " + currPage);
    let levelEmbed = await LevelHandler.getLeaderboardEmbed(
      interaction,
      currPage + 1
    );
    let pageCount = parseInt(levelEmbed.data.footer.text.match(/\d+/g)[1]);
    console.log("pageCount : " + pageCount);
    var butttonLabelList;
    if (currPage + 1 === pageCount) {
      butttonLabelList = [
        { key: "BackLeaderboard", value: "◀️ Previous Page" },
      ];
    } else {
      butttonLabelList = [
        { key: "BackLeaderboard", value: "◀️ Previous Page" },
        { key: "FrontLeaderboard", value: "Next Page ▶️" },
      ];
    }

    let buttonRow = new ActionRowBuilder();
    for (let i = 0; i < butttonLabelList.length; i++) {
      buttonRow.addComponents(
        new ButtonBuilder()
          .setCustomId(butttonLabelList[i].key)
          .setLabel(butttonLabelList[i].value)
          .setStyle(ButtonStyle.Primary)
      );
    }
    interaction.update({
      embeds: [levelEmbed],
      components: [buttonRow],
    });
  }

async execute(interaction, client) {
    let currPage = parseInt(
      interaction.message.embeds[0].data.footer.text.match(/\d+/g)[0]
    );
    console.log("currPage : " + currPage);
    let levelEmbed = await LevelHandler.getLeaderboardEmbed(
      interaction,
      currPage + 1
    );
    let pageCount = parseInt(levelEmbed.data.footer.text.match(/\d+/g)[1]);
    console.log("pageCount : " + pageCount);
    var butttonLabelList;
    if (currPage + 1 === pageCount) {
      butttonLabelList = [
        { key: "BackLeaderboard", value: "◀️ Previous Page" },
      ];
    } else {
      butttonLabelList = [
        { key: "BackLeaderboard", value: "◀️ Previous Page" },
        { key: "FrontLeaderboard", value: "Next Page ▶️" },
      ];
    }

    let buttonRow = new ActionRowBuilder();
    for (let i = 0; i < butttonLabelList.length; i++) {
      buttonRow.addComponents(
        new ButtonBuilder()
          .setCustomId(butttonLabelList[i].key)
          .setLabel(butttonLabelList[i].value)
          .setStyle(ButtonStyle.Primary)
      );
    }
    interaction.update({
      embeds: [levelEmbed],
      components: [buttonRow],
    });
  }

current code i dont wanna make it ephemeral. collector is something i never heard of could you link me to the collector part you were referring to

Febkosq8OP•2y ago

https://tenor.com/view/my-bad-oh-okay-alright-gif-24341012

Tenor

Febkosq8OP•2y ago

Final code

async execute(interaction, client) {
    const index = interaction.customId.indexOf("|");
    const triggerUser = interaction.customId.substring(index + 1);
    if (triggerUser !== interaction.user.id) {
      interaction.reply({
        content:
          ":no_entry: Only the user who called leaderboard can use this button",
        ephemeral: true,
      });
    } else {
      let currPage = parseInt(
        interaction.message.embeds[0].data.footer.text.match(/\d+/g)[0]
      );
      let levelEmbed = await LevelHandler.getLeaderboardEmbed(
        interaction,
        currPage - 1
      );
      let pageCount = parseInt(levelEmbed.data.footer.text.match(/\d+/g)[1]);
      var butttonLabelList;
      if (currPage - 2 === 0) {
        butttonLabelList = [
          {
            key: "FrontLeaderboard|" + interaction.user.id,
            value: "Next Page ▶️",
          },
        ];
      } else {
        butttonLabelList = [
          {
            key: "BackLeaderboard|" + interaction.user.id,
            value: "◀️ Previous Page",
          },
          {
            key: "FrontLeaderboard|" + interaction.user.id,
            value: "Next Page ▶️",
          },
        ];
      }

      let buttonRow = new ActionRowBuilder();
      for (let i = 0; i < butttonLabelList.length; i++) {
        buttonRow.addComponents(
          new ButtonBuilder()
            .setCustomId(butttonLabelList[i].key)
            .setLabel(butttonLabelList[i].value)
            .setStyle(ButtonStyle.Primary)
        );
      }
      interaction.update({
        embeds: [levelEmbed],
        components: [buttonRow],
      });
    }
  }

async execute(interaction, client) {
    const index = interaction.customId.indexOf("|");
    const triggerUser = interaction.customId.substring(index + 1);
    if (triggerUser !== interaction.user.id) {
      interaction.reply({
        content:
          ":no_entry: Only the user who called leaderboard can use this button",
        ephemeral: true,
      });
    } else {
      let currPage = parseInt(
        interaction.message.embeds[0].data.footer.text.match(/\d+/g)[0]
      );
      let levelEmbed = await LevelHandler.getLeaderboardEmbed(
        interaction,
        currPage - 1
      );
      let pageCount = parseInt(levelEmbed.data.footer.text.match(/\d+/g)[1]);
      var butttonLabelList;
      if (currPage - 2 === 0) {
        butttonLabelList = [
          {
            key: "FrontLeaderboard|" + interaction.user.id,
            value: "Next Page ▶️",
          },
        ];
      } else {
        butttonLabelList = [
          {
            key: "BackLeaderboard|" + interaction.user.id,
            value: "◀️ Previous Page",
          },
          {
            key: "FrontLeaderboard|" + interaction.user.id,
            value: "Next Page ▶️",
          },
        ];
      }

      let buttonRow = new ActionRowBuilder();
      for (let i = 0; i < butttonLabelList.length; i++) {
        buttonRow.addComponents(
          new ButtonBuilder()
            .setCustomId(butttonLabelList[i].key)
            .setLabel(butttonLabelList[i].value)
            .setStyle(ButtonStyle.Primary)
        );
      }
      interaction.update({
        embeds: [levelEmbed],
        components: [buttonRow],
      });
    }
  }

just in case someone wants it in future

Gaming

Programming

Determine what page the current embed is in when a button was pressed