feat: add onEnd handler for ButtonKit

Author: notunderctrl

packages/commandkit/src/components/ButtonKit.ts

@@ -15,9 +15,11 @@ import {
  * If the first argument is null, it means that the interaction collector has been destroyed.
  */
 export type CommandKitButtonBuilderInteractionCollectorDispatch = (
-    interaction: ButtonInteraction | null,
+    interaction: ButtonInteraction,
 ) => Awaitable<void>;
 
+export type CommandKitButtonBuilderOnEnd = () => Awaitable<void>;
+
 export type CommandKitButtonBuilderInteractionCollectorDispatchContextData = {
     /**
      * The message to listen for button interactions on.
@@ -35,6 +37,7 @@ export type CommandKitButtonBuilderInteractionCollectorDispatchContextData = {
 
 export class ButtonKit extends ButtonBuilder {
     #onClickHandler: CommandKitButtonBuilderInteractionCollectorDispatch | null = null;
+    #onEndHandler: CommandKitButtonBuilderOnEnd | null = null;
     #contextData: CommandKitButtonBuilderInteractionCollectorDispatchContextData | null = null;
     #collector: InteractionCollector<ButtonInteraction> | null = null;
 
@@ -63,29 +66,38 @@ export class ButtonKit extends ButtonBuilder {
      * button.onClick(null);
      * ```
      */
-    public onClick(handler: null): this;
     public onClick(
         handler: CommandKitButtonBuilderInteractionCollectorDispatch,
-        data: CommandKitButtonBuilderInteractionCollectorDispatchContextData,
-    ): this;
-    public onClick(
-        handler: CommandKitButtonBuilderInteractionCollectorDispatch | null,
         data?: CommandKitButtonBuilderInteractionCollectorDispatchContextData,
     ): this {
         if (this.data.style === ButtonStyle.Link) {
             throw new TypeError('Cannot setup "onClick" handler on link buttons.');
         }
 
+        if (!handler) {
+            throw new TypeError('Cannot setup "onClick" without a handler function parameter.');
+        }
+
         this.#destroyCollector();
 
         this.#onClickHandler = handler;
-        if (handler && data) this.#contextData = data;
+        if (data) this.#contextData = data;
 
         this.#setupInteractionCollector();
 
         return this;
     }
 
+    public onEnd(handler: CommandKitButtonBuilderOnEnd): this {
+        if (!handler) {
+            throw new TypeError('Cannot setup "onEnd" without a handler function parameter.');
+        }
+
+        this.#onEndHandler = handler;
+
+        return this;
+    }
+
     #setupInteractionCollector() {
         if (!this.#contextData || !this.#onClickHandler) return;
 
@@ -133,11 +145,11 @@ export class ButtonKit extends ButtonBuilder {
 
         this.#collector.on('end', () => {
             this.#destroyCollector();
+            this.#onEndHandler?.();
         });
     }
 
     #destroyCollector() {
-        this.#onClickHandler?.(null);
         this.#collector?.stop('end');
         this.#collector?.removeAllListeners();
         this.#collector = null;

packages/commandkit/tests/src/commands/misc/ping.ts

@@ -28,6 +28,7 @@ const tests = Array.from({ length: 10 }, (_, i) => ({
 
 export async function autocomplete({ interaction }: AutocompleteProps) {
     const arg = interaction.options.getString('test', false);
+    console.log(arg);
     if (!arg) return interaction.respond(tests);
 
     const filtered = tests.filter((test) => test.name.toLowerCase().includes(arg.toLowerCase()));
@@ -51,30 +52,26 @@ export async function run({ interaction, client }: SlashCommandProps) {
         fetchReply: true,
     });
 
-    button.onClick(
-        (inter) => {
-            if (!inter) {
-                button.setDisabled(true);
-                message.edit({
-                    components: [row],
-                });
-                return;
-            }
+    button
+        .onClick(
+            (inter) => {
+                console.log('onClick called');
 
-            inter.reply({
-                content: 'You clicked the ping button!',
-                ephemeral: true,
-            });
-        },
-        { message, time: 10_000, autoReset: true },
-    );
+                inter.reply({
+                    content: 'You clicked the ping button!',
+                    ephemeral: true,
+                });
+            },
+            { message, time: 10_000, autoReset: true },
+        )
+        .onEnd(() => {
+            console.log('onEnd called');
 
-    // interaction.reply(`:ping_pong: Pong! \`${client.ws.ping}ms\``);
+            button.setDisabled(true);
+            message.edit({ components: [row] });
+        });
 }
 
 export const options: CommandOptions = {
     devOnly: true,
-
-    // Test deprecation warning.
-    guildOnly: true,
 };

packages/commandkit/tests/src/index.ts

@@ -1,8 +1,6 @@
 import { CommandKit } from '../../src/index';
 import { Client } from 'discord.js';
 
-require('dotenv/config');
-
 const client = new Client({
     intents: ['Guilds', 'GuildMembers', 'GuildMessages', 'MessageContent'],
 });

packages/commandkit/tests/src/validations/devOnly.ts

@@ -2,8 +2,8 @@ import type { ValidationProps } from '../../../src';
 
 export default function ({ interaction, commandObj, handler }: ValidationProps) {
     if (interaction.isAutocomplete()) return;
-    if (commandObj.data.name === 'ping') {
-        interaction.reply('blocked...');
-        return true;
-    }
+    // if (commandObj.data.name === 'ping') {
+    //     interaction.reply('blocked...');
+    //     return true;
+    // }
 }