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,
    AnySelectMenuInteraction,
    ButtonBuilder,
    ButtonInteraction,
    ButtonStyle,
    EmbedBuilder,
    Interaction,
    InteractionCollector,
    InteractionReplyOptions,
    InteractionType,
    Message,
    MessageEditOptions,
    MessageReplyOptions
} from "discord.js";
import * as uuid from "uuid";
import Client from "../core/Client";
import { log } from "./Logger";
import { getComponentEmojiResolvable } 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[] = [];
    protected metadata: Record<string, unknown>;

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

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

    getMetadata<T>(key: string) {
        return this.metadata[key] as T;
    }

    async getPaginatedData(page: number = 1) {
        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.max(Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit), 1)
        });
    }

    async getMessageOptions(
        page: number = 1,
        actionRowOptions: { first: boolean; last: boolean; next: boolean; back: boolean } | undefined = undefined,
        optionsToMerge: MessageOptions = {},
        interaction?: Interaction
    ) {
        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)
            });

        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),
            ...(this.options.extraActionRows
                ? (this.options.extraActionRows(interaction) as ActionRowBuilder<ButtonBuilder>[]) ?? []
                : []),
            ...options.components
        ];

        return options;
    }

    getEntryCount() {
        return this.maxPage;
    }

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

        const actionRow = new ActionRowBuilder<ButtonBuilder>();

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

        return actionRow;
    }

    async start(message: Message) {
        if (this.data?.length === 0) {
            return;
        }

        const collector = new InteractionCollector(this.client, {
            guild: this.options.guildId,
            channel: this.options.channelId,
            interactionType: InteractionType.MessageComponent,
            message,
            time: this.options.timeout ?? 60_000,
            filter: interaction => {
                if (interaction.inGuild() && (!this.options.userId || interaction.user.id === this.options.userId)) {
                    this.options.onInteraction?.(interaction);
                    return interaction.isButton() && interaction.customId.startsWith("pagination_");
                }

                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) => {
            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)) {
                if (this.currentPage >= maxPage && interaction.customId === `pagination_next_${this.id}`) {
                    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}`) {
                    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 ?? {})
                    },
                    interaction
                )
            );
        });

        collector.on("end", async () => {
            const [, ...components] = message.components!;

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

            this.options.onDisable?.(message);
        });
    }

    getCurrentPage() {
        return this.currentPage;
    }

    async update(interaction: AnySelectMenuInteraction | ButtonInteraction, metadata: Record<string, unknown> = {}) {
        this.metadata = { ...this.metadata, ...metadata };

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

        return interaction.update(
            await this.getMessageOptions(
                this.getCurrentPage(),
                { first: true, last: true, next: true, back: true },
                {
                    embeds: [],
                    ...(this.options.messageOptions ?? {})
                },
                interaction
            )
        );
    }

    extraActionRows(interaction: Interaction) {
        return this.options.extraActionRows?.(interaction) ?? [];
    }
}

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<true>;
    limit: number;
    guildId: string;
    channelId: string;
    userId?: string;
    timeout?: number;
    metadata?: Record<string, unknown>;
    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; custom?: boolean },
        id: string
    ) => ActionRowBuilder<ButtonBuilder>;
    onDisable?: (message: Message) => unknown;
    onInteraction?: (interaction: Interaction) => unknown;
    removeComponentsOnDisable?: boolean;
    extraActionRows?: (interaction?: Interaction) => ActionRowBuilder[];
}
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	AnySelectMenuInteraction,
23	ButtonBuilder,
24	ButtonInteraction,
25	ButtonStyle,
26	EmbedBuilder,
27	Interaction,
28	InteractionCollector,
29	InteractionReplyOptions,
30	InteractionType,
31	Message,
32	MessageEditOptions,
33	MessageReplyOptions
34	} from "discord.js";
35	import * as uuid from "uuid";
36	import Client from "../core/Client";
37	import { log } from "./Logger";
38	import { getComponentEmojiResolvable } from "./utils";
39
40	export default class Pagination<T> {
41	protected readonly id: string;
42	protected readonly client: Client<true>;
43	protected maxPage: number = 0;
44	protected currentPage: number = 1;
45	protected currentData: T[] = [];
46	protected metadata: Record<string, unknown>;
47
48	constructor(protected readonly data: Array<T> \| null = [], protected readonly options: PaginationOptions<T>) {
49	this.id = uuid.v4();
50	this.client = options.client;
51	this.metadata = this.options.metadata ?? {};
52	}
53
54	getOffset(page: number = 1) {
55	return (page - 1) * this.options.limit;
56	}
57
58	getMetadata<T>(key: string) {
59	return this.metadata[key] as T;
60	}
61
62	async getPaginatedData(page: number = 1) {
63	if (this.options.fetchData)
64	this.currentData = await this.options.fetchData({
65	currentPage: page,
66	limit: this.options.limit,
67	offset: this.getOffset(page)
68	});
69
70	return this.data ? this.data.slice(this.getOffset(page), this.getOffset(page) + this.options.limit) : this.currentData;
71	}
72
73	async getEmbed(page: number = 1): Promise<EmbedBuilder> {
74	const data = await this.getPaginatedData(page);
75
76	return this.options.embedBuilder({
77	data: this.data ? data : this.currentData,
78	currentPage: this.currentPage,
79	maxPages: Math.max(Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit), 1)
80	});
81	}
82
83	async getMessageOptions(
84	page: number = 1,
85	actionRowOptions: { first: boolean; last: boolean; next: boolean; back: boolean } \| undefined = undefined,
86	optionsToMerge: MessageOptions = {},
87	interaction?: Interaction
88	) {
89	const options = { ...this.options.messageOptions, ...optionsToMerge };
90	const actionRowOptionsDup = actionRowOptions
91	? { ...actionRowOptions }
92	: { first: true, last: true, next: true, back: true };
93
94	if (this.options.maxData && this.maxPage === 0)
95	this.maxPage = await this.options.maxData({
96	currentPage: page,
97	limit: this.options.limit,
98	offset: this.getOffset(page)
99	});
100
101	if (actionRowOptionsDup && page <= 1) {
102	actionRowOptionsDup.back = false;
103	actionRowOptionsDup.first = false;
104	}
105
106	if (actionRowOptionsDup && page >= Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit)) {
107	actionRowOptionsDup.last = false;
108	actionRowOptionsDup.next = false;
109	}
110
111	options.embeds ??= [];
112	options.embeds.push(await this.getEmbed(page));
113
114	options.components ??= [];
115	options.components = [
116	this.getActionRow(actionRowOptionsDup),
117	...(this.options.extraActionRows
118	? (this.options.extraActionRows(interaction) as ActionRowBuilder<ButtonBuilder>[]) ?? []
119	: []),
120	...options.components
121	];
122
123	return options;
124	}
125
126	getEntryCount() {
127	return this.maxPage;
128	}
129
130	getActionRow(
131	{ first, last, next, back, custom }: { first: boolean; last: boolean; next: boolean; back: boolean; custom?: boolean } = {
132	first: true,
133	last: true,
134	next: true,
135	back: true,
136	custom: true
137	}
138	) {
139	if (this.options.actionRowBuilder) {
140	return this.options.actionRowBuilder({ first, last, next, back, custom }, this.id);
141	}
142
143	const actionRow = new ActionRowBuilder<ButtonBuilder>();
144
145	actionRow.addComponents(
146	new ButtonBuilder()
147	.setCustomId(`pagination_first_${this.id}`)
148	.setStyle(ButtonStyle.Secondary)
149	.setDisabled(!first)
150	.setEmoji(getComponentEmojiResolvable(this.client, "ArrowLeft") ?? "⏮️"),
151	new ButtonBuilder()
152	.setCustomId(`pagination_back_${this.id}`)
153	.setStyle(ButtonStyle.Secondary)
154	.setDisabled(!back)
155	.setEmoji(getComponentEmojiResolvable(this.client, "ChevronLeft") ?? "◀️"),
156	new ButtonBuilder()
157	.setCustomId(`pagination_next_${this.id}`)
158	.setStyle(ButtonStyle.Secondary)
159	.setDisabled(!next)
160	.setEmoji(getComponentEmojiResolvable(this.client, "ChevronRight") ?? "▶️"),
161	new ButtonBuilder()
162	.setCustomId(`pagination_last_${this.id}`)
163	.setStyle(ButtonStyle.Secondary)
164	.setDisabled(!last)
165	.setEmoji(getComponentEmojiResolvable(this.client, "ArrowRight") ?? "⏭️")
166	);
167
168	return actionRow;
169	}
170
171	async start(message: Message) {
172	if (this.data?.length === 0) {
173	return;
174	}
175
176	const collector = new InteractionCollector(this.client, {
177	guild: this.options.guildId,
178	channel: this.options.channelId,
179	interactionType: InteractionType.MessageComponent,
180	message,
181	time: this.options.timeout ?? 60_000,
182	filter: interaction => {
183	if (interaction.inGuild() && (!this.options.userId \|\| interaction.user.id === this.options.userId)) {
184	this.options.onInteraction?.(interaction);
185	return interaction.isButton() && interaction.customId.startsWith("pagination_");
186	}
187
188	if (interaction.isRepliable()) {
189	interaction.reply({
190	content: "That's not under your control or the button controls are expired",
191	ephemeral: true
192	});
193	}
194
195	return false;
196	}
197	});
198
199	collector.on("collect", async (interaction: ButtonInteraction) => {
200	if (!interaction.customId.endsWith(this.id)) {
201	return;
202	}
203
204	const maxPage = Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit);
205	const componentOptions = { first: true, last: true, next: true, back: true };
206
207	if ([`pagination_next_${this.id}`, `pagination_back_${this.id}`].includes(interaction.customId)) {
208	if (this.currentPage >= maxPage && interaction.customId === `pagination_next_${this.id}`) {
209	await interaction.reply({
210	content: maxPage === 1 ? "This is the only page!" : "You've reached the last page!",
211	ephemeral: true
212	});
213
214	return;
215	}
216
217	if (this.currentPage <= 1 && interaction.customId === `pagination_back_${this.id}`) {
218	await interaction.reply({
219	content: maxPage === 1 ? "This is the only page!" : "You're in the very first page!",
220	ephemeral: true
221	});
222
223	return;
224	}
225	}
226
227	if (interaction.customId === `pagination_first_${this.id}`) this.currentPage = 1;
228	else if (interaction.customId === `pagination_last_${this.id}`) this.currentPage = maxPage;
229
230	await interaction.update(
231	await this.getMessageOptions(
232	interaction.customId === `pagination_first_${this.id}`
233	? 1
234	: interaction.customId === `pagination_last_${this.id}`
235	? maxPage
236	: interaction.customId === `pagination_next_${this.id}`
237	? this.currentPage >= maxPage
238	? this.currentPage
239	: ++this.currentPage
240	: --this.currentPage,
241	componentOptions,
242	{
243	embeds: [],
244	...(this.options.messageOptions ?? {})
245	},
246	interaction
247	)
248	);
249	});
250
251	collector.on("end", async () => {
252	const [, ...components] = message.components!;
253
254	try {
255	await message.edit({
256	components: this.options.removeComponentsOnDisable
257	? []
258	: [
259	this.getActionRow({
260	back: false,
261	first: false,
262	last: false,
263	next: false,
264	custom: false
265	}),
266	...components
267	]
268	});
269	} catch (e) {
270	log(e);
271	}
272
273	this.options.onDisable?.(message);
274	});
275	}
276
277	getCurrentPage() {
278	return this.currentPage;
279	}
280
281	async update(interaction: AnySelectMenuInteraction \| ButtonInteraction, metadata: Record<string, unknown> = {}) {
282	this.metadata = { ...this.metadata, ...metadata };
283
284	if (this.options.maxData) {
285	this.maxPage = await this.options.maxData({
286	currentPage: this.currentPage,
287	limit: this.options.limit,
288	offset: this.getOffset(this.currentPage)
289	});
290	}
291
292	return interaction.update(
293	await this.getMessageOptions(
294	this.getCurrentPage(),
295	{ first: true, last: true, next: true, back: true },
296	{
297	embeds: [],
298	...(this.options.messageOptions ?? {})
299	},
300	interaction
301	)
302	);
303	}
304
305	extraActionRows(interaction: Interaction) {
306	return this.options.extraActionRows?.(interaction) ?? [];
307	}
308	}
309
310	export interface EmbedBuilderOptions<T> {
311	data: Array<T>;
312	currentPage: number;
313	maxPages: number;
314	}
315
316	export interface FetchDataOption {
317	currentPage: number;
318	offset: number;
319	limit: number;
320	}
321
322	export type MessageOptions = MessageReplyOptions & InteractionReplyOptions & MessageEditOptions;
323
324	export interface PaginationOptions<T> {
325	client: Client<true>;
326	limit: number;
327	guildId: string;
328	channelId: string;
329	userId?: string;
330	timeout?: number;
331	metadata?: Record<string, unknown>;
332	maxData?: (options: FetchDataOption) => Promise<number>;
333	fetchData?: (options: FetchDataOption) => Promise<T[]>;
334	messageOptions?: MessageOptions;
335	embedBuilder: (options: EmbedBuilderOptions<T>) => EmbedBuilder;
336	actionRowBuilder?: (
337	options: { first: boolean; last: boolean; next: boolean; back: boolean; custom?: boolean },
338	id: string
339	) => ActionRowBuilder<ButtonBuilder>;
340	onDisable?: (message: Message) => unknown;
341	onInteraction?: (interaction: Interaction) => unknown;
342	removeComponentsOnDisable?: boolean;
343	extraActionRows?: (interaction?: Interaction) => ActionRowBuilder[];
344	}