Parâmetros
Transforme o customId de componentes e modais em rotas http com parâmetros
O que são CustomID params?
Vamos um pouco além do convencional, nesta base um recurso presente em diversas ferramentas de servidor API foi implementado para permitir que sistemas mais avançados possam ser desenvolvidos com mais praticidade.
Igual em rotas HTTP, podemos passar parâmetros para os customIds de botões, menus de seleção e modais. Veja como é simples:
Primeiro vamos criar um comando de contexto de usuário:
import { createContainer, createRow } from "@magicyan/discord";
createCommand({
name: "Gerenciar",
type: ApplicationCommandType.User,
async run(interaction){
const { targetUser } = interaction;
createContainer("#5147da",
`Gerenciar ${targetUser}`,
createRow(
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/kick`,
label: "Expulsar", style: ButtonStyle.Secondary
}),
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/ban`,
label: "Banir", style: ButtonStyle.Danger
}),
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/timeout`,
label: "Castigo", style: ButtonStyle.Danger
}),
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/alert`,
label: "Alertar", style: ButtonStyle.Primary
})
)
);
await interaction.reply({
flags: ["Ephemeral", "IsComponentsV2"],
components: [container]
});
}
});// ...
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/kick`,
label: "Expulsar", style: ButtonStyle.Secondary
}),
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/ban`,
label: "Banir", style: ButtonStyle.Danger
}),
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/timeout`,
label: "Castigo", style: ButtonStyle.Danger
}),
new ButtonBuilder({
customId: `/manage/user/${targetUser.id}/alert`,
label: "Alertar", style: ButtonStyle.Primary
})
// ...Com isso podemos criar um Responder que espera qualquer componente de botão que siga esse padrão no customId.
Ele deve começar com /manage/user logo depois deve ter mais dois segmentos de parâmetros separados por / e começando com :, onde o primeiro será o id do usuário e o segundo vai ser uma ação.
Ficaria dessa maneira: /manage/user/:userId/:action
Então podemos definir esse padrão e qualquer botão onde o customId seguir ele, será respondido pela função definida. Você pode obter os parâmetros no segundo argumento da função.
// Dynamic button component function
createResponder({
customId: "/manage/user/:userId/:action",
types: [ComponentType.Button], cache: "cached",
async run(interaction, params) {
const { action, userId } = params;
const targetMember = await interaction.guild.members.fetch(userId);
switch(action){
case "kick": {
targetMember.kick();
// fazer coisas ...
break;
}
case "ban": {
targetMember.ban();
// fazer coisas ...
break;
}
case "timeout": {
targetMember.timeout(60000);
// fazer coisas ...
break;
}
case "alert": {
targetMember.send({ /* ... */ });
// fazer coisas ...
break;
}
}
},
});Você pode usar esse recurso com qualquer tipo de Responder, mas não esqueça que o discord tem um limite de 100 caracteres nos customIds.
Transformando parâmetros de CustomID
A função createResponder tem uma opção onde você pode especificar uma forma de transformar o objeto de parâmetros que inicalmente tanto as chaves, quantos os valores são somente strings. Confira:
Transforme o parâmetro value em um número, assim podendo usar funções numéricas
new Button({
customId: "/count/1",
label: "Contagem",
style: ButtonStyle.Primary
})createResponder({
customId: "/count/:value", cache: "cached",
types: [ComponentType.Button],
parse: params => ({
value: Number.parseInt(params.value)
}),
async run(interaction, { value }) {
console.log(value + 1); // 2
console.log(value.toFixed(2)); // "1.00"
}
});Wildcards
Você pode usar wildcards também se quiser responder a rotas com mais ou menos segmentos
Use ** para representar qualquer padrão de segmentos após a / (barra)
- "/giveway"
- "/giveway/users"
- "/giveway/gifts/nitro"
- "/giveway/gifts/account/creator/expiresAt"createResponder({
customId: "/giveway/**", cache: "cached",
types: [ComponentType.Button],
async run(interaction, { _ }) {
// /giveway _: ""
// /giveway/users _: "users"
// /giveway/gifts/nitro _:"gifts/nitro"
// /giveway/gifts/account/creator/expiresAt _:"gifts/account/creator/expiresAt"
}
});Os exemplos dessa página foram todos com botões, mas este recurso pode ser utilizado com qualquer tipo de responder!