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 { 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[] = [];

    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) {
        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 = {}
    ) {
        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), ...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(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,
            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) => {
            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 ?? {})
                    }
                )
            );
        });

        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<true>;
    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 { getComponentEmojiResolvable } 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	if (this.options.fetchData)
57	this.currentData = await this.options.fetchData({
58	currentPage: page,
59	limit: this.options.limit,
60	offset: this.getOffset(page)
61	});
62
63	return this.data ? this.data.slice(this.getOffset(page), this.getOffset(page) + this.options.limit) : this.currentData;
64	}
65
66	async getEmbed(page: number = 1): Promise<EmbedBuilder> {
67	const data = await this.getPaginatedData(page);
68
69	return this.options.embedBuilder({
70	data: this.data ? data : this.currentData,
71	currentPage: this.currentPage,
72	maxPages: Math.max(Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit), 1)
73	});
74	}
75
76	async getMessageOptions(
77	page: number = 1,
78	actionRowOptions: { first: boolean; last: boolean; next: boolean; back: boolean } \| undefined = undefined,
79	optionsToMerge: MessageOptions = {}
80	) {
81	const options = { ...this.options.messageOptions, ...optionsToMerge };
82	const actionRowOptionsDup = actionRowOptions
83	? { ...actionRowOptions }
84	: { first: true, last: true, next: true, back: true };
85
86	if (this.options.maxData && this.maxPage === 0)
87	this.maxPage = await this.options.maxData({
88	currentPage: page,
89	limit: this.options.limit,
90	offset: this.getOffset(page)
91	});
92
93	if (actionRowOptionsDup && page <= 1) {
94	actionRowOptionsDup.back = false;
95	actionRowOptionsDup.first = false;
96	}
97
98	if (actionRowOptionsDup && page >= Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit)) {
99	actionRowOptionsDup.last = false;
100	actionRowOptionsDup.next = false;
101	}
102
103	options.embeds ??= [];
104	options.embeds.push(await this.getEmbed(page));
105
106	options.components ??= [];
107	options.components = [this.getActionRow(actionRowOptionsDup), ...options.components];
108
109	return options;
110	}
111
112	getActionRow(
113	{ first, last, next, back }: { first: boolean; last: boolean; next: boolean; back: boolean } = {
114	first: true,
115	last: true,
116	next: true,
117	back: true
118	}
119	) {
120	if (this.options.actionRowBuilder) {
121	return this.options.actionRowBuilder({ first, last, next, back }, this.id);
122	}
123
124	const actionRow = new ActionRowBuilder<ButtonBuilder>();
125
126	actionRow.addComponents(
127	new ButtonBuilder()
128	.setCustomId(`pagination_first_${this.id}`)
129	.setStyle(ButtonStyle.Secondary)
130	.setDisabled(!first)
131	.setEmoji(getComponentEmojiResolvable(this.client, "ArrowLeft") ?? "⏮️"),
132	new ButtonBuilder()
133	.setCustomId(`pagination_back_${this.id}`)
134	.setStyle(ButtonStyle.Secondary)
135	.setDisabled(!back)
136	.setEmoji(getComponentEmojiResolvable(this.client, "ChevronLeft") ?? "◀️"),
137	new ButtonBuilder()
138	.setCustomId(`pagination_next_${this.id}`)
139	.setStyle(ButtonStyle.Secondary)
140	.setDisabled(!next)
141	.setEmoji(getComponentEmojiResolvable(this.client, "ChevronRight") ?? "▶️"),
142	new ButtonBuilder()
143	.setCustomId(`pagination_last_${this.id}`)
144	.setStyle(ButtonStyle.Secondary)
145	.setDisabled(!last)
146	.setEmoji(getComponentEmojiResolvable(this.client, "ArrowRight") ?? "⏭️")
147	);
148
149	return actionRow;
150	}
151
152	async start(message: Message) {
153	if (this.data?.length === 0) {
154	return;
155	}
156
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	if (!interaction.customId.endsWith(this.id)) {
182	return;
183	}
184
185	const maxPage = Math.ceil((this.data?.length ?? this.maxPage) / this.options.limit);
186	const componentOptions = { first: true, last: true, next: true, back: true };
187
188	if ([`pagination_next_${this.id}`, `pagination_back_${this.id}`].includes(interaction.customId)) {
189	if (this.currentPage >= maxPage && interaction.customId === `pagination_next_${this.id}`) {
190	await interaction.reply({
191	content: maxPage === 1 ? "This is the only page!" : "You've reached the last page!",
192	ephemeral: true
193	});
194
195	return;
196	}
197
198	if (this.currentPage <= 1 && interaction.customId === `pagination_back_${this.id}`) {
199	await interaction.reply({
200	content: maxPage === 1 ? "This is the only page!" : "You're in the very first page!",
201	ephemeral: true
202	});
203
204	return;
205	}
206	}
207
208	if (interaction.customId === `pagination_first_${this.id}`) this.currentPage = 1;
209	else if (interaction.customId === `pagination_last_${this.id}`) this.currentPage = maxPage;
210
211	await interaction.update(
212	await this.getMessageOptions(
213	interaction.customId === `pagination_first_${this.id}`
214	? 1
215	: interaction.customId === `pagination_last_${this.id}`
216	? maxPage
217	: interaction.customId === `pagination_next_${this.id}`
218	? this.currentPage >= maxPage
219	? this.currentPage
220	: ++this.currentPage
221	: --this.currentPage,
222	componentOptions,
223	{
224	embeds: [],
225	...(this.options.messageOptions ?? {})
226	}
227	)
228	);
229	});
230
231	collector.on("end", async () => {
232	const [, ...components] = message.components!; // this.getActionRow({ first: false, last: false, next: false, back: false })
233
234	try {
235	await message.edit({
236	components: [
237	this.getActionRow({
238	back: false,
239	first: false,
240	last: false,
241	next: false
242	}),
243	...components
244	]
245	});
246	} catch (e) {
247	log(e);
248	}
249	});
250	}
251	}
252
253	export interface EmbedBuilderOptions<T> {
254	data: Array<T>;
255	currentPage: number;
256	maxPages: number;
257	}
258
259	export interface FetchDataOption {
260	currentPage: number;
261	offset: number;
262	limit: number;
263	}
264
265	export type MessageOptions = MessageReplyOptions & InteractionReplyOptions & MessageEditOptions;
266
267	export interface PaginationOptions<T> {
268	client: Client<true>;
269	limit: number;
270	guildId: string;
271	channelId: string;
272	userId?: string;
273	timeout?: number;
274	maxData?: (options: FetchDataOption) => Promise<number>;
275	fetchData?: (options: FetchDataOption) => Promise<T[]>;
276	messageOptions?: MessageOptions;
277	embedBuilder: (options: EmbedBuilderOptions<T>) => EmbedBuilder;
278	actionRowBuilder?: (
279	options: { first: boolean; last: boolean; next: boolean; back: boolean },
280	id: string
281	) => ActionRowBuilder<ButtonBuilder>;
282	}