feat: adding buttons to random command

src/@types/commands.ts

@@ -7,15 +7,13 @@ import type {
 } from "discord.js";
 
 type Handler<I> = (interaction: I) => Promise<void>;
-type Kind = "chat" | "button" | "select" | "modal";
 
 type SlashCommandData =
   | SlashCommandBuilder
   | SlashCommandOptionsOnlyBuilder
   | SlashCommandSubcommandsOnlyBuilder;
 
-export type Command<I, D, K extends Kind, C = number> = {
-  kind: K;
+export type Command<I, D, C = number> = {
   data: D;
   execute: Handler<I>;
   cooldown: C; // seconds
@@ -24,10 +22,7 @@ export type Command<I, D, K extends Kind, C = number> = {
 export type SlashCommand = Command<
   ChatInputCommandInteraction,
   SlashCommandData,
-  "chat",
   number
 >;
 
-export type DiscordCommand = SlashCommand;
-
 export type CommandCooldowns = Collection<string, Collection<string, number>>;

src/@types/discord-augment.d.ts

@@ -1,10 +1,10 @@
 import "discord.js";
 import type { Collection } from "discord.js";
-import type { DiscordCommand, CommandCooldowns } from "./commands.ts";
+import type { CommandCooldowns, SlashCommand } from "./commands.ts";
 
 declare module "discord.js" {
   interface Client {
-    commands: Collection<string, DiscordCommand>;
+    commands: Collection<string, SlashCommand>;
     cooldowns: CommandCooldowns;
   }
 }

src/commands/chat-commands/ping.ts

@@ -9,7 +9,6 @@ async function execute(
 
 export const command: SlashCommand = {
   cooldown: 10,
-  kind: "chat",
   data: new SlashCommandBuilder()
     .setName("ping")
     .setDescription("Replies with Pong!"),

src/commands/chat-commands/random-song.ts

@@ -1,9 +1,16 @@
-import { SlashCommandBuilder, ChatInputCommandInteraction } from "discord.js";
+import {
+  SlashCommandBuilder,
+  ChatInputCommandInteraction,
+  ButtonBuilder,
+  ButtonStyle,
+  ActionRowBuilder,
+  MessageActionRowComponentBuilder,
+} from "discord.js";
 import type { SlashCommand } from "../../@types/commands.js";
 import { logger } from "../../helpers/logger.js";
 import { getSongByGenre } from "../../helpers/open-ai.js";
 import { SongPick } from "../../@types/open-ai.js";
-import { playSongFromYoutube } from "../../helpers/youtube.js";
+import { playSongFromYoutube } from "../../helpers/playback.js";
 
 async function execute(
   interaction: ChatInputCommandInteraction,
@@ -18,7 +25,35 @@ async function execute(
     const pickedSong = songs[randomIndex]!;
 
     const playResult = await playSongFromYoutube(interaction, pickedSong);
-    await interaction.editReply(playResult);
+
+    const play = new ButtonBuilder()
+      .setCustomId("play")
+      .setLabel("Play")
+      .setStyle(ButtonStyle.Primary)
+      .setDisabled(true);
+
+    const pause = new ButtonBuilder()
+      .setCustomId("pause")
+      .setLabel("Pause")
+      .setStyle(ButtonStyle.Secondary)
+      .setDisabled(false);
+
+    const remove = new ButtonBuilder()
+      .setCustomId("remove")
+      .setLabel("Remove")
+      .setStyle(ButtonStyle.Danger)
+      .setDisabled(false);
+
+    const row =
+      new ActionRowBuilder<MessageActionRowComponentBuilder>().addComponents(
+        remove,
+        pause,
+        play,
+      );
+    await interaction.editReply({
+      content: playResult,
+      components: [row],
+    });
   } catch (err) {
     logger.error(`Error in execute function for command [RANDOM]: ${err}`);
     await interaction.editReply({
@@ -29,7 +64,6 @@ async function execute(
 
 export const command: SlashCommand = {
   cooldown: 15,
-  kind: "chat",
   data: new SlashCommandBuilder()
     .setName("random")
     .setDescription(
@@ -48,6 +82,13 @@ export const command: SlashCommand = {
           { name: "Pop", value: "Pop" },
           { name: "Indie Pop", value: "Indie Pop" },
           { name: "Early 2000s Country", value: "Early 2000s Country" },
+          { name: "Metal", value: "Metal" },
+          { name: "Synthwave", value: "Synthwave" },
+          { name: "Reggaeton", value: "Reggaeton" },
+          { name: "Alternative Rock", value: "Alternative Rock" },
+          { name: "Funk", value: "Funk" },
+          { name: "Lo-fi Hip Hop", value: "Lo-fi Hip Hop" },
+          { name: "Classic Soul", value: "Classic Soul" },
         ),
     ),
   execute,

src/commands/chat-commands/vibe.test.ts

@@ -0,0 +1,11 @@
+import { describe, test, expect } from "@jest/globals";
+
+describe("src/index.ts", () => {
+  test("sayHello function should return a greeting with the given name", () => {
+    // Arrange
+    const name = "Hello World";
+
+    // Assert
+    expect(name).toBe("Hello World");
+  });
+});

src/commands/chat-commands/vibe.ts

@@ -0,0 +1,44 @@
+import { SlashCommandBuilder, ChatInputCommandInteraction } from "discord.js";
+import type { SlashCommand } from "../../@types/commands.js";
+import { logger } from "../../helpers/logger.js";
+import { getPlaylistsByVibe } from "../../helpers/open-ai.js";
+import { SongPick } from "../../@types/open-ai.js";
+// import { playSongFromYoutube } from "../../helpers/playback.js";
+
+async function execute(
+  interaction: ChatInputCommandInteraction,
+): Promise<void> {
+  try {
+    await interaction.deferReply();
+    const songs: SongPick[] = await getPlaylistsByVibe(
+      interaction.options.getString("vibe")!,
+    );
+    logger.info(
+      `The songs we picked are ${songs.map((song) => song.title).join(", ")}`,
+    );
+  } catch (err) {
+    logger.error(`Error in execute function for command [VIBE]: ${err}`);
+    await interaction.editReply({
+      content: "An unexpected error occured, try again later.",
+    });
+  }
+}
+
+export const command: SlashCommand = {
+  cooldown: 20,
+  data: new SlashCommandBuilder()
+    .setName("vibe")
+    .setDescription(
+      "Generates a curated playlist to listen to based on the desired vibe.",
+    )
+    .addStringOption((option) =>
+      option
+        .setName("vibe")
+        .setDescription(
+          "Give a brief description of the vibe you are going for.",
+        )
+        .setRequired(true)
+        .setMaxLength(200),
+    ),
+  execute,
+};

src/events/interactionCreate.ts

@@ -1,48 +1,24 @@
 import { Events, MessageFlags, Interaction, CacheType } from "discord.js";
 import { logger } from "../helpers/logger.js";
-import { commandOnCooldown } from "../helpers/commands.js";
+import { handleCommandInteraction } from "../helpers/commands.js";
+import { handleButtonInteraction } from "../helpers/buttons.js";
 
 const interactionCreateEvent = {
   name: Events.InteractionCreate,
   async execute(interaction: Interaction<CacheType>) {
     try {
       if (interaction.isChatInputCommand()) {
-        const command = interaction.client.commands.get(
-          interaction.commandName,
-        );
-        if (!command) {
-          logger.error(
-            `No command matching ${interaction.commandName} was found.`,
-          );
-          return;
-        }
-        const cooldown = commandOnCooldown(command, interaction);
-        if (cooldown !== -1) {
-          if (!interaction.isRepliable()) return;
-          else {
-            await interaction.reply({
-              content: `This command is on cooldown for you, wait ${cooldown} seconds`,
-              flags: MessageFlags.Ephemeral,
-            });
-            return;
-          }
-        }
-        if (command.kind === "chat") await command.execute(interaction);
+        await handleCommandInteraction(interaction);
+      } else if (interaction.isButton()) {
+        await handleButtonInteraction(interaction);
       }
     } catch (err) {
       logger.error(`Error executing command for Amplify: ${err}`);
       if (!interaction.isRepliable()) return;
-      if (interaction.replied || interaction.deferred) {
-        await interaction.reply({
-          content: "There was an error while executing this command!",
-          flags: MessageFlags.Ephemeral,
-        });
-      } else {
-        await interaction.reply({
-          content: "There was an error while executing this command!",
-          flags: MessageFlags.Ephemeral,
-        });
-      }
+      await interaction.reply({
+        content: "There was an error while executing this command!",
+        flags: MessageFlags.Ephemeral,
+      });
     }
   },
 };

src/helpers/buttons.ts

@@ -0,0 +1,101 @@
+import { ButtonInteraction, CacheType } from "discord.js";
+import {
+  pausePlayback,
+  resumePlayback,
+  removePlayback,
+} from "../helpers/playback.js";
+
+export async function handleButtonInteraction(
+  interaction: ButtonInteraction<CacheType>,
+) {
+  if (!interaction.guildId) return;
+  switch (interaction.customId) {
+    case "play":
+      await handlePlayButton(interaction);
+      break;
+    case "remove":
+      await handleRemoveButton(interaction);
+      break;
+    case "pause":
+      await handlePauseButton(interaction);
+      break;
+  }
+}
+
+async function handlePlayButton(interaction: ButtonInteraction<CacheType>) {
+  const msg = resumePlayback(interaction.guildId!);
+  await interaction.update({
+    content: msg,
+    components: [
+      {
+        type: 1,
+        components: [
+          {
+            type: 2,
+            custom_id: "remove",
+            label: "Remove",
+            style: 4,
+            disabled: false,
+          },
+          {
+            type: 2,
+            custom_id: "pause",
+            label: "Pause",
+            style: 2,
+            disabled: false,
+          },
+          {
+            type: 2,
+            custom_id: "play",
+            label: "Play",
+            style: 1,
+            disabled: true,
+          },
+        ],
+      },
+    ],
+  });
+}
+
+async function handleRemoveButton(interaction: ButtonInteraction<CacheType>) {
+  const msg = removePlayback(interaction.guildId!);
+  await interaction.update({
+    content: msg,
+    components: [],
+  });
+}
+
+async function handlePauseButton(interaction: ButtonInteraction<CacheType>) {
+  const msg = pausePlayback(interaction.guildId!);
+  await interaction.update({
+    content: msg,
+    components: [
+      {
+        type: 1,
+        components: [
+          {
+            type: 2,
+            custom_id: "remove",
+            label: "Remove",
+            style: 4,
+            disabled: false,
+          },
+          {
+            type: 2,
+            custom_id: "pause",
+            label: "Pause",
+            style: 2,
+            disabled: true,
+          },
+          {
+            type: 2,
+            custom_id: "play",
+            label: "Play",
+            style: 1,
+            disabled: false,
+          },
+        ],
+      },
+    ],
+  });
+}