Help showing next/previous page of a reaction menu

Hi,

I am using the below code to create a reaction menu in my Discord bot.

let pages = [‘General Commands Page 1’, ‘General Command Page 2’, ‘General Commands Page 3’]; 
let page = 1; 

let embed = new Discord.RichEmbed()
.setColor("#15f153")
.setFooter(Page ${page} of ${pages.length})
.setDescription(pages[page-1])

message.channel.send(embed).then(msg => {

msg.react(‘:arrow_left:’).then( r => {
msg.react(‘:arrow_right:’)

// Filters
const backwardsFilter = (reaction, user) => reaction.emoji.name === ‘:arrow_left:’ && user.id === message.author.id;
const forwardsFilter = (reaction, user) => reaction.emoji.name === ‘:arrow_right:’ && user.id === message.author.id;

const backwards = msg.createReactionCollector(backwardsFilter, {timer: 6000});
const forwards = msg.createReactionCollector(forwardsFilter, {timer: 6000});

backwards.on(‘collect’, r => {
if (page === 1) return;
page–;
embed.setDescription(pages[page-1]);
embed.setFooter(Page ${page} of ${pages.length});
msg.edit(embed)

r.remove(r.users.filter(u => u === message.author).first());
})

forwards.on(‘collect’, r => {
if (page === pages.length) return;
page++;
embed.setDescription(pages[page-1]);
embed.setFooter(Page ${page} of ${pages.length});
msg.edit(embed)

r.remove(r.users.filter(u => u === message.author).first());
})
})
})
}

The idea is if I had 15 commands set up in my bot the embed message would show a page with 5 commands on, you could then use the left and right reactions to flip through the other pages (each showing a different set of 5 commands).

So far it does show the correct descriptions and footers, however, I am unsure how to proceed with adding the actual lists of commands.  I can get the first page to work but how do I then replace that with the correct embed for page 2 etc?

*FIXED*

Not ideal but it works:

(… embeds 1 - 2 follow below set up)

let embed03 = new Discord.RichEmbed()
.setColor("#15f153")
.setDescription(pages[page-1])
.setFooter(Page ${page} of ${pages.length})
.addField(“field 1”)
.addField(“field 2”)
.addField("!field 3")
.addField(“field 4”)

message.channel.send(embed01).then(msg => {

msg.react(‘:arrow_left:’).then( r => {
msg.react(‘:arrow_right:’)

// Filters
const backwardsFilter = (reaction, user) => reaction.emoji.name === ‘:arrow_left:’ && user.id === message.author.id;
const forwardsFilter = (reaction, user) => reaction.emoji.name === ‘:arrow_right:’ && user.id === message.author.id;

const backwards = msg.createReactionCollector(backwardsFilter, {timer: 1000});
const forwards = msg.createReactionCollector(forwardsFilter, {timer: 1000});

backwards.on(‘collect’, r => {
if (page === 4) {
page–
embed03.setDescription(pages[page-1])
embed03.setFooter(Page ${page} of ${pages.length})
msg.edit(embed03)
}

I’ve had to set up each embed within the same js file and use each if statements with every page. Thankfully, I will only have at most 5 pages each.

Like I said, not ideal and I’m sure there is a better way of doing it but it works so I’ll still with it for now until I figure out a better solution.

2 Likes