How to move back and forth for help page using awaiting reactions discord.js

Question

This is my sample code:

const Discord = require('discord.js')
module.exports = {
    name: 'help',
    description: 'help',
    execute(message, args) { 
        const embed = new Discord.MessageEmbed()
            .setTitle('Page One')
            .setDescription('This is page one')
        message.channel.send(embed).then((msg) => {  
            msg.react('⬅️')
            msg.react('➡️')
 
            const filter = (reaction, user) => {
                return ['⬅️', '➡️'].includes(reaction.emoji.name) && user.id === message.author.id;
            };

            msg.awaitReactions(filter, { max: 1, time: 60000, errors: ['time'] })
                .then(collected => {
                    const reaction = collected.first()

                    if (reaction.emoji.name === '⬅️') {

                        message.channel.send(embed)
                    } 
                    else {
                        const secEmbed = new Discord.MessageEmbed()
                            .setTitle('Help')
                            .setDescription('This is help page 2')
                        msg.edit(secEmbed);
                    }
                }) 
        })
    }
} 

This is working, but when i try to move it backwards to the previous page after i have moved to the second page, the thing stops working.... I meant, then the embed pages won't move forth or back. Is there anyway to solve this prob? Thank You.

Answer 1

You could simply call msg.awaitReactions() again; wrap it in a function to make it easier to repeat the reaction collection.

Using msg.awaitReactions() :

message.channel.send(embed).then((msg) => {
  msg.react("⬅️");
  msg.react("➡️");

  function handleReactions() {
    const filter = (reaction, user) => {
      return ['⬅️', '➡️'].includes(reaction.emoji.name) && user.id === message.author.id;
    };

    msg.awaitReactions(filter, {max: 1, time: 60000, errors: ["time"]})
      .then((collected) => {
        const reaction = collected.first();
        const name = reaction.emoji.name;
        if (name === "⬅️") {
          // edit page a certain way
          handleReactions();
        } else if (name === "➡️") {
          // edit page another way
          handleReactions();
        }
      });
  }
  handleReactions();

});

Another way would be to listen for reaction events :

message.channel.send(embed).then((msg) => {
  msg.react("⬅️");
  msg.react("➡️");

  // handles reactions
  function handleReaction(reaction, user) {
    // ignore the reaction if the reaction is on a different message
    if (reaction.message.id !== msg.id && user.id === message.author.id) {return;}

    const name = reaction.emoji.name;
    if (name === "⬅️") {
      // move page a certain way
    } else if (name === "➡️") {
      // move page another way
    }
    
  }

  // add a listener for message reactions
  message.client.on("messageReactionAdd", handleReaction);

  // wait a specific amount of time to stop listening
  setTimeout(() => {
    // remove the listener
    message.client.off("messageReactionAdd", handleReaction);
  }, 60000); // 60 seconds

  /*
    You could add functions to reset the timeout after each reaction as well.
  */

});