Add /mdn to allow search, not guess-and-check

src/features/commands.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import fetch from "node-fetch";
 import {
   APIEmbed,
   ChannelType,
@@ -388,48 +386,9 @@ Here's an article explaining the difference between the two: https://goshakkk.na
     help: `allows you to search something on MDN, usage: !mdn Array.prototype.map`,
     category: "Web",
     handleMessage: async (msg) => {
-      const [, ...args] = msg.content.split(" ");
-      const query = args.join(" ");
-      const [fetchMsg, res] = await Promise.all([
-        msg.channel.send(`Fetching "${query}"...`),
-        fetch(
-          `https://developer.mozilla.org/api/v1/search?highlight=false&locale=en-us&q=${query}`,
-        ),
-      ]);
-
-      const { documents } = (await res.json()) as {
-        documents: (
-          | { title: string; excerpt: string; mdn_url: string }
-          | undefined
-        )[];
-      };
-      const [topResult] = documents;
-
-      if (!topResult) {
-        fetchMsg.edit(`Could not find anything on MDN for '${query}'`);
-        return;
-      }
-
-      const { title, excerpt: description, mdn_url: mdnUrl } = topResult;
-
-      await msg.channel.send({
-        embeds: [
-          {
-            author: {
-              name: "MDN",
-              url: "https://developer.mozilla.org",
-              icon_url:
-                "https://developer.mozilla.org/favicon-48x48.cbbd161b.png",
-            },
-            title,
-            description,
-            color: 0x83d0f2,
-            url: `https://developer.mozilla.org${mdnUrl}`,
-          },
-        ],
-      });
-
-      fetchMsg.delete();
+      await msg.channel.send(
+        "The !mdn command has been replaced with a slash command! Try out /mdn",
+      );
     },
   },
   {

src/features/mdn.ts

@@ -0,0 +1,63 @@
+import { SlashCommandBuilder } from "discord.js";
+import { SlashCommand } from "../helpers/discord";
+
+const SOURCE_LINK =
+  "-# [source](<https://github.com/reactiflux/reactibot/blob/main/src/features/mdn.ts>)";
+
+export const mdnSearch: SlashCommand = {
+  command: new SlashCommandBuilder()
+    .setName("mdn")
+    .setDescription("Link to an MDN resource")
+    .addStringOption((option) =>
+      option
+        .setName("query")
+        .setDescription("Which page?")
+        .setRequired(true)
+        .setAutocomplete(true),
+    ) as SlashCommandBuilder,
+  handler: async (interaction) => {
+    const mdnUrl = interaction.options.getString("query", true);
+
+    if (mdnUrl.startsWith("/")) {
+      return await interaction.reply(`https://developer.mozilla.org${mdnUrl}
+${SOURCE_LINK}`);
+    }
+
+    const res = await fetch(
+      `https://developer.mozilla.org/api/v1/search?highlight=false&locale=en-us&q=${mdnUrl}`,
+    );
+    const { documents } = (await res.json()) as {
+      documents?: { title: string; excerpt: string; mdn_url: string }[];
+    };
+
+    return await interaction.reply(
+      `Maybe one of these?
+${documents
+  ?.slice(0, 3)
+  .map((d) => `- [${d.title}](<https://developer.mozilla.org${d.mdn_url}>)`)
+  .join("\n")}
+${SOURCE_LINK}`,
+    );
+  },
+  autocomplete: async (interaction) => {
+    const partial = interaction.options.getFocused();
+
+    const res = await fetch(
+      `https://developer.mozilla.org/api/v1/search?highlight=false&locale=en-us&q=${partial}`,
+    );
+    const { documents } = (await res.json()) as {
+      documents?: { title: string; excerpt: string; mdn_url: string }[];
+    };
+
+    await interaction.respond(
+      documents
+        ? documents
+            .filter((d) => d.mdn_url.length < 100)
+            .map((b) => ({
+              name: b.title,
+              value: b.mdn_url,
+            }))
+        : [],
+    );
+  },
+};

src/index.ts

@@ -34,6 +34,7 @@ import troll from "./features/troll";
 import { modActivity } from "./features/mod-activity";
 import { debugEventButtonHandler, debugEvents } from "./features/debug-events";
 import { recommendBookCommand } from "./features/book-list";
+import { mdnSearch } from "./features/mdn";
 
 export const bot = new discord.Client({
   intents: [
@@ -57,6 +58,7 @@ export const bot = new discord.Client({
 
 registerCommand(resetJobCacheCommand);
 registerCommand(recommendBookCommand);
+registerCommand(mdnSearch);
 
 if (!isProd()) {
   registerCommand(debugEvents);