Ir para o conteúdo principal

Paginação

Paginação é uma técnica útil empregada nas interfaces do usuário para apresentar grandes quantidades de informações de forma estruturada e controlável. Ao lidar com volumes substanciais de dados, como resultados de busca, artigos ou listagens de produtos, apresentá-lo tudo de uma vez pode sobrecarregar usuários e levar a uma experiência de usuário ruim. A paginação permite dividir as informações em partes menores, organizadas, melhorando o envolvimento dos usuários e a facilidade de navegação. Esse modulo permite que você crie uma paginação com algumas linhas de código.

Instalação​

$ npm i @necord/pagination necord discord.js

Utilização​

Uma vez que o processo de instalação estiver concluído, nós podemos importar o NecordPaginationModule com o seu NecordModule para a raiz AppModule:

import { NecordModule } from 'necord';
import { Module } from '@nestjs/common';
import { NecordPaginationModule } from '@necord/pagination';
import { GatewayIntentBits } from 'discord.js';
import { AppService } from './app.service';

@Module({
    imports: [
        NecordModule.forRoot({
            token: 'DISCORD_BOT_TOKEN',
            intents: [
                GatewayIntentBits.Guilds,
                GatewayIntentBits.GuildMessages,
                GatewayIntentBits.DirectMessages
            ]
        }),
        NecordPaginationModule.forRoot({
            // Change your buttons appearance
            buttons: {},
            // Add buttons for skip to first and last page
            allowSkip: true,
            // Add buttons for search page
            allowTraversal: true,
            // Define the buttons position (start / end)
            buttonsPosition: "end"
        })
    ],
    providers: [AppService]
})
export class AppModule {}

Então, podemos injetar o PaginationService em nosso serviço e registrar um manipulador de paginação:

import { OnModuleInit, Injectable } from '@nestjs/common';
import { NecordPaginationService, PageBuilder } from '@necord/pagination';
import { Context, SlashCommand, SlashCommandContext } from 'necord';

@Injectable()
export class AppService implements OnModuleInit {
    public constructor(private readonly paginationService: NecordPaginationService) {
    }

    public onModuleInit(): void {
        this.paginationService.register(builder =>
            builder
                // Required, need for search your builder
                .setCustomId('test')
                // First way to set pages
                .setPages([
                    new PageBuilder().setContent('Page 1'),
                    new PageBuilder().setContent('Page 2'),
                    new PageBuilder().setContent('Page 3'),
                    new PageBuilder().setContent('Page 4'),
                    new PageBuilder().setContent('Page 5')
                ])
                // Second way, you can manually set pages using `setPages` method
                .setPagesFactory(page => new PageBuilder().setContent(`Page ${page}`))
                // Optional, only if you want to use pages factory
                .setMaxPages(5)
        );
    }

    @SlashCommand({ name: 'pagination', description: 'Test pagination' })
    public async onPagination(@Context() [interaction]: SlashCommandContext): Promise<void> {
        const pagination = this.paginationService.get('test');
        const page = await pagination.build();

        await interaction.reply(page);
    }
}

Parabéns! Você criou com sucesso sua primeira paginação! Apenas use o comando paginacao e você verá sua paginação!

Registering Pagination Inside Command​

You can also register pagination's dynamically inside your command handlers instead of onModuleInit hook.

import { Injectable } from "@nestjs/common";
import { NecordPaginationService, PageBuilder } from "@necord/pagination";
import { Context, SlashCommand, SlashCommandContext } from "necord";

@Injectable()
export class AppService {
    public constructor(private readonly paginationService: NecordPaginationService) {
    }

    @SlashCommand({ name: "dynamic-pagination", description: "Register pagination inside command" })
    public async onDynamicPagination(
        @Context() [interaction]: SlashCommandContext
    ): Promise<void> {
        const pagination = this.paginationService.create(builder =>
            builder
                .setCustomId(`dynamic-${interaction.user.id}`)
                .setFilter(i => i.user.id === interaction.user.id)
                .setPages([
                    new PageBuilder().setContent("Dynamic Page 1"),
                    new PageBuilder().setContent("Dynamic Page 2")
                ])
        );
        const page = await pagination.build();

        await interaction.reply(page);
    }
}
warning

You should ensure that setCustomId is unique per user/session if you register dynamically to avoid collisions.

Você pode ver um exemplo funcional aqui.