Add a button handler (#8)

package.json

@@ -15,7 +15,8 @@
         "discord.js": "14.11.0",
         "express": "^4.18.2",
         "gray-matter": "^4.0.3",
-        "tsx": "3.12.7"
+        "tsx": "3.12.7",
+        "valibot": "^0.12.0"
     },
     "devDependencies": {
         "@types/express": "^4.17.17",

src/handlers/button.handler.ts

@@ -0,0 +1,64 @@
+import {
+    ButtonBuilder,
+    ButtonInteraction,
+    Events,
+    InteractionButtonComponentData,
+} from 'discord.js';
+import { Handler } from '..';
+import { BaseSchema, Output } from 'valibot';
+import { error } from 'console';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const buttonMap = new Map<string, Button<any>>();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class Button<ArgsType extends BaseSchema<any, any>> {
+    id: string;
+    args?: ArgsType;
+    _onPress?: (interaction: ButtonInteraction, args: ArgsType) => unknown;
+    constructor(id: string) {
+        this.id = id;
+        if (buttonMap.has(id)) console.error(`Button ${id} is already defined`);
+        buttonMap.set(id, this);
+    }
+    setArgs(args: ArgsType) {
+        this.args = args;
+        return this;
+    }
+    onPress(
+        handler: (
+            interaction: ButtonInteraction,
+            args: Output<ArgsType>
+        ) => unknown
+    ) {
+        this._onPress = handler;
+        return this;
+    }
+
+    button(
+        data: Partial<InteractionButtonComponentData>,
+        args: Output<ArgsType>
+    ): ButtonBuilder {
+        const button = new ButtonBuilder({
+            ...data,
+            customId: JSON.stringify({ id: this.id, args }),
+        });
+        return button;
+    }
+}
+
+export const buttonHandler: Handler = (client) => {
+    client.on(Events.InteractionCreate, async (interaction) => {
+        if (!interaction.isButton()) return;
+        const data = JSON.parse(interaction.customId);
+        console.log(data);
+        const args = data.args;
+        if (!data.id) return;
+        if (!buttonMap.has(data.id)) return;
+        const button = buttonMap.get(data.id);
+        if (!button?.args) throw error('No args set in button');
+        const parsedArgs = button.args.parse(args);
+        if (!button._onPress) return;
+        button._onPress(interaction, parsedArgs);
+    });
+};

src/index.ts

@@ -11,6 +11,7 @@ import commandHandler from './handlers/command.handler';
 import { logHandler } from './handlers/log.handler';
 import { reloadGlobalSlashCommands } from './handlers/command.handler';
 import './webserver';
+import { buttonHandler } from './handlers/button.handler';
 
 export const client = new Client({
     intents: [
@@ -82,7 +83,7 @@ client.once(Events.ClientReady, async () => {
 
 export type Handler = (client: Client<false>) => void;
 
-const handlers: Handler[] = [commandHandler, logHandler];
+const handlers: Handler[] = [commandHandler, logHandler, buttonHandler];
 
 for (const handler of handlers) {
     handler(client);