- refactor

- add modal

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 # Keep environment variables out of version control
 .env
+prisma/dev.db

src/Components/actions.component.ts

@@ -0,0 +1,10 @@
+import { ActionRowBuilder, ButtonBuilder, ButtonStyle } from "discord.js";
+
+export default function getActionsComponent() {
+  return new ActionRowBuilder().addComponents(
+    new ButtonBuilder()
+      .setCustomId("quoteModal")
+      .setLabel("Quote")
+      .setStyle(ButtonStyle.Primary)
+  );
+}

src/Components/commands.component.ts

@@ -0,0 +1,30 @@
+import { SlashCommandBuilder } from "discord.js";
+
+export default function getCommands() {
+  const commands = [
+    new SlashCommandBuilder()
+      .setName("quote")
+      .setDescription("Lets you post a qoute without showing your name")
+      .addStringOption((option) =>
+        option
+          .setName("content")
+          .setDescription("The content of the quote")
+          .setRequired(true)
+      ),
+    new SlashCommandBuilder()
+      .setName("quotemodal")
+      .setDescription(
+        "Shows a model which lets you post a quote without showing your name"
+      ),
+    new SlashCommandBuilder()
+      .setName("actions")
+      .setDescription("Handle actions on this server")
+      .addSubcommand((subcommand) =>
+        subcommand
+          .setName("send")
+          .setDescription("Sends bot actions in the current channel")
+      ),
+  ].map((command) => command.toJSON());
+
+  return commands;
+}

src/Components/quote-modal.component.ts

@@ -0,0 +1,23 @@
+import {
+  ActionRowBuilder,
+  ModalBuilder,
+  TextInputBuilder,
+  TextInputStyle,
+} from "discord.js";
+
+export default function getQuoteModal() {
+  const modal = new ModalBuilder()
+    .setCustomId("quoteModal")
+    .setTitle("Submit a quote!");
+
+  const contentInput = new TextInputBuilder()
+    .setCustomId("contentInput")
+    .setLabel("Content")
+    .setStyle(TextInputStyle.Paragraph);
+
+  const firstActionRow = new ActionRowBuilder().addComponents(contentInput);
+
+  modal.addComponents(firstActionRow as any);
+
+  return modal;
+}

src/Controllers/discord.controller.ts

@@ -1,24 +1,24 @@
 import {
+  ButtonInteraction,
   CacheType,
   ChatInputCommandInteraction,
   Interaction,
+  ModalSubmitInteraction,
 } from "discord.js";
-import config from "config";
 import EventEmitter from "events";
-import DiscordService from "Services/discord.service";
-import PrismaService from "Services/prisma.service";
+import DiscordService from "Services/discord/discord.service";
 
 export default class DiscordController extends EventEmitter {
   private discordService!: DiscordService;
-  private prismaService: PrismaService;
 
   constructor() {
     super();
     this.discordService = new DiscordService();
-    this.prismaService = new PrismaService();
+    // log when running
     this.discordService.client.once("ready", () => {
       console.log("Listening...");
     });
+    // listen for interactions
     this.discordService.client.on(
       "interactionCreate",
       this.handleInteraction.bind(this)
@@ -30,42 +30,55 @@ export default class DiscordController extends EventEmitter {
   }
 
   async handleInteraction(interaction: Interaction<CacheType>) {
-    if (!interaction.isChatInputCommand()) return;
+    if (interaction.isModalSubmit()) {
+      await this.handleModalSubmit(interaction);
+    }
 
+    if (interaction.isChatInputCommand()) {
+      await this.handleChatInputCommand(interaction);
+    }
+
+    if (interaction.isButton()) {
+      await this.handleButton(interaction);
+    }
+  }
+
+  async handleButton(interaction: ButtonInteraction<CacheType>) {
+    const { customId } = interaction;
+
+    if (customId === "quoteModal") {
+      this.discordService.handleQuoteModal(interaction);
+    }
+  }
+
+  async handleChatInputCommand(
+    interaction: ChatInputCommandInteraction<CacheType>
+  ) {
     const { commandName } = interaction;
 
     switch (commandName) {
       case "quote":
-        await this.quote(interaction);
+        await this.discordService.handleQuote(interaction);
+      case "quotemodal":
+        await this.discordService.handleQuoteModal(interaction);
+      case "actions":
+        await this.discordService.handleActions(interaction);
+
       default:
         break;
     }
   }
 
-  async quote(interaction: ChatInputCommandInteraction<CacheType>) {
-    // find the channel with configured id
-    const channel = this.discordService.client.channels.cache.find(
-      (ch) => ch.id === config.discord.channelId
-    );
+  async handleModalSubmit(interaction: ModalSubmitInteraction<CacheType>) {
+    const { customId } = interaction;
 
-    if (channel?.isTextBased()) {
-      const content = interaction.options.getString("content") || "";
-
-      // send quote content as message
-      await this.prismaService.client.message.create({
-        data: {
-          content,
-          userName: interaction.user.username,
-        },
-      });
-
-      await channel.send(content);
-
-      await interaction.reply({
-        content: "Completed!",
-        ephemeral: true,
-      });
-      return;
+    switch (customId) {
+      case "quoteModal":
+        await this.discordService.handleQuote(interaction);
+      default:
+        break;
     }
   }
+
+  async sendActions(interaction: ChatInputCommandInteraction<CacheType>) {}
 }

src/Services/discord.service.ts

@@ -1,46 +0,0 @@
-import {
-  Client,
-  IntentsBitField,
-  Routes,
-  SlashCommandBuilder,
-} from "discord.js";
-import { REST } from "@discordjs/rest";
-import config from "config";
-
-const COMMANDS = [
-  new SlashCommandBuilder()
-    .setName("quote")
-    .setDescription("Lets you post a qoute without showing your name")
-    .addStringOption((option) =>
-      option
-        .setName("content")
-        .setDescription("The content of the quote")
-        .setRequired(true)
-    ),
-].map((command) => command.toJSON());
-
-export default class DiscordService {
-  rest: REST;
-  client: Client<boolean>;
-  constructor() {
-    this.rest = new REST({ version: "10" }).setToken(config.discord.token);
-
-    this.client = new Client({ intents: [IntentsBitField.Flags.Guilds] });
-  }
-
-  async init() {
-    try {
-      await this.rest.put(
-        Routes.applicationCommands(config.discord.applicationId),
-        {
-          body: COMMANDS,
-        }
-      );
-      console.log("Successfully added commands");
-
-      await this.client.login(config.discord.token);
-    } catch (e) {
-      console.error(e);
-    }
-  }
-}

src/Services/discord/discord.service.ts

@@ -0,0 +1,114 @@
+import {
+  CacheType,
+  ChatInputCommandInteraction,
+  Client,
+  IntentsBitField,
+  Interaction,
+  Routes,
+  SlashCommandBuilder,
+} from "discord.js";
+import { REST } from "@discordjs/rest";
+import config from "config";
+import PrismaService from "Services/prisma.service";
+import getCommands from "Components/commands.component";
+import getQuoteModal from "Components/quote-modal.component";
+import getActionsComponent from "Components/actions.component";
+
+export default class DiscordService {
+  rest: REST;
+  client: Client<boolean>;
+  private prismaService: PrismaService;
+
+  constructor() {
+    this.rest = new REST({ version: "10" }).setToken(config.discord.token);
+    this.prismaService = new PrismaService();
+
+    this.client = new Client({ intents: [IntentsBitField.Flags.Guilds] });
+  }
+
+  async init() {
+    try {
+      await this.rest.put(
+        Routes.applicationCommands(config.discord.applicationId),
+        {
+          body: getCommands(),
+        }
+      );
+      console.log("Successfully added commands");
+
+      await this.client.login(config.discord.token);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async handleQuote(interaction: Interaction<CacheType>) {
+    let content: string | undefined = undefined;
+
+    if (interaction.isModalSubmit()) {
+      content = interaction.fields.getTextInputValue("contentInput");
+    } else if (interaction.isChatInputCommand()) {
+      content = interaction.options.getString("content") || "";
+    }
+
+    if (content) {
+      await this.createQuote({ content }, interaction);
+    }
+  }
+
+  async handleQuoteModal(interaction: Interaction<CacheType>) {
+    const modal = getQuoteModal();
+
+    if (interaction.isButton() || interaction.isChatInputCommand()) {
+      await interaction.showModal(modal);
+    }
+  }
+
+  async handleActions(interaction: Interaction<CacheType>) {
+    if (interaction.isChatInputCommand()) {
+      if (interaction.options.getSubcommand() === "send") {
+        const channel = interaction.channel;
+
+        if (channel?.isTextBased()) {
+          const actions = getActionsComponent();
+
+          await interaction.reply({
+            content: "Choose an action!",
+            components: [actions as any],
+          });
+        }
+      }
+    }
+  }
+
+  async createQuote(
+    { content }: { content: string },
+    interaction: Interaction
+  ) {
+    // find the channel with configured id
+    const channel = this.client.channels.cache.find(
+      (ch) => ch.id === config.discord.channelId
+    );
+
+    if (channel?.isTextBased()) {
+      // send quote content as message
+      await this.prismaService.client.message.create({
+        data: {
+          content,
+          userName: interaction.user.username,
+        },
+      });
+
+      await channel.send(content);
+
+      if (interaction.isChatInputCommand() || interaction.isModalSubmit()) {
+        await interaction.reply({
+          content: "Completed!",
+          ephemeral: true,
+        });
+      }
+
+      return;
+    }
+  }
+}