feat: use Paginator to split rep history

Author: Josh-Cena

src/modules/rep.ts

@@ -11,6 +11,7 @@ import { TS_BLUE } from '../env';
 
 import { RepGive } from '../entities/RepGive';
 import { RepUser } from '../entities/RepUser';
+import { Paginator } from '../util/Paginator';
 
 export class RepModule extends Module {
 	constructor(client: CookiecordClient) {
@@ -125,35 +126,43 @@ export class RepModule extends Module {
 		description: "Reputation: View a user's reputation history",
 	})
 	async getrep(msg: Message, @optional user?: User) {
+		if (!msg.member || msg.channel.type !== 'text') {
+			return;
+		}
 		if (!user) user = msg.author;
 
 		const targetRU = await this.getOrMakeUser(user);
+		const records = (await targetRU.got)
+			.concat(await targetRU.given)
+			// Decreasing chronologically
+			.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+			.map(rg => {
+				if (rg.from.id == targetRU.id)
+					return `:white_small_square: Gave 1 rep to <@${
+						rg.to.id
+					}> (${prettyMilliseconds(
+						Date.now() - rg.createdAt.getTime(),
+					)} ago)`;
+				else
+					return `:white_small_square: Got 1 rep from <@${
+						rg.from.id
+					}> (${prettyMilliseconds(
+						Date.now() - rg.createdAt.getTime(),
+					)} ago)`;
+			});
+		const recordsPerPage = 30;
+		const pages = records
+			.reduce((acc, cur, index) => {
+				const curChunk = Math.floor(index / recordsPerPage);
+				acc[curChunk] ??= [];
+				acc[curChunk].push(cur);
+				return acc;
+			}, [] as string[][])
+			.map(page => page.join('\n'));
 		const embed = new MessageEmbed()
 			.setColor(TS_BLUE)
-			.setAuthor(user.tag, user.displayAvatarURL())
-			.setDescription(
-				(
-					await Promise.all(
-						(await targetRU.got)
-							.concat(await targetRU.given)
-							.map(async rg => {
-								if (rg.from.id == targetRU.id)
-									return `:white_small_square: Gave 1 rep to <@${
-										rg.to.id
-									}> (${prettyMilliseconds(
-										Date.now() - rg.createdAt.getTime(),
-									)} ago)`;
-								else
-									return `:white_small_square: Got 1 rep from <@${
-										rg.from.id
-									}> (${prettyMilliseconds(
-										Date.now() - rg.createdAt.getTime(),
-									)} ago)`;
-							}),
-					)
-				).join('\n'),
-			);
-		await msg.channel.send(embed, { split: true });
+			.setAuthor(user.tag, user.displayAvatarURL());
+		new Paginator(embed, pages, msg.member, msg.channel, 300000);
 	}
 
 	@command({

src/util/Paginator.ts

@@ -0,0 +1,101 @@
+import {
+	GuildMember,
+	Message,
+	MessageEmbed,
+	MessageReaction,
+	ReactionCollector,
+	TextChannel,
+	User,
+} from 'discord.js';
+
+const emojis = {
+	back: '◀',
+	first: '⏮',
+	last: '⏭',
+	next: '▶',
+	stop: '⏹',
+};
+
+export class Paginator {
+	private message!: Message;
+	private curPage = 0;
+
+	private collector!: ReactionCollector;
+
+	public constructor(
+		private readonly embed: MessageEmbed,
+		private readonly pages: string[],
+		private readonly member: GuildMember,
+		private readonly channel: TextChannel,
+		private readonly timeout: number = 100000,
+	) {
+		this.init();
+	}
+
+	private async init(): Promise<void> {
+		this.message = await this.channel.send(
+			this.embed
+				.setDescription(this.pages[this.curPage])
+				.setFooter(`Page ${this.curPage + 1} of ${this.pages.length}`),
+		);
+
+		if (this.pages.length === 1) return;
+
+		await this.message.react(emojis.first);
+		await this.message.react(emojis.back);
+		await this.message.react(emojis.stop);
+		await this.message.react(emojis.next);
+		await this.message.react(emojis.last);
+
+		this.collector = this.message.createReactionCollector(
+			(reaction, user) =>
+				reaction.me &&
+				user.id === this.member.id &&
+				user.id !== this.message.author!.id,
+			{ time: this.timeout },
+		);
+
+		this.collector.on(
+			'collect',
+			async (reaction: MessageReaction, user: User) => {
+				await reaction.users.remove(user);
+
+				switch (reaction.emoji.toString()) {
+					case emojis.first:
+						this.curPage = 0;
+						break;
+					case emojis.last:
+						this.curPage = this.pages.length - 1;
+						break;
+					case emojis.stop:
+						await this.message.reactions.removeAll();
+						break;
+					case emojis.back:
+						this.curPage--;
+						if (this.curPage < 0)
+							this.curPage = this.pages.length - 1;
+						break;
+					case emojis.next:
+						this.curPage++;
+						if (this.curPage > this.pages.length - 1)
+							this.curPage = 0;
+						break;
+				}
+
+				await this.refresh();
+			},
+		);
+
+		this.collector.on('end', () => {
+			this.message.reactions.removeAll();
+		});
+	}
+
+	private async refresh(): Promise<void> {
+		await this.message.edit(
+			this.embed
+				.setDescription(this.pages[this.curPage])
+				.setFooter(`Page ${this.curPage + 1} of ${this.pages.length}`),
+		);
+	}
+}