Using sapphire paginator is it possible to customize the pages names ?

Solution:

```typescript import { PaginatedMessage } from "@sapphire/discord.js-utilities"; import { Command } from "@sapphire/framework"; import { inlineCodeBlock } from "@sapphire/utilities";...

Jump to solution

34 Replies

Swiizyy•5mo ago

@simnJS you can do it like this

  import { PaginatedMessage } from '@sapphire/discord.js-utilities';
     
  PaginatedMessage.selectMenuOptions = (pageIndex) => ({
     label: `Go to page: ${pageIndex}`,
     description: 'This is a description'
  });

  import { PaginatedMessage } from '@sapphire/discord.js-utilities';
     
  PaginatedMessage.selectMenuOptions = (pageIndex) => ({
     label: `Go to page: ${pageIndex}`,
     description: 'This is a description'
  });

simnJSOP•5mo ago

Yeah but how can I use a custom name for each page instead of an index

    for (const [category, commands] of commandsPerCategories.entries()) {
      paginatedMessage //
        .addPageEmbed((embed) =>
          embed //
            .setTitle(category)
            .setDescription(commands.map(command => `• ${inlineCodeBlock(command.name)} → ${command.description}`).join('\n')))
    }

    for (const [category, commands] of commandsPerCategories.entries()) {
      paginatedMessage //
        .addPageEmbed((embed) =>
          embed //
            .setTitle(category)
            .setDescription(commands.map(command => `• ${inlineCodeBlock(command.name)} → ${command.description}`).join('\n')))
    }

Swiizyy•5mo ago

Maybe like that, right? @simnJS

import { PaginatedMessage } from "@sapphire/discord.js-utilities";
import { Command } from "@sapphire/framework";
import { inlineCodeBlock } from "@sapphire/utilities";

const commandsPerCategories = new Map<string, Command[]>();

const paginatedMessage = new PaginatedMessage({
  selectMenuOptions: (pageIndex) => {
    const category = Array.from(commandsPerCategories.keys())[pageIndex];
    return {
      label: category,
      description: `View the commands in the ${category} category`,
    };
  },
});

for (const [category, commands] of commandsPerCategories.entries()) {
  paginatedMessage //
    .addPageEmbed((embed) =>
      embed //
        .setTitle(category)
        .setDescription(
          commands
            .map(
              (command) =>
                `• ${inlineCodeBlock(command.name)} → ${command.description}`
            )
            .join("\n")
        )
    );
}

import { PaginatedMessage } from "@sapphire/discord.js-utilities";
import { Command } from "@sapphire/framework";
import { inlineCodeBlock } from "@sapphire/utilities";

const commandsPerCategories = new Map<string, Command[]>();

const paginatedMessage = new PaginatedMessage({
  selectMenuOptions: (pageIndex) => {
    const category = Array.from(commandsPerCategories.keys())[pageIndex];
    return {
      label: category,
      description: `View the commands in the ${category} category`,
    };
  },
});

for (const [category, commands] of commandsPerCategories.entries()) {
  paginatedMessage //
    .addPageEmbed((embed) =>
      embed //
        .setTitle(category)
        .setDescription(
          commands
            .map(
              (command) =>
                `• ${inlineCodeBlock(command.name)} → ${command.description}`
            )
            .join("\n")
        )
    );
}

simnJSOP•5mo ago

Are you sure selectmenuoption exist ?

Solution

Swiizyy•5mo ago

import { PaginatedMessage } from "@sapphire/discord.js-utilities";
import { Command } from "@sapphire/framework";
import { inlineCodeBlock } from "@sapphire/utilities";

const commandsPerCategories = new Map<string, Command[]>();

const paginatedMessage = new PaginatedMessage();

paginatedMessage.setSelectMenuOptions((pageIndex) => {
  const category = Array.from(commandsPerCategories.keys())[pageIndex];
  return {
    label: category,
    description: `View the commands in the ${category} category`,
  };
});

for (const [category, commands] of commandsPerCategories.entries()) {
  paginatedMessage //
    .addPageEmbed((embed) =>
      embed //
        .setTitle(category)
        .setDescription(
          commands
            .map(
              (command) =>
                `• ${inlineCodeBlock(command.name)} → ${command.description}`
            )
            .join("\n")
        )
    );
}

import { PaginatedMessage } from "@sapphire/discord.js-utilities";
import { Command } from "@sapphire/framework";
import { inlineCodeBlock } from "@sapphire/utilities";

const commandsPerCategories = new Map<string, Command[]>();

const paginatedMessage = new PaginatedMessage();

paginatedMessage.setSelectMenuOptions((pageIndex) => {
  const category = Array.from(commandsPerCategories.keys())[pageIndex];
  return {
    label: category,
    description: `View the commands in the ${category} category`,
  };
});

for (const [category, commands] of commandsPerCategories.entries()) {
  paginatedMessage //
    .addPageEmbed((embed) =>
      embed //
        .setTitle(category)
        .setDescription(
          commands
            .map(
              (command) =>
                `• ${inlineCodeBlock(command.name)} → ${command.description}`
            )
            .join("\n")
        )
    );
}

simnJSOP•5mo ago

It's "setSelectMenuOptions" not 'setSelectMenuOptionsperPage'

Swiizyy•5mo ago

Oh yes, sorry, I'm a little tired. 😅

simnJSOP•5mo ago

The command doesn't work with that I doesn't have logs nothing but it doesn't work

  private async menu(interaction: Command.ChatInputCommandInteraction) {
    this.commands = this.container.client.stores.get('commands');

    const paginatedMessage = new PaginatedMessage({
      template: new EmbedBuilder()
      .setDescription('Toutes ces commandes sont des commandes slash. Vous devez utiliser `/` pour les utiliser.\nPar exemple, `/ping`.')
      .setColor('#aad0fa'),
    });

    paginatedMessage.setSelectMenuOptions((pageIndex) => {
      const category = Array.from(commandsPerCategories.keys())[pageIndex];
      return {
        label: category,
        description: `View the commands in the ${category} category`,
      };
    });


    const commandsPerCategories = new Map<string, Command[]>();

    for (const [, command] of this.commands.entries()) {
      const categoryLowerCase = command.category?.toLowerCase();

      if (!categoryLowerCase || categoryLowerCase === 'system' || categoryLowerCase === 'owner' || categoryLowerCase === 'test') {
        continue;
      }

      const mapEntry = commandsPerCategories.get(command.category as string);
      if (mapEntry) {
        mapEntry.push(command);
        commandsPerCategories.set(command.category as string, mapEntry);
      } else {
        commandsPerCategories.set(command.category as string, [command]);
      }
    }


    for (const [category, commands] of commandsPerCategories.entries()) {
      paginatedMessage //
        .addPageEmbed((embed) =>
          embed //
            .setTitle(category)
            .setDescription(commands.map(command => `• ${inlineCodeBlock(command.name)} → ${command.description}`).join('\n')))
        
    }

    return paginatedMessage.run(interaction);
  }

  private async menu(interaction: Command.ChatInputCommandInteraction) {
    this.commands = this.container.client.stores.get('commands');

    const paginatedMessage = new PaginatedMessage({
      template: new EmbedBuilder()
      .setDescription('Toutes ces commandes sont des commandes slash. Vous devez utiliser `/` pour les utiliser.\nPar exemple, `/ping`.')
      .setColor('#aad0fa'),
    });

    paginatedMessage.setSelectMenuOptions((pageIndex) => {
      const category = Array.from(commandsPerCategories.keys())[pageIndex];
      return {
        label: category,
        description: `View the commands in the ${category} category`,
      };
    });


    const commandsPerCategories = new Map<string, Command[]>();

    for (const [, command] of this.commands.entries()) {
      const categoryLowerCase = command.category?.toLowerCase();

      if (!categoryLowerCase || categoryLowerCase === 'system' || categoryLowerCase === 'owner' || categoryLowerCase === 'test') {
        continue;
      }

      const mapEntry = commandsPerCategories.get(command.category as string);
      if (mapEntry) {
        mapEntry.push(command);
        commandsPerCategories.set(command.category as string, mapEntry);
      } else {
        commandsPerCategories.set(command.category as string, [command]);
      }
    }


    for (const [category, commands] of commandsPerCategories.entries()) {
      paginatedMessage //
        .addPageEmbed((embed) =>
          embed //
            .setTitle(category)
            .setDescription(commands.map(command => `• ${inlineCodeBlock(command.name)} → ${command.description}`).join('\n')))
        
    }

    return paginatedMessage.run(interaction);
  }

If i remove

    paginatedMessage.setSelectMenuOptions((pageIndex) => {
      const category = Array.from(commandsPerCategories.keys())[pageIndex];
      return {
        label: category,
        description: `View the commands in the ${category} category`,
      };
    });

    paginatedMessage.setSelectMenuOptions((pageIndex) => {
      const category = Array.from(commandsPerCategories.keys())[pageIndex];
      return {
        label: category,
        description: `View the commands in the ${category} category`,
      };
    });

it work correctly I tried to logs all of my value all is defined Oh I'm idiot it's fine

simnJSOP•5mo ago

it work now Thank you @Swiizyy for your help

Swiizyy•5mo ago

Pas de soucis mdr je viens de voir que tu est francais 😂

simnJSOP•5mo ago

Ahah super, tu l'as pas vu à mon anglais catastrophique ptdr Leur doc pour sapphire utilities est trop mal foutu impossible de trouver ca au premier coup d'oeuil

Swiizyy•5mo ago

j'ai le meme mdr vive le traducteur mdr c'est vrai qu'il faut chercher un peut mdr

simnJSOP•5mo ago

ptdr blagues-api je l'ai déja utilisé sur des projets c'est golri

Swiizyy•5mo ago

ouais c'est pas mal 🙂

simnJSOP•5mo ago

Et ce genre de message de refus c'est ou que ca se custom ?

Swiizyy•5mo ago

PaginatedMessage.wrongUserInteractionReply = (targetUser) => ({
          content: `These buttons are only for ${userMention(
              targetUser.id
          )}. Press them as much as you want, but I won't do anything with your clicks.`,
         ephemeral: true,
          allowedMentions: { users: [], roles: [] }
      });

PaginatedMessage.wrongUserInteractionReply = (targetUser) => ({
          content: `These buttons are only for ${userMention(
              targetUser.id
          )}. Press them as much as you want, but I won't do anything with your clicks.`,
         ephemeral: true,
          allowedMentions: { users: [], roles: [] }
      });

simnJSOP•5mo ago

ptdr tu viens de me faire découvrir "userMention" j'ai toujours fais <@id> c un peu pareil en vrai

Swiizyy•5mo ago

oui 😂

simnJSOP•5mo ago

J'dois etre malchanceux

simnJSOP•5mo ago

ca marche pas de mon côté

Swiizyy•5mo ago

@simnJS

simnJSOP•5mo ago

ahhhhhhhhhhhhhh

Swiizyy•5mo ago

Faut que tu setup sa avant que sa appelle client.login :/

simnJSOP•5mo ago

ok relou okay un peu

simnJSOP•5mo ago

j'ai trouver autre chose directement dans ton instance de paginatedMessage

Swiizyy•5mo ago

ah beh oui mdr bien vu mdr

simnJSOP•5mo ago

Bon bah super merci pour tout

simnJSOP•5mo ago

C'est mieux quand même

Swiizyy•5mo ago

Ah oui mdr

simnJSOP•5mo ago

Toi qui a pas mal utilisé sapphire, niveau performance ca marche bien ?

Swiizyy•5mo ago

oui ca marche vraiment bien

Gaming

Programming

Using sapphire paginator is it possible to customize the pages names ?

Did you find this page helpful?