src/utils/Pagination.ts

/*
 * This file is part of SudoBot.
 *
 * Copyright (C) 2021-2023 OSN Developers.
 *
 * SudoBot is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * SudoBot is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with SudoBot. If not, see <https://www.gnu.org/licenses/>.
 */

import {
    ActionRowBuilder,
    ButtonBuilder,
    ButtonInteraction,
    ButtonStyle,
    ComponentType,
    EmbedBuilder,
    InteractionCollector,
    InteractionReplyOptions,
    InteractionType,
    Message,
    MessageEditOptions,
    MessageReplyOptions
} from "discord.js";
import * as uuid from "uuid";
import Client from "../core/Client";
import { log } from "./logger";
import { getEmoji } from "./utils";

export default class Pagination<T> {
    protected readonly id: string;
    protected readonly client: Client<true>;
    protected maxPage: number = 0;
    protected currentPage: number = 1;
    protected currentData: T[] = [];

    constructor(protected readonly data: Array<T> | null = [], protected readonly options: PaginationOptions<T>) {
        this.id = uuid.v4();
        this.client = options.client;
    }

    getOffset(page: number = 1) {
        return (page - 1) * this.options.limit;
    }

    async getPaginatedData(page: number = 1) {
        log(page, this.getOffset(page));

        if (this.options.fetchData)
            this.currentData = await this.options.fetchData({
                currentPage: page,
                limit: this.options.limit,
                offset: this.getOffset(page)
            });

        return this.data ? this.data.slice(this.getOffset(page), this.getOffset(page) + this.options.limit) : this.currentData;
    }

    async getEmbed(page: number = 1): Promise<EmbedBuilder> {
        const data = await this.getPaginatedData(page);

        return this.options.embedBuilder({
            data: this.data ? data : this.currentData,
            currentPage: this.currentPage,
            maxPages: Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit)
        });
    }

    async getMessageOptions(
        page: number = 1,
        actionRowOptions: { first: boolean; last: boolean; next: boolean; back: boolean } | undefined = undefined,
        optionsToMerge: MessageOptions = {}
    ) {
        const options = { ...this.options.messageOptions, ...optionsToMerge };
        const actionRowOptionsDup = actionRowOptions
            ? { ...actionRowOptions }
            : { first: true, last: true, next: true, back: true };

        if (this.options.maxData && this.maxPage === 0)
            this.maxPage = await this.options.maxData({
                currentPage: page,
                limit: this.options.limit,
                offset: this.getOffset(page)
            });

        log("Max Page", this.maxPage);

        if (actionRowOptionsDup && page <= 1) {
            actionRowOptionsDup.back = false;
            actionRowOptionsDup.first = false;
        }

        if (actionRowOptionsDup && page >= Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit)) {
            actionRowOptionsDup.last = false;
            actionRowOptionsDup.next = false;
        }

        options.embeds ??= [];
        options.embeds.push(await this.getEmbed(page));

        options.components ??= [];
        options.components = [this.getActionRow(actionRowOptionsDup), ...options.components];

        return options;
    }

    getActionRow(
        { first, last, next, back }: { first: boolean; last: boolean; next: boolean; back: boolean } = {
            first: true,
            last: true,
            next: true,
            back: true
        }
    ) {
        if (this.options.actionRowBuilder) {
            return this.options.actionRowBuilder({ first, last, next, back }, this.id);
        }

        const actionRow = new ActionRowBuilder<ButtonBuilder>();

        actionRow.addComponents(
            new ButtonBuilder()
                .setCustomId(`pagination_first_${this.id}`)
                .setStyle(ButtonStyle.Secondary)
                .setDisabled(!first)
                .setEmoji(getEmoji(this.client, "ArrowLeft") ?? "⏮️"),
            new ButtonBuilder()
                .setCustomId(`pagination_back_${this.id}`)
                .setStyle(ButtonStyle.Secondary)
                .setDisabled(!back)
                .setEmoji(getEmoji(this.client, "ChevronLeft") ?? "◀️"),
            new ButtonBuilder()
                .setCustomId(`pagination_next_${this.id}`)
                .setStyle(ButtonStyle.Secondary)
                .setDisabled(!next)
                .setEmoji(getEmoji(this.client, "ChevronRight") ?? "▶️"),
            new ButtonBuilder()
                .setCustomId(`pagination_last_${this.id}`)
                .setStyle(ButtonStyle.Secondary)
                .setDisabled(!last)
                .setEmoji(getEmoji(this.client, "ArrowRight") ?? "⏭️")
        );

        return actionRow;
    }

    async start(message: Message) {
        const collector = new InteractionCollector(this.client, {
            guild: this.options.guildId,
            channel: this.options.channelId,
            interactionType: InteractionType.MessageComponent,
            componentType: ComponentType.Button,
            message,
            time: this.options.timeout ?? 60_000,
            filter: interaction => {
                if (interaction.inGuild() && (!this.options.userId || interaction.user.id === this.options.userId)) {
                    return true;
                }

                if (interaction.isRepliable()) {
                    interaction.reply({
                        content: "That's not under your control or the button controls are expired",
                        ephemeral: true
                    });
                }

                return false;
            }
        });

        collector.on("collect", async (interaction: ButtonInteraction) => {
            log("Here 2");
            if (!interaction.customId.endsWith(this.id)) {
                return;
            }

            const maxPage = Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit);
            const componentOptions = { first: true, last: true, next: true, back: true };

            if ([`pagination_next_${this.id}`, `pagination_back_${this.id}`].includes(interaction.customId)) {
                log("here");

                if (this.currentPage >= maxPage && interaction.customId === `pagination_next_${this.id}`) {
                    log("here");
                    await interaction.reply({
                        content: maxPage === 1 ? "This is the only page!" : "You've reached the last page!",
                        ephemeral: true
                    });
                    return;
                }

                if (this.currentPage <= 1 && interaction.customId === `pagination_back_${this.id}`) {
                    log("here");
                    await interaction.reply({
                        content: maxPage === 1 ? "This is the only page!" : "You're in the very first page!",
                        ephemeral: true
                    });
                    return;
                }
            }

            if (interaction.customId === `pagination_first_${this.id}`) this.currentPage = 1;
            else if (interaction.customId === `pagination_last_${this.id}`) this.currentPage = maxPage;

            await interaction.update(
                await this.getMessageOptions(
                    interaction.customId === `pagination_first_${this.id}`
                        ? 1
                        : interaction.customId === `pagination_last_${this.id}`
                        ? maxPage
                        : interaction.customId === `pagination_next_${this.id}`
                        ? this.currentPage >= maxPage
                            ? this.currentPage
                            : ++this.currentPage
                        : --this.currentPage,
                    componentOptions,
                    {
                        embeds: [],
                        ...(this.options.messageOptions ?? {})
                    }
                )
            );
        });

        collector.on("end", async () => {
            const [, ...components] = message.components!; // this.getActionRow({ first: false, last: false, next: false, back: false })

            try {
                await message.edit({
                    components: [
                        this.getActionRow({
                            back: false,
                            first: false,
                            last: false,
                            next: false
                        }),
                        ...components
                    ]
                });
            } catch (e) {
                log(e);
            }
        });
    }
}

export interface EmbedBuilderOptions<T> {
    data: Array<T>;
    currentPage: number;
    maxPages: number;
}

export interface FetchDataOption {
    currentPage: number;
    offset: number;
    limit: number;
}

export type MessageOptions = MessageReplyOptions & InteractionReplyOptions & MessageEditOptions;

export interface PaginationOptions<T> {
    client: Client;
    limit: number;
    guildId: string;
    channelId: string;
    userId?: string;
    timeout?: number;
    maxData?: (options: FetchDataOption) => Promise<number>;
    fetchData?: (options: FetchDataOption) => Promise<T[]>;
    messageOptions?: MessageOptions;
    embedBuilder: (options: EmbedBuilderOptions<T>) => EmbedBuilder;
    actionRowBuilder?: (
        options: { first: boolean; last: boolean; next: boolean; back: boolean },
        id: string
    ) => ActionRowBuilder<ButtonBuilder>;
}
1	rakinar2	577	/*
2			* This file is part of SudoBot.
3			*
4			* Copyright (C) 2021-2023 OSN Developers.
5			*
6			* SudoBot is free software; you can redistribute it and/or modify it
7			* under the terms of the GNU Affero General Public License as published by
8			* the Free Software Foundation, either version 3 of the License, or
9			* (at your option) any later version.
10			*
11			* SudoBot is distributed in the hope that it will be useful, but
12			* WITHOUT ANY WARRANTY; without even the implied warranty of
13			* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14			* GNU Affero General Public License for more details.
15			*
16			* You should have received a copy of the GNU Affero General Public License
17			* along with SudoBot. If not, see <https://www.gnu.org/licenses/>.
18			*/
19
20			import {
21			ActionRowBuilder,
22			ButtonBuilder,
23			ButtonInteraction,
24			ButtonStyle,
25			ComponentType,
26			EmbedBuilder,
27			InteractionCollector,
28			InteractionReplyOptions,
29			InteractionType,
30			Message,
31			MessageEditOptions,
32			MessageReplyOptions
33			} from "discord.js";
34			import * as uuid from "uuid";
35			import Client from "../core/Client";
36			import { log } from "./logger";
37			import { getEmoji } from "./utils";
38
39			export default class Pagination<T> {
40			protected readonly id: string;
41			protected readonly client: Client<true>;
42			protected maxPage: number = 0;
43			protected currentPage: number = 1;
44			protected currentData: T[] = [];
45
46			constructor(protected readonly data: Array<T> \| null = [], protected readonly options: PaginationOptions<T>) {
47			this.id = uuid.v4();
48			this.client = options.client;
49			}
50
51			getOffset(page: number = 1) {
52			return (page - 1) * this.options.limit;
53			}
54
55			async getPaginatedData(page: number = 1) {
56			log(page, this.getOffset(page));
57
58			if (this.options.fetchData)
59			this.currentData = await this.options.fetchData({
60			currentPage: page,
61			limit: this.options.limit,
62			offset: this.getOffset(page)
63			});
64
65			return this.data ? this.data.slice(this.getOffset(page), this.getOffset(page) + this.options.limit) : this.currentData;
66			}
67
68			async getEmbed(page: number = 1): Promise<EmbedBuilder> {
69			const data = await this.getPaginatedData(page);
70
71			return this.options.embedBuilder({
72			data: this.data ? data : this.currentData,
73			currentPage: this.currentPage,
74			maxPages: Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit)
75			});
76			}
77
78			async getMessageOptions(
79			page: number = 1,
80			actionRowOptions: { first: boolean; last: boolean; next: boolean; back: boolean } \| undefined = undefined,
81			optionsToMerge: MessageOptions = {}
82			) {
83			const options = { ...this.options.messageOptions, ...optionsToMerge };
84			const actionRowOptionsDup = actionRowOptions
85			? { ...actionRowOptions }
86			: { first: true, last: true, next: true, back: true };
87
88			if (this.options.maxData && this.maxPage === 0)
89			this.maxPage = await this.options.maxData({
90			currentPage: page,
91			limit: this.options.limit,
92			offset: this.getOffset(page)
93			});
94
95			log("Max Page", this.maxPage);
96
97			if (actionRowOptionsDup && page <= 1) {
98			actionRowOptionsDup.back = false;
99			actionRowOptionsDup.first = false;
100			}
101
102			if (actionRowOptionsDup && page >= Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit)) {
103			actionRowOptionsDup.last = false;
104			actionRowOptionsDup.next = false;
105			}
106
107			options.embeds ??= [];
108			options.embeds.push(await this.getEmbed(page));
109
110			options.components ??= [];
111			options.components = [this.getActionRow(actionRowOptionsDup), ...options.components];
112
113			return options;
114			}
115
116			getActionRow(
117			{ first, last, next, back }: { first: boolean; last: boolean; next: boolean; back: boolean } = {
118			first: true,
119			last: true,
120			next: true,
121			back: true
122			}
123			) {
124			if (this.options.actionRowBuilder) {
125			return this.options.actionRowBuilder({ first, last, next, back }, this.id);
126			}
127
128			const actionRow = new ActionRowBuilder<ButtonBuilder>();
129
130			actionRow.addComponents(
131			new ButtonBuilder()
132			.setCustomId(`pagination_first_${this.id}`)
133			.setStyle(ButtonStyle.Secondary)
134			.setDisabled(!first)
135			.setEmoji(getEmoji(this.client, "ArrowLeft") ?? "⏮️"),
136			new ButtonBuilder()
137			.setCustomId(`pagination_back_${this.id}`)
138			.setStyle(ButtonStyle.Secondary)
139			.setDisabled(!back)
140			.setEmoji(getEmoji(this.client, "ChevronLeft") ?? "◀️"),
141			new ButtonBuilder()
142			.setCustomId(`pagination_next_${this.id}`)
143			.setStyle(ButtonStyle.Secondary)
144			.setDisabled(!next)
145			.setEmoji(getEmoji(this.client, "ChevronRight") ?? "▶️"),
146			new ButtonBuilder()
147			.setCustomId(`pagination_last_${this.id}`)
148			.setStyle(ButtonStyle.Secondary)
149			.setDisabled(!last)
150			.setEmoji(getEmoji(this.client, "ArrowRight") ?? "⏭️")
151			);
152
153			return actionRow;
154			}
155
156			async start(message: Message) {
157			const collector = new InteractionCollector(this.client, {
158			guild: this.options.guildId,
159			channel: this.options.channelId,
160			interactionType: InteractionType.MessageComponent,
161			componentType: ComponentType.Button,
162			message,
163			time: this.options.timeout ?? 60_000,
164			filter: interaction => {
165			if (interaction.inGuild() && (!this.options.userId \|\| interaction.user.id === this.options.userId)) {
166			return true;
167			}
168
169			if (interaction.isRepliable()) {
170			interaction.reply({
171			content: "That's not under your control or the button controls are expired",
172			ephemeral: true
173			});
174			}
175
176			return false;
177			}
178			});
179
180			collector.on("collect", async (interaction: ButtonInteraction) => {
181			log("Here 2");
182			if (!interaction.customId.endsWith(this.id)) {
183			return;
184			}
185
186			const maxPage = Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit);
187			const componentOptions = { first: true, last: true, next: true, back: true };
188
189			if ([`pagination_next_${this.id}`, `pagination_back_${this.id}`].includes(interaction.customId)) {
190			log("here");
191
192			if (this.currentPage >= maxPage && interaction.customId === `pagination_next_${this.id}`) {
193			log("here");
194			await interaction.reply({
195			content: maxPage === 1 ? "This is the only page!" : "You've reached the last page!",
196			ephemeral: true
197			});
198			return;
199			}
200
201			if (this.currentPage <= 1 && interaction.customId === `pagination_back_${this.id}`) {
202			log("here");
203			await interaction.reply({
204			content: maxPage === 1 ? "This is the only page!" : "You're in the very first page!",
205			ephemeral: true
206			});
207			return;
208			}
209			}
210
211			if (interaction.customId === `pagination_first_${this.id}`) this.currentPage = 1;
212			else if (interaction.customId === `pagination_last_${this.id}`) this.currentPage = maxPage;
213
214			await interaction.update(
215			await this.getMessageOptions(
216			interaction.customId === `pagination_first_${this.id}`
217			? 1
218			: interaction.customId === `pagination_last_${this.id}`
219			? maxPage
220			: interaction.customId === `pagination_next_${this.id}`
221			? this.currentPage >= maxPage
222			? this.currentPage
223			: ++this.currentPage
224			: --this.currentPage,
225			componentOptions,
226			{
227			embeds: [],
228			...(this.options.messageOptions ?? {})
229			}
230			)
231			);
232			});
233
234			collector.on("end", async () => {
235			const [, ...components] = message.components!; // this.getActionRow({ first: false, last: false, next: false, back: false })
236
237			try {
238			await message.edit({
239			components: [
240			this.getActionRow({
241			back: false,
242			first: false,
243			last: false,
244			next: false
245			}),
246			...components
247			]
248			});
249			} catch (e) {
250			log(e);
251			}
252			});
253			}
254			}
255
256			export interface EmbedBuilderOptions<T> {
257			data: Array<T>;
258			currentPage: number;
259			maxPages: number;
260			}
261
262			export interface FetchDataOption {
263			currentPage: number;
264			offset: number;
265			limit: number;
266			}
267
268			export type MessageOptions = MessageReplyOptions & InteractionReplyOptions & MessageEditOptions;
269
270			export interface PaginationOptions<T> {
271			client: Client;
272			limit: number;
273			guildId: string;
274			channelId: string;
275			userId?: string;
276			timeout?: number;
277			maxData?: (options: FetchDataOption) => Promise<number>;
278			fetchData?: (options: FetchDataOption) => Promise<T[]>;
279			messageOptions?: MessageOptions;
280			embedBuilder: (options: EmbedBuilderOptions<T>) => EmbedBuilder;
281			actionRowBuilder?: (
282			options: { first: boolean; last: boolean; next: boolean; back: boolean },
283			id: string
284			) => ActionRowBuilder<ButtonBuilder>;
285			}