feat(help): added dropdown menus for help

package.json

@@ -38,7 +38,7 @@
 		"bufferutil": "^4.0.3",
 		"chalk": "^4.1.1",
 		"config": "^3.3.6",
-		"discord.js": "^13.0.0-dev.5ad83a6a65e5944ceb3a41fee2df40ba1f5b03e4",
+		"discord.js": "dev",
 		"erlpack": "^0.1.3",
 		"ffmpeg-static": "^4.4.0",
 		"figlet": "^1.5.0",

src/commands/general/help.ts

@@ -16,7 +16,7 @@
  */
 import Command from '@structures/command';
 import config from 'config';
-import { Client, Message, MessageButton, MessageEmbed } from 'discord.js';
+import { Client, Message, MessageButton, MessageEmbed, MessageSelectMenu, MessageSelectOptionData } from 'discord.js';
 import i18next from 'i18next';
 
 // TODO: Redo this mf
@@ -39,6 +39,7 @@ export default class extends Command {
 	public async run(message: Message, command: string): Promise<void> {
 		if(!command) {
 			const commandGroups: { name: string; embed: MessageEmbed, commands: Command[] }[] = [];
+			const categories: string[] = [];
 
 			this.client.commands.forEach((command) => {
 				const findCommand = commandGroups.find((val) => val.name === command.options.group);
@@ -51,6 +52,8 @@ export default class extends Command {
 						embed: new MessageEmbed(),
 						commands: [command],
 					});
+
+					categories.push(command.options.group!);
 				}
 			});
 
@@ -67,6 +70,7 @@ export default class extends Command {
 				});
 			});
 
+			const dropDownOptions: MessageSelectOptionData[] = [];
 			let currentPage = 0;
 
 			const nextCategoryBtn = new MessageButton();
@@ -80,10 +84,20 @@ export default class extends Command {
 			previousCategoryBtn.setStyle('SECONDARY');
 			previousCategoryBtn.setDisabled(true);
 
+			const chooseHelpCategory = new MessageSelectMenu();
+			chooseHelpCategory.setCustomID('chooseHelpCategory');
+			chooseHelpCategory.setPlaceholder(i18next.t('commands:help.categoryPlaceholder'));
+
+			for(const category of categories) {
+				dropDownOptions.push({ label: category, value: category });
+			}
+
+			chooseHelpCategory.addOptions(dropDownOptions);
+
 			const helpMsg = await message.channel.send({
 				content: i18next.t('commands:help.helpScreenBtnHelp'),
 				embeds: [commandGroups[0]!.embed],
-				components: [[previousCategoryBtn, nextCategoryBtn]],
+				components: [[previousCategoryBtn, nextCategoryBtn], [chooseHelpCategory]],
 			});
 
 			const buttonCollector = helpMsg.channel.createMessageComponentInteractionCollector({ time: 60000 });
@@ -94,18 +108,20 @@ export default class extends Command {
 
 					if(currentPage + 1 === commandGroups.length) {
 						nextCategoryBtn.setDisabled(true);
+						previousCategoryBtn.setDisabled(false);
 					}
 
 					if(currentPage !== 0) {
-						previousCategoryBtn.setDisabled(false);
+						nextCategoryBtn.setDisabled(false);
+						previousCategoryBtn.setDisabled(true);
 					}
 
 					await interaction.update({
 						content: i18next.t('commands:help.helpScreenBtnHelp'),
 						embeds: [commandGroups[currentPage]!.embed],
-						components: [[previousCategoryBtn, nextCategoryBtn]],
+						components: [[previousCategoryBtn, nextCategoryBtn], [chooseHelpCategory]],
 					});
-				} else {
+				} else if(interaction.customID === 'previousCategoryBtn') {
 					currentPage--;
 
 					if(currentPage === 0) {
@@ -115,12 +131,36 @@ export default class extends Command {
 
 					if(currentPage !== 0) {
 						nextCategoryBtn.setDisabled(false);
+						previousCategoryBtn.setDisabled(true);
 					}
 
 					await interaction.update({
 						content: i18next.t('commands:help.helpScreenBtnHelp'),
 						embeds: [commandGroups[currentPage]!.embed],
-						components: [[previousCategoryBtn, nextCategoryBtn]],
+						components: [[previousCategoryBtn, nextCategoryBtn], [chooseHelpCategory]],
+					});
+				} else if(interaction.customID === 'chooseHelpCategory') {
+					currentPage = categories.indexOf(interaction.values[0]);
+
+					if(currentPage === 0) {
+						previousCategoryBtn.setDisabled(true);
+						nextCategoryBtn.setDisabled(false);
+					}
+
+					if(currentPage !== 0) {
+						nextCategoryBtn.setDisabled(false);
+						previousCategoryBtn.setDisabled(true);
+					}
+
+					if(currentPage + 1 === commandGroups.length) {
+						nextCategoryBtn.setDisabled(true);
+						previousCategoryBtn.setDisabled(false);
+					}
+
+					await interaction.update({
+						content: i18next.t('commands:help.helpScreenBtnHelp'),
+						embeds: [commandGroups[currentPage]!.embed],
+						components: [[previousCategoryBtn, nextCategoryBtn], [chooseHelpCategory]],
 					});
 				}
 			});
@@ -132,7 +172,6 @@ export default class extends Command {
 				await helpMsg.edit({
 					content: i18next.t('commands:help.helpTimedOut'),
 					embeds: [commandGroups[currentPage]!.embed],
-					components: [[previousCategoryBtn, nextCategoryBtn]],
 				});
 			});
 		} else {

src/index.ts

@@ -87,8 +87,6 @@ client.on('message', async (msg) => {
 
 	msg.channel.startTyping();
 
-	await i18next.changeLanguage('owo');
-
 	if(findCommand.options.ownerOnly && msg.author.id !== config.get('owner')) {
 		await msg.reply(i18next.t('commands:errors.ownerOnly'));
 		return;
@@ -110,24 +108,23 @@ client.on('message', async (msg) => {
 		info(`Finished running ${findCommand.options.name} in ${msg.guild ? msg.guild.name : `${msg.author.username} DMs`}`, ELoggingScope.Command);
 		msg.channel.stopTyping();
 	} catch(e) {
+		console.error(e);
 		error(`An error has occurred while running ${findCommand.options.name}!\n${e.message}`, ELoggingScope.Command);
 		await msg.reply(i18next.t('commands:errors.runError', { error: e.message }));
 		msg.channel.stopTyping();
 	}
-
-	await i18next.changeLanguage('en-US');
 });
 
 client.on('ready', async () => {
 	info('Loading translations...', ELoggingScope.Startup);
 
 	await i18next.use(Fluent).use(Backend).init({
+		supportedLngs: ['en-US', 'owo'],
 		lng: 'en-US',
-		ns: ['common', 'commands'],
+		fallbackLng: 'en-US',
 		defaultNS: 'common',
 		fallbackNS: 'common',
-		fallbackLng: 'en-US',
+		ns: ['common', 'commands'],
-		supportedLngs: ['en-US', 'owo'],
 		backend: {
 			backends: [FSBackend],
 			backendOptions: [

translations/en-US/commands.json

@@ -14,11 +14,12 @@
 		"commandArg": "The command to see",
 		"unknownCommand": "Unknown command given!",
 		"embedName": "Help Menu!",
-		"helpScreenBtnHelp": "Press the \"Forward\" or \"Back\" Button to move categories!",
+		"helpScreenBtnHelp": "Press the \"Forward\" or \"Back\" Button to move categories! Or alternatively, you can select the category you want on the dropdown menu.",
 		"nextCategoryBtn": "Next Category",
 		"previousCategoryBtn": "Previous Category",
 		"helpTimedOut": "Timed Out",
-		"commandDescription": "Name: { $name }\nCategory: { $category }\nDescription: { $description }\nUsage: { $usage }"
+		"commandDescription": "Name: { $name }\nCategory: { $category }\nDescription: { $description }\nUsage: { $usage }",
+		"categoryPlaceholder": "Choose a category!"
 	},
 	"errors": {
 		"ownerOnly": "Only the bot owner can run this command!",

translations/owo/commands.json

@@ -14,11 +14,12 @@
 		"commandArg": "The command to see",
 		"unknownCommand": "Unknyown command given (・`ω´・)",
 		"embedName": "Hewp Menyu (・`ω´・)",
-		"helpScreenBtnHelp": "Pwess the \"Fowwawd\" ow \"Back\" Button to muv categowies owo ",
+		"helpScreenBtnHelp": "Pwess the \"Fowwawd\" ow \"Back\" Button to muv categowies owo. Ow awtewnyativewy, you can sewect the categowy you want on the dwopdown menyu.",
 		"nextCategoryBtn": "Nyext Categowy",
 		"previousCategoryBtn": "Pwevious Categowy",
 		"helpTimedOut": "Timed Out",
-		"commandDescription": "Nyame: { $name }\nCategowy: { $category }\nDescwiption: { $description }\nUsage: { $usage }"
+		"commandDescription": "Nyame: { $name }\nCategowy: { $category }\nDescwiption: { $description }\nUsage: { $usage }",
+		"categoryPlaceholder": "Choose a categowy (・`ω´・)"
 	},
 	"errors": {
 		"ownerOnly": "Onwy the bot ownyew can wun this command ^w^",

yarn.lock

@@ -481,6 +481,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@discordjs/builders@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "@discordjs/builders@npm:0.1.1"
+  dependencies:
+    discord-api-types: ^0.18.1
+    tslib: ^2.3.0
+  checksum: 7bf05b6336ec4f0bffd3ad7280cea8d3094ccbb16041d7796578a1daed3bffb8b06b23f0d006cd04b4de5f9170707e3c43bd29747239bd1186b81850d7c50a1d
+  languageName: node
+  linkType: hard
+
 "@discordjs/collection@npm:^0.1.6":
   version: 0.1.6
   resolution: "@discordjs/collection@npm:0.1.6"
@@ -1361,7 +1371,7 @@ __metadata:
     chai: ^4.3.4
     chalk: ^4.1.1
     config: ^3.3.6
-    discord.js: ^13.0.0-dev.5ad83a6a65e5944ceb3a41fee2df40ba1f5b03e4
+    discord.js: dev
     erlpack: ^0.1.3
     eslint: ^7.29.0
     eslint-formatter-pretty: ^4.1.0
@@ -2561,10 +2571,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"discord.js@npm:^13.0.0-dev.5ad83a6a65e5944ceb3a41fee2df40ba1f5b03e4":
+"discord.js@npm:dev":
-  version: 13.0.0-dev.edab5af.1624996138
+  version: 13.0.0-dev.64f093f.1625054868
-  resolution: "discord.js@npm:13.0.0-dev.edab5af.1624996138"
+  resolution: "discord.js@npm:13.0.0-dev.64f093f.1625054868"
   dependencies:
+    "@discordjs/builders": ^0.1.1
     "@discordjs/collection": ^0.1.6
     "@discordjs/form-data": ^3.0.1
     "@sapphire/async-queue": ^1.1.4
@@ -2572,8 +2583,8 @@ __metadata:
     abort-controller: ^3.0.0
     discord-api-types: ^0.19.0-next.f393ba520d7d6d2aacaca7b3ca5d355fab614f6e
     node-fetch: ^2.6.1
-    ws: ^7.5.0
+    ws: ^7.5.1
-  checksum: c0f58001a02ed4ac63bb8f5d50c6db90a3d42120a5d23a90a25430f8667efa9a271e194b91e704d7eb1dd90fe91eb5c9acd5daebd5f84a3510d2bb621931f045
+  checksum: 2e662cecd041933d44ab775c95fc7681d084f070dc2ca77e5d83b1fdde62fbb7e9d79ed2fec946d37dd66768354ef7f966ca9aae06f021f3dbd07aa22c5d7a9e
   languageName: node
   linkType: hard
 
@@ -7383,7 +7394,7 @@ typescript@^4.3.4:
   languageName: node
   linkType: hard
 
-"ws@npm:^7.4.4, ws@npm:^7.5.0":
+"ws@npm:^7.4.4, ws@npm:^7.5.1":
   version: 7.5.1
   resolution: "ws@npm:7.5.1"
   peerDependencies: