Update vibe command to use new Button API

src/commands/cat.ts

@@ -1,6 +1,6 @@
 import { Command } from '@knighthacks/dispatch';
 import axios from 'axios';
-import { CommandInteraction, InteractionReplyOptions, Message, MessageEmbed } from 'discord.js';
+import { InteractionReplyOptions, Message, MessageEmbed } from 'discord.js';
 import Colors from '../colors';
 import { singleButtonRow } from '../util/button';
 
@@ -39,7 +39,7 @@ async function getMessage(): Promise<InteractionReplyOptions> {
 const CatCommand: Command = {
   name: 'cat',
   description: 'Gets a random image of a cat',
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
     // Defer while we fetch the image.
     await interaction.defer();
 

src/commands/coinflip.ts

@@ -1,4 +1,4 @@
-import { CommandInteraction, Message } from 'discord.js';
+import { Message } from 'discord.js';
 import { Command, inChannelNames } from '@knighthacks/dispatch';
 import { Channels } from '../channels';
 import { singleButtonRow } from '../util/button';
@@ -18,7 +18,7 @@ const CoinFlipCommand: Command = {
   name: 'coinflip',
   description: 'Performs a coin flip',
   permissionHandler: inChannelNames(Channels.bot),
-  async run(interaction: CommandInteraction): Promise<void> {
+  async run({ interaction }): Promise<void> {
     const message = await interaction.reply({ 
       content: `${interaction.user.username}, you got ${getFlip()}`,
       fetchReply: true,

src/commands/crumbl.ts

@@ -0,0 +1,37 @@
+import { Command } from '@knighthacks/dispatch';
+import axios from 'axios';
+import { MessageEmbed } from 'discord.js';
+
+interface Cookie {
+  name: string;
+  description: string;
+  image: string;
+}
+
+async function fetchCookiesData(): Promise<Cookie[]> {
+  return (
+    await axios.get(
+      'https://jpswqfm3od.execute-api.us-east-1.amazonaws.com/default/crumbl-api'
+    )
+  ).data;
+}
+
+const crumbl: Command = {
+  name: 'crumbl',
+  description: 'View the current weekly specialty cookies at Crumbl Cookies!',
+  async run({ interaction }) {
+    await interaction.defer();
+    const cookiesData = await fetchCookiesData();
+    await interaction.followUp({
+      content: 'Here are the weekly specialty cookies!',
+      embeds: cookiesData.map((c) =>
+        new MessageEmbed()
+          .setTitle(c.name)
+          .setDescription(c.description)
+          .setThumbnail(c.image)
+      ),
+    });
+  },
+};
+
+export default crumbl;

src/commands/dice.ts

@@ -1,4 +1,4 @@
-import { CommandInteraction, Message, MessageActionRow, MessageButton } from 'discord.js';
+import { Message, MessageActionRow, MessageButton } from 'discord.js';
 import { Command } from '@knighthacks/dispatch';
 
 const numberToString: Record<number, string> = {
@@ -22,7 +22,7 @@ const randNumber = () => Math.floor(Math.random() * 6) + 1; // +1 to exclude 0 a
 const DiceCommand: Command = {
   name: 'dice',
   description: 'Roll a die to get a random number between 1 and 6',
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
     // Send message.
     const message = await interaction.reply({ 
       content: `You rolled a  :${numberToString[randNumber()]}:`, 

src/commands/dog.ts

@@ -1,6 +1,6 @@
 import { Command } from '@knighthacks/dispatch';
 import axios from 'axios';
-import { CommandInteraction, InteractionReplyOptions, Message, MessageEmbed } from 'discord.js';
+import { InteractionReplyOptions, Message, MessageEmbed } from 'discord.js';
 import Colors from '../colors';
 import { singleButtonRow } from '../util/button';
 
@@ -39,7 +39,7 @@ async function getMessage(): Promise<InteractionReplyOptions> {
 const DogCommand: Command = {
   name: 'dog',
   description: 'Downloads an image of a dog from the internet',
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
 
     // Defer interaction while we fetch the image.
     await interaction.defer();

src/commands/eightball.ts

@@ -1,5 +1,5 @@
 import { Command } from '@knighthacks/dispatch';
-import { ApplicationCommandOption, CommandInteraction } from 'discord.js';
+import { ApplicationCommandOption } from 'discord.js';
 
 const options: ApplicationCommandOption[] = [
   {
@@ -27,7 +27,7 @@ const eightball: Command = {
   name: 'eightball',
   description : 'Ask a question, and you shall recieve an answer',
   options,
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
     const randIndex = Math.floor(Math.random() * responses.length);
     await interaction.reply(responses[randIndex] ?? '');
   }

src/commands/fact.ts

@@ -1,6 +1,6 @@
 import { Command } from '@knighthacks/dispatch';
 import axios from 'axios';
-import { CommandInteraction, Message } from 'discord.js';
+import { Message } from 'discord.js';
 import { singleButtonRow } from '../util/button';
 
 const url = 'https://uselessfacts.jsph.pl/random.json?language=en';
@@ -28,7 +28,7 @@ async function getFact(): Promise<string | null> {
 const FactCommand: Command = {
   name: 'fact',
   description: 'Get a random fact',
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
     const fact = await getFact();
 
     if (fact) {

src/commands/links.ts

@@ -22,7 +22,7 @@ const row = new MessageActionRow().addComponents(buttons);
 const LinksCommand: Command = {
   name: 'links',
   description: 'Gets helpful links for KnightHacks.',
-  async run(interaction) {
+  async run({ interaction }) {
     await interaction.reply({ content: '**Here\'s some helpful KnightHacks links!**', components: [row] });
   }
 };

src/commands/ping.ts

@@ -1,12 +1,11 @@
-import { CommandInteraction } from 'discord.js';
 import { Command, inChannelNames } from '@knighthacks/dispatch';
 import { Channels } from '../channels';
 
 const PingCommand: Command = {
   name: 'ping',
   description: 'Displays bot ping latency',
   permissionHandler: inChannelNames(Channels.bot),
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
     await interaction.reply(`Pong (${interaction.client.ws.ping}ms)`);
   }
 };

src/commands/stats.ts

@@ -1,4 +1,4 @@
-import { CommandInteraction, MessageEmbed } from 'discord.js';
+import { MessageEmbed } from 'discord.js';
 import { Command, inChannelNames } from '@knighthacks/dispatch';
 import { Channels } from '../channels';
 import Colors from '../colors';
@@ -7,7 +7,7 @@ const StatsCommand: Command = {
   name: 'stats',
   description: 'Displays statistics for this guild',
   permissionHandler: inChannelNames(Channels.bot),
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
 
     const members = interaction.guild?.members.cache;
     const { guild } = interaction;

src/commands/testCommand.ts

@@ -1,12 +1,11 @@
-import { CommandInteraction } from 'discord.js';
 import { Command, inChannelNames } from '@knighthacks/dispatch';
 import { Channels } from '../channels';
 
 const command: Command = {
   name: 'test',
   description: 'a test command',
   permissionHandler: inChannelNames(Channels.bot),
-  async run(interaction: CommandInteraction): Promise<void> {
+  async run({ interaction }): Promise<void> {
     await interaction.reply('Hello from dispatch');
   }
 };

src/commands/vibe.ts

@@ -1,23 +1,26 @@
-import { ApplicationCommandOption, CommandInteraction, EmbedFieldData, Message, MessageEmbed, User } from 'discord.js';
-import { Command, inChannelNames } from '@knighthacks/dispatch';
+import {
+  Command,
+  DispatchButton,
+  inChannelNames,
+  UIComponent,
+} from '@knighthacks/dispatch';
+import {
+  ApplicationCommandOption,
+  EmbedFieldData,
+  MessageEmbed,
+  User,
+} from 'discord.js';
 import { Channels } from '../channels';
 import Colors from '../colors';
-import { singleButtonRow } from '../util/button';
 
 const options: ApplicationCommandOption[] = [
   {
     name: 'user',
     type: 'USER',
     description: 'The user to vibe check',
-  }
+  },
 ];
 
-const row = singleButtonRow({
-  label: 'Recheck',
-  customId: 'vibeButton',
-  style: 'PRIMARY',
-});
-
 const categories = [
   { name: 'Royalty', emoji: '👑' },
   { name: 'Artsy', emoji: '👩‍🎨' },
@@ -39,9 +42,10 @@ type Result = {
 
 function generateVibeEmbed(sender: User, recipient: User): MessageEmbed {
   // Generate a random percentage per each category
-  const results: Result[] = categories.map(category => (
-    { category, score: Math.floor(Math.random() * 101) }
-  ));
+  const results: Result[] = categories.map((category) => ({
+    category,
+    score: Math.floor(Math.random() * 101),
+  }));
 
   const fields = results.map((result): EmbedFieldData => {
     // Dexponetiate the score.
@@ -62,7 +66,9 @@ function generateVibeEmbed(sender: User, recipient: User): MessageEmbed {
     value += '|';
     return { name, value };
   });
-  const status = Math.round(Math.random()) ? '**✅ | Vibe Check Passed**' : '**❌ | Vibe Check failed**';
+  const status = Math.round(Math.random())
+    ? '**✅ | Vibe Check Passed**'
+    : '**❌ | Vibe Check failed**';
 
   // Create embed and add fields, and return.
   return new MessageEmbed()
@@ -71,35 +77,43 @@ function generateVibeEmbed(sender: User, recipient: User): MessageEmbed {
     .setTitle('Vibe Check')
     .addFields(fields)
     .setColor(Colors.embedColor)
-    .setFooter(`checked by ${sender.username}`, sender.avatarURL() ?? undefined);
+    .setFooter(
+      `checked by ${sender.username}`,
+      sender.avatarURL() ?? undefined
+    );
 }
 
 const VibeCommand: Command = {
   name: 'vibe',
   description: 'Performs a vibe check on the given user.',
   options,
   permissionHandler: inChannelNames(Channels.bot),
-  async run(interaction: CommandInteraction) {
+  async run({ interaction, registerUI }) {
     const user = interaction.options.get('user')?.user;
     const sender = interaction.user;
 
     // Show that the bot is thinking.
     await interaction.defer();
 
+    const ui: UIComponent = new DispatchButton({
+      style: 'PRIMARY',
+      label: 'Recheck',
+      async onClick(i) {
+        await i.deferUpdate();
+        await i.editReply({
+          embeds: [generateVibeEmbed(sender, user ?? sender)],
+        });
+      },
+    });
+
     // If there's no user, that means it's just a sender check.
     // Defer because the bot is thinking.
-    const message = await interaction.followUp({ 
+    await interaction.followUp({
       embeds: [generateVibeEmbed(sender, user ?? sender)],
       fetchReply: true,
-      components: [row],
-    }) as Message;
-
-    const collector = message.createMessageComponentCollector({ 'componentType': 'BUTTON' });
-    collector.on('collect', async (i) => {
-      await i.deferUpdate();
-      await i.editReply({ embeds: [generateVibeEmbed(sender, user ?? sender)] });
+      components: registerUI(ui),
     });
-  }
+  },
 };
 
 export default VibeCommand;

src/commands/whois.ts

@@ -1,4 +1,4 @@
-import { ApplicationCommandOption, CommandInteraction, MessageEmbed } from 'discord.js';
+import { ApplicationCommandOption, MessageEmbed } from 'discord.js';
 import { Command } from '@knighthacks/dispatch';
 import Colors from '../colors';
 
@@ -14,7 +14,7 @@ const WhoIs: Command = {
   name: 'whois',
   description: 'Displays info about a given user',
   options,
-  async run(interaction: CommandInteraction) {
+  async run({ interaction }) {
     const user = interaction.options.get('user')?.user ?? interaction.user;
     await interaction.defer();
     if(!user || !user.id)