Sapphire - Imagine a framework•13mo ago

Creating a button handler

Hey! I would like to know if there is a way to create a button handler using Sapphire. I would like to read all files from a folder called "buttons" and store the data inside my container. I'd then check if there is an existing button with the given interaction id inside my container and if there is, I'd run the execute function. I came up with some code but can't manage to get it working. I'll attach it down below. Thanks in advance for all the help 🙂

4 Replies

yibuh•13mo ago

buttonHandler.ts

import { InteractionHandler, InteractionHandlerTypes, container, type PieceContext } from '@sapphire/framework';
import type { ButtonInteraction } from 'discord.js';
import type { ButtonExport } from '../../lib/interactions';

export class ButtonHandler extends InteractionHandler {
    public constructor(ctx: PieceContext, options: InteractionHandler.Options) {
        super(ctx, {
            ...options,
            interactionHandlerType: InteractionHandlerTypes.Button
        });
    }

    public override async parse(interaction: ButtonInteraction) {
        const button = container.buttons.get(interaction.customId);
        if (!button) return this.none();
        return this.some(button);
    }

    public async run(interaction: ButtonInteraction) {
        const button: ButtonExport | undefined = container.buttons.get(interaction.customId as string);
        await button?.execute(interaction);
    }
}

import { InteractionHandler, InteractionHandlerTypes, container, type PieceContext } from '@sapphire/framework';
import type { ButtonInteraction } from 'discord.js';
import type { ButtonExport } from '../../lib/interactions';

export class ButtonHandler extends InteractionHandler {
    public constructor(ctx: PieceContext, options: InteractionHandler.Options) {
        super(ctx, {
            ...options,
            interactionHandlerType: InteractionHandlerTypes.Button
        });
    }

    public override async parse(interaction: ButtonInteraction) {
        const button = container.buttons.get(interaction.customId);
        if (!button) return this.none();
        return this.some(button);
    }

    public async run(interaction: ButtonInteraction) {
        const button: ButtonExport | undefined = container.buttons.get(interaction.customId as string);
        await button?.execute(interaction);
    }
}

My buttons are loaded in my container but for some reason nothing is happening once I clic the button. Any hints on why this is happening?

Favna•13mo ago

https://www.sapphirejs.dev/docs/Guide/interaction-handlers/buttons

Sapphire Framework

Buttons | Sapphire

Buttons are components that are clickable. You will recieve an interaction for every click of a button! Here's an

Favna•13mo ago

And they should be in a directory called interaction-handlers (subdirectories are okay) Then as shown in the guide each should have a parse function to match to the command ID or name or whatever you want to check on I'm not sure where it's going from your code. Is parse called? Do you maybe always end in this.none()? Something else? Also you can read the data from this.some(..) in run (second parameter if i remember correctly) so that saves another Map lookup

chillihero•13mo ago

https://github.com/BirthdayyBot/BirthdayyBotSapphire/blob/develop/src/interaction-handlers/voteReminderButton.ts here is an example of it implemented if this helps

Gaming

Programming

Creating a button handler