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	/*
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	}