Merge pull request #18 from BenjammingKirby/master

ItsAzaria · web-flow · commit 19e7f3c40358 · 2022-01-27T15:07:21.000Z
Add autocomplete
diff --git a/src/bot.ts b/src/bot.ts
@@ -1,7 +1,7 @@
 import "dotenv/config";
 import { Client, Collection, LimitedCollection } from "discord.js";
 import { MyContext } from "./interfaces";
-import { loadCommands, interactionCreateHandler } from "./handlers/CommandHandler";
+import { loadCommands, interactionCreateHandler } from "./handlers/InteractionCreateHandler";
 import { messageHandler } from "./handlers/MessageHandler";
 
 (async function () {
diff --git a/src/commands/docs/djs.ts b/src/commands/docs/djs.ts
@@ -16,7 +16,8 @@ const command: Command = {
             option
                 .setName("query")
                 .setDescription("Enter the phrase you'd like to search for, e.g: client#isready")
-                .setRequired(true),
+                .setRequired(true)
+                .setAutocomplete(true),
         )
         .addStringOption((option) =>
             option
@@ -39,8 +40,12 @@ const command: Command = {
             (interaction.options.getString("source") as keyof typeof sources) || "stable";
         // Whether to include private elements on the search results, by default false, shows private elements if the search returns an exact result;
         const searchPrivate = interaction.options.getBoolean("private") || false;
-        const doc = await Doc.fetch(source, { force: true });
+        const doc = await Doc.fetch(source, { force: true }).catch(console.error);
 
+        if (!doc) {
+            await interaction.editReply({ content: "Couldn't fetch docs" }).catch(console.error);
+            return;
+        }
         // const resultEmbed = doc.resolveEmbed(query, { excludePrivateElements: !searchPrivate });
         const result = searchDJSDoc(doc, query, searchPrivate);
         // If a result wasn't found
@@ -52,7 +57,7 @@ const command: Command = {
             // Satisfies the method's MessageEmbedOption type
             const embedObj = { ...notFoundEmbed, timestamp: timeStampDate };
 
-            await interaction.reply({ embeds: [embedObj], ephemeral: true }).catch(console.error);
+            await interaction.editReply({ embeds: [embedObj] }).catch(console.error);
             return;
         } else if (Array.isArray(result)) {
             // If there are multiple results, send a select menu from which the user can choose which one to send
@@ -64,9 +69,8 @@ const command: Command = {
                     .setPlaceholder("Select documentation to send"),
             );
             await interaction
-                .reply({
+                .editReply({
                     content: "Didn't find an exact match, please select one from below",
-                    ephemeral: true,
                     components: [selectMenuRow],
                 })
                 .catch(console.error);
@@ -82,7 +86,10 @@ const command: Command = {
             // The final field should be the View Source button
             embedObj.fields = [embedObj.fields?.at(-1)];
         }
-        await interaction.reply({ embeds: [embedObj], components: [deleteButtonRow] }).catch(console.error);
+        await interaction.editReply({
+            content: "Sent documentations for " + (query.length >= 100 ? query.slice(0, 100) + "..." : query),
+        });
+        await interaction.followUp({ embeds: [embedObj], components: [deleteButtonRow] }).catch(console.error);
         return;
     },
 };
@@ -105,8 +112,9 @@ export function searchDJSDoc(doc: Doc, query: string, searchPrivate?: boolean) {
     const searchResults = doc.search(query, options);
     if (!searchResults) return null;
     return searchResults.map((res) => {
+        const parsedDescription = res.description?.trim?.() ?? "No description provided";
         // Labels and values have a limit of 100 characters
-        const description = res.description.length >= 99 ? res.description.slice(0, 96) + "..." : res.description;
+        const description = parsedDescription.length >= 99 ? parsedDescription.slice(0, 96) + "..." : parsedDescription;
         return {
             label: res.formattedName,
             description,
diff --git a/src/commands/docs/mdn.ts b/src/commands/docs/mdn.ts
@@ -31,7 +31,8 @@ const command: Command = {
             opt
                 .setName("query")
                 .setDescription("Enter the phrase you'd like to search for. Example: Array.filter")
-                .setRequired(true),
+                .setRequired(true)
+                .setAutocomplete(true),
         ),
     async execute(interaction) {
         const deleteButtonRow = new MessageActionRow().addComponents([deleteButton(interaction.user.id)]);
@@ -45,12 +46,19 @@ const command: Command = {
 
         if (!search.length) {
             embed.setColor(0xff0000).setDescription("No results found...");
-            await interaction.reply({ embeds: [embed], ephemeral: true });
+            await interaction.editReply({ embeds: [embed] }).catch(console.error);
             return;
         } else if (search.length === 1) {
             const resultEmbed = await getSingleMDNSearchResults(search[0]);
+            if (!resultEmbed) {
+                await interaction.editReply({ content: "Couldn't find any results" }).catch(console.error);
+                return;
+            }
             await interaction
-                .reply({
+                .editReply("Sent documentation for " + (query.length >= 100 ? query.slice(0, 100) + "..." : query))
+                .catch(console.error);
+            await interaction
+                .followUp({
                     embeds: [resultEmbed],
                     components: [deleteButtonRow],
                 })
@@ -59,24 +67,20 @@ const command: Command = {
             return;
         } else {
             // If there are multiple results, send a select menu from which the user can choose which one to send
-            const results = search.map((path) => `**• [${path.replace(/_|-/g, " ")}](${MDN_BASE_URL}${path})**`);
-
-            embed.setDescription(results.join("\n"));
             const selectMenuRow = new MessageActionRow().addComponents(
                 new MessageSelectMenu()
                     .setCustomId("mdnselect/" + interaction.user.id)
                     .addOptions(
                         search.map((val) => {
-                            const parsed = val.length >= 99 ? val.split("/").at(-1) : val;
+                            const parsed = val.length >= 99 ? val.split("/").slice(-2).join("/") : val;
                             return { label: parsed, value: parsed };
                         }),
                     )
                     .setPlaceholder("Select documentation to send"),
             );
             await interaction
-                .reply({
+                .editReply({
                     content: "Didn't find an exact match, please select one from below",
-                    ephemeral: true,
                     components: [selectMenuRow],
                 })
                 .catch(console.error);
@@ -87,8 +91,16 @@ const command: Command = {
 
 // Export to reuse on the select menu handler
 export async function getSingleMDNSearchResults(searchQuery: string) {
-    const res = await fetch(`${MDN_BASE_URL + searchQuery}/index.json`);
-    const doc: MdnDoc = (await res.json()).doc;
+    // Search for the match once again
+    const { index, sitemap } = await getSources();
+    const secondSearch = index.search(searchQuery, { limit: 10 }).map((id) => sitemap[<number>id].loc)[0];
+
+    const res = await fetch(`${MDN_BASE_URL + secondSearch}/index.json`).catch(console.error);
+    if (!res || !res?.ok) return null;
+    const resJSON = await res.json?.().catch(console.error);
+    if (!res.json) return null;
+
+    const doc: MdnDoc = resJSON.doc;
 
     return new MessageEmbed()
         .setColor(MDN_BLUE_COLOR)
@@ -99,7 +111,7 @@ export async function getSingleMDNSearchResults(searchQuery: string) {
         .setThumbnail(MDN_ICON_URL)
         .setDescription(doc.summary);
 }
-async function getSources(): Promise<typeof sources> {
+export async function getSources(): Promise<typeof sources> {
     if (sources.lastUpdated && Date.now() - sources.lastUpdated < 43200000 /* 12 hours */) return sources;
 
     const res = await fetch("https://developer.mozilla.org/sitemaps/en-us/sitemap.xml.gz");
@@ -109,7 +121,6 @@ async function getSources(): Promise<typeof sources> {
         loc: entry.loc.slice(MDN_BASE_URL.length),
         lastmod: new Date(entry.lastmod).valueOf(),
     }));
-
     const index = new flexsearch.Index();
     sitemap.forEach((entry, idx) => index.add(idx, entry.loc));
 
diff --git a/src/handlers/InteractionCreateHandler.ts b/src/handlers/InteractionCreateHandler.ts
@@ -1,22 +1,35 @@
 import type { Command, MyContext } from "../interfaces";
-import type { ButtonInteraction, CommandInteraction, Interaction, Message, SelectMenuInteraction } from "discord.js";
+import type {
+    AutocompleteInteraction,
+    ButtonInteraction,
+    CommandInteraction,
+    Interaction,
+    Message,
+    SelectMenuInteraction,
+} from "discord.js";
 import type { APIEmbed } from "discord-api-types";
 
 import { commandCooldownCheck, commandPermissionCheck, deleteButton } from "../utils/CommandUtils";
-import { getSingleMDNSearchResults } from "../commands/docs/mdn";
+import { getSingleMDNSearchResults, getSources } from "../commands/docs/mdn";
 import { searchDJSDoc } from "../commands/docs/djs";
 import { MessageActionRow } from "discord.js";
 
 import glob from "glob";
 import Doc from "discord.js-docs";
 
 export async function interactionCreateHandler(context: MyContext, interaction: Interaction<"cached">) {
-    if (interaction.isCommand()) {
-        commandInteractionHandler(context, interaction);
-    } else if (interaction.isButton()) {
-        buttonInteractionHandler(context, interaction);
-    } else if (interaction.isSelectMenu()) {
-        selectMenuInteractionHandler(context, interaction);
+    try {
+        if (interaction.isCommand()) {
+            await commandInteractionHandler(context, interaction);
+        } else if (interaction.isButton()) {
+            await buttonInteractionHandler(context, interaction);
+        } else if (interaction.isSelectMenu()) {
+            await selectMenuInteractionHandler(context, interaction);
+        } else if (interaction.isAutocomplete()) {
+            await autocompleteInteractionHandler(context, interaction);
+        }
+    } catch (e) {
+        console.error(e);
     }
 }
 /**
@@ -45,8 +58,10 @@ export function loadCommands(context: MyContext) {
     });
 }
 async function commandInteractionHandler(context: MyContext, interaction: CommandInteraction) {
+    await interaction.deferReply({ ephemeral: true }).catch(console.error);
+
     const command = context.commands.get(interaction.commandName);
-    if (!command) return interaction.reply({ content: "Command not found", ephemeral: true });
+    if (!command) return interaction.editReply({ content: "Command not found" }).catch(console.error);
 
     if (commandPermissionCheck(interaction, command)) return;
     if (commandCooldownCheck(interaction, command, context)) return;
@@ -55,15 +70,13 @@ async function commandInteractionHandler(context: MyContext, interaction: Comman
     } catch (e) {
         console.error(e);
         const errorMessage = "An error has occurred";
-        interaction
-            .reply({
-                content: errorMessage,
-                ephemeral: true,
-            })
-            .catch(console.error);
+        await interaction[interaction.replied ? "editReply" : "reply"]?.({
+            content: errorMessage,
+        }).catch(console.error);
     }
 }
 async function selectMenuInteractionHandler(context: MyContext, interaction: SelectMenuInteraction) {
+    await interaction.deferUpdate().catch(console.error);
     const CommandName = interaction.customId.split("/")[0];
     switch (CommandName) {
         case "mdnselect": {
@@ -74,7 +87,7 @@ async function selectMenuInteractionHandler(context: MyContext, interaction: Sel
 
             // Remove the menu and update the ephemeral message
             await interaction
-                .update({ content: "Sent documentations for " + selectedValue, components: [] })
+                .editReply({ content: "Sent documentations for " + selectedValue, components: [] })
                 .catch(console.error);
             // Send documentation
             await interaction.followUp({ embeds: [resultEmbed], components: [deleteButtonRow] }).catch(console.error);
@@ -92,14 +105,14 @@ async function selectMenuInteractionHandler(context: MyContext, interaction: Sel
 
             // Remove the menu and update the ephemeral message
             await interaction
-                .update({ content: "Sent documentations for " + selectedValue, components: [] })
+                .editReply({ content: "Sent documentations for " + selectedValue, components: [] })
                 .catch(console.error);
             // Send documentation
             await interaction.followUp({ embeds: [resultEmbed], components: [deleteButtonRow] }).catch(console.error);
             break;
         }
         default: {
-            interaction.reply({ content: "Unknown menu", ephemeral: true }).catch(console.error);
+            interaction.editReply({ content: "Unknown menu" }).catch(console.error);
         }
     }
 }
@@ -119,5 +132,40 @@ async function buttonInteractionHandler(context: MyContext, interaction: ButtonI
                 .catch(console.error);
     }
 }
-// TODO add autocomplete
-// async function autocompleteInteractionHandler(context: MyContext, interaction: AutocompleteInteraction) {}s
+
+async function autocompleteInteractionHandler(context: MyContext, interaction: AutocompleteInteraction) {
+    switch (interaction.commandName) {
+        case "djs": {
+            // Check the cache, the command will force fetch anyway
+            const doc = await Doc.fetch("stable", { force: false });
+            const query = interaction.options.getFocused() as string;
+            const singleElement = doc.get(...query.split(/\.|#/));
+            if (singleElement) {
+                await interaction
+                    .respond([{ name: singleElement.formattedName, value: singleElement.formattedName }])
+                    .catch(console.error);
+                return;
+            }
+            const searchResults = doc.search(query, { excludePrivateElements: false });
+            if (!searchResults) {
+                await interaction.respond([]).catch(console.error);
+                return;
+            }
+            await interaction
+                .respond(searchResults.map((elem) => ({ name: elem.formattedName, value: elem.formattedName })))
+                .catch(console.error);
+            break;
+        }
+        case "mdn": {
+            const query = interaction.options.getFocused() as string;
+
+            const { index, sitemap } = await getSources();
+            const search = index.search(query, { limit: 10 }).map((id) => {
+                const val = sitemap[<number>id].loc;
+                const parsed = val.length >= 99 ? val.split("/").slice(-2).join("/") : val;
+                return { name: parsed, value: parsed };
+            });
+            await interaction.respond(search).catch(console.error);
+        }
+    }
+}
