refactor(modals): added modals to suggest and report cmds

ThatsLiamS · Oct 14, 2022 · 0453b86 · 0453b86
1 parent 01ce1f3
commit 0453b86
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 57 deletions.
diff --git a/src/commands/information/report.js b/src/commands/information/report.js
@@ -1,52 +1,90 @@
 /* Import required modules and files */
-const { SlashCommandBuilder, EmbedBuilder, WebhookClient } = require('discord.js');
+const { SlashCommandBuilder, EmbedBuilder, WebhookClient, ModalBuilder, ActionRowBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
+
+const format = (string) => string.split('\n').map((line) => '> ' + line).join('\n');
 
 module.exports = {
 	name: 'report',
-	description: 'Report a bug/issue to the developers!',
+	description: 'Submit a bug report to the developers!',
 	usage: '`/report <description>`',
 
 	permissions: [],
-	guildOnly: true,
+	ownerOnly: false,
+	guildOnly: false,
+	developerOnly: false,
 
 	data: new SlashCommandBuilder()
 		.setName('report')
-		.setDescription('Report a bug/issue to the developers!')
-		.setDMPermission(false)
-
-		.addStringOption(option => option
-			.setName('description')
-			.setDescription('Explain the issue you are having')
-			.setRequired(true),
-		),
+		.setDescription('Submit a bug report to the developers!')
+		.setDMPermission(true),
 
 	error: false,
 	defer: false,
 
 	/**
-	 * Report a bug/issue to the developers.
+	 * Submit a bug report to the developers.
 	 *
 	 * @param {object} interaction - Discord Slash Command object
 	 * @param {object} client - Discord Client object
 	 *
 	 * @returns {boolean}
 	**/
-	execute: ({ interaction, client }) => {
-
-		const avatarURL = interaction.guild.iconURL() ? interaction.guild.iconURL() : 'https://i.imgur.com/yLv2YVnh.jpg';
-		const embed = new EmbedBuilder()
-			.setColor('#0099ff')
-			.setDescription(`**${client.user.tag}**\n${interaction.options.getString('description')}`)
-			.setAuthor({ name: interaction.user.username, iconURL: interaction.user.displayAvatarURL() })
-			.setFooter({ text: `ID: ${interaction.member.id}` })
-			.setTimestamp();
-
-		/* Locate and send the webhook */
-		const webhook = new WebhookClient({ url: process.env['ReportWebhook'] });
-		webhook.send({ username: interaction.guild.name, avatarURL, embeds: [embed] });
-
-		/* Returns true to enable the cooldown */
-		interaction.reply({ content: 'Thank you for helping us make Coin Flipper even better.', ephemeral: true });
-		return true;
+	execute: async ({ interaction, client }) => {
+
+		/* Create modal to display */
+		const modalPopup = new ModalBuilder()
+			.setCustomId(`report-${interaction.user.id}-${client.user.id}`).setTitle('Coin Flipper\'s Bug Report!');
+
+		/* Add input fields */
+		const title = new ActionRowBuilder().addComponents(
+			new TextInputBuilder().setCustomId('reportTitle').setLabel('Short title')
+				.setStyle(TextInputStyle.Short).setMaxLength(150).setMinLength(5),
+		);
+		const description = new ActionRowBuilder().addComponents(
+			new TextInputBuilder().setCustomId('reportDescription').setLabel('A clear and concise description')
+				.setStyle(TextInputStyle.Paragraph).setMaxLength(2000).setMinLength(50),
+		);
+		const reproduce = new ActionRowBuilder().addComponents(
+			new TextInputBuilder().setCustomId('reportReproduce').setLabel('Steps to reproduce the behavior')
+				.setStyle(TextInputStyle.Paragraph).setMaxLength(2000).setMinLength(50)
+				.setPlaceholder('1. Go to \'....\'\n2. Click on \'....\'\n3. Scroll down to \'....\''),
+		);
+
+		/* Display the modal */
+		modalPopup.addComponents(title, description, reproduce);
+		await interaction.showModal(modalPopup);
+
+		/* Get the responses */
+		const filter = (modal) => modal.customId === `report-${interaction.user.id}-${client.user.id}`;
+		const res = interaction.awaitModalSubmit({ filter, time: 150_000 })
+			.then(async (modal) => {
+
+				await modal.deferReply({ ephemeral: true });
+
+				const embed = new EmbedBuilder()
+					.setColor('#0099ff')
+					.setTitle(`${modal.fields.getTextInputValue('reportTitle')}`)
+					.setDescription(`**Description:**\n${format(modal.fields.getTextInputValue('reportDescription'))}\n\n**Steps to Reproduce:**\n${format(modal.fields.getTextInputValue('reportReproduce'))}`)
+					.setAuthor({ name: modal.user.username, iconURL: modal.user.displayAvatarURL() })
+					.setFooter({ text: `User ID: ${modal.member.id}` })
+					.setTimestamp();
+
+				/* Locate and send the webhook */
+				const webhook = new WebhookClient({ url: process.env['ReportWebhook'] });
+				webhook.send({ username: client.user.username, avatarURL: client.user.displayAvatarURL(), embeds: [embed] });
+
+				/* Returns true to enable the cooldown */
+				modal.followUp({ content: 'Thank you for helping us make Coin Flipper even better.', ephemeral: true });
+				return true;
+
+			})
+			/* If they didn't response */
+			.catch(async () => {
+				await interaction.followUp({ content: 'Sorry, you took too long to repond.' });
+				return false;
+			});
+
+		/* Returns boolean to enable the cooldown */
+		return res;
 	},
 };
diff --git a/src/commands/information/suggest.js b/src/commands/information/suggest.js
@@ -1,52 +1,94 @@
 /* Import required modules and files */
-const { SlashCommandBuilder, EmbedBuilder, WebhookClient } = require('discord.js');
+const { SlashCommandBuilder, EmbedBuilder, WebhookClient, ModalBuilder, ActionRowBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
+
+const format = (string) => string.split('\n').map((line) => '> ' + line).join('\n');
 
 module.exports = {
 	name: 'suggest',
 	description: 'Suggest an improvement, command or feature!',
-	usage: '`/suggest <description>`',
+	usage: '`/suggest',
 
 	permissions: [],
-	guildOnly: true,
+	ownerOnly: false,
+	guildOnly: false,
+	developerOnly: false,
 
 	data: new SlashCommandBuilder()
 		.setName('suggest')
 		.setDescription('Suggest an improvement, command or feature!')
-		.setDMPermission(false)
-
-		.addStringOption(option => option
-			.setName('description')
-			.setDescription('Include a detailed description of your suggestion')
-			.setRequired(true),
-		),
+		.setDMPermission(true),
 
 	error: false,
 	defer: false,
 
 	/**
-	 * Suggest an improvement, command or feature.
+	 * Submit a bug report to the developers.
 	 *
 	 * @param {object} interaction - Discord Slash Command object
 	 * @param {object} client - Discord Client object
 	 *
 	 * @returns {boolean}
 	**/
-	execute: ({ interaction, client }) => {
-
-		const avatarURL = interaction.guild.iconURL() ? interaction.guild.iconURL() : 'https://i.imgur.com/yLv2YVnh.jpg';
-		const embed = new EmbedBuilder()
-			.setColor('#0099ff')
-			.setDescription(`**${client.user.tag}**\n${interaction.options.getString('description')}`)
-			.setAuthor({ name: interaction.user.username, iconURL: interaction.user.displayAvatarURL() })
-			.setFooter({ text: `ID: ${interaction.member.id}` })
-			.setTimestamp();
-
-		/* Locate and send the webhook */
-		const webhook = new WebhookClient({ url: process.env['SuggestionWebhook'] });
-		webhook.send({ username: interaction.guild.name, avatarURL, embeds: [embed] });
-
-		/* Returns true to enable the cooldown */
-		interaction.reply({ content: 'Your suggestion has been sent to my developers.', ephemeral: true });
-		return true;
+	execute: async ({ interaction, client }) => {
+
+		/* Create modal to display */
+		const modalPopup = new ModalBuilder()
+			.setCustomId(`report-${interaction.user.id}-${client.user.id}`).setTitle('Coin Flipper\'s Bug Report!');
+
+		/* Add input fields */
+		const title = new ActionRowBuilder().addComponents(
+			new TextInputBuilder().setCustomId('title').setLabel('Short title')
+				.setStyle(TextInputStyle.Short).setMaxLength(150).setMinLength(5),
+		);
+		const description = new ActionRowBuilder().addComponents(
+			new TextInputBuilder().setCustomId('description').setLabel('A clear and concise description')
+				.setStyle(TextInputStyle.Paragraph).setMaxLength(2000).setMinLength(50),
+		);
+		const reproduce = new ActionRowBuilder().addComponents(
+			new TextInputBuilder().setCustomId('solve').setLabel('Does this solve a bug?')
+				.setStyle(TextInputStyle.Paragraph).setMaxLength(1000).setMinLength(2)
+				.setPlaceholder('Yes, it always frustrates me when [....]'),
+		);
+
+		/* Display the modal */
+		modalPopup.addComponents(title, description, reproduce);
+		await interaction.showModal(modalPopup);
+
+		/* Get the responses */
+		const filter = (modal) => modal.customId === `report-${interaction.user.id}-${client.user.id}`;
+		const res = interaction.awaitModalSubmit({ filter, time: 150_000 })
+			.then(async (modal) => {
+
+				await modal.deferReply({ ephemeral: true });
+
+				const embed = new EmbedBuilder()
+					.setColor('#0099ff')
+					.setTitle(`${modal.fields.getTextInputValue('title')}`)
+					.setDescription(`**Description:**\n${format(modal.fields.getTextInputValue('description'))}`)
+					.setAuthor({ name: modal.user.username, iconURL: modal.user.displayAvatarURL() })
+					.setFooter({ text: `User ID: ${modal.member.id}` })
+					.setTimestamp();
+
+				if (modal.fields.getTextInputValue('description')) {
+					embed.addFields({ name: '__Does it solve a bug?__', value: `${format(modal.fields.getTextInputValue('solve'))}` });
+				}
+
+				/* Locate and send the webhook */
+				const webhook = new WebhookClient({ url: process.env['SuggestionWebhook'] });
+				webhook.send({ username: client.user.username, avatarURL: client.user.displayAvatarURL(), embeds: [embed] });
+
+				/* Returns true to enable the cooldown */
+				modal.followUp({ content: 'Thank you, your suggest has been sent to our developers', ephemeral: true });
+				return true;
+
+			})
+			/* If they didn't response */
+			.catch(async () => {
+				await interaction.followUp({ content: 'Sorry, you took too long to repond.' });
+				return false;
+			});
+
+		/* Returns boolean to enable the cooldown */
+		return res;
 	},
 };