finish button selector and fix rolesNew not responding after completing the prompt

src/listeners/buttons.ts

@@ -1,7 +1,7 @@
 import { ApplyOptions } from '@sapphire/decorators';
 import { Listener, ListenerOptions } from '@sapphire/framework';
-import { ComponentType, GuildMember, Interaction, InteractionType } from 'discord.js';
+import { ActionRowBuilder, ButtonBuilder, ButtonStyle, ComponentType, GuildMember, Interaction, InteractionType } from 'discord.js';
-import { RolesChecker, RolesMessage } from '../lib/types';
+import { RolesMessage } from '../lib/types';
 
 @ApplyOptions<ListenerOptions>({
 	event: 'interactionCreate'
@@ -12,47 +12,67 @@ export class UserEvent extends Listener {
 
 		switch (interaction.componentType) {
 			case ComponentType.Button: {
-				if (interaction.customId.startsWith('showRoleSelector-')) {
+				switch (interaction.customId.split('-')[0]) {
-					let id = interaction.customId.split('-')[1];
+					case 'showRoleSelector': {
-					let data = await RolesMessage.findByPk(id);
+						let id = interaction.customId.split('-')[1];
-					if (!data) {
+						let data = await RolesMessage.findByPk(id);
-						return await interaction.reply({ content: 'Someone messed up big time.', ephemeral: true });
+						if (!data) {
-					}
+							return await interaction.reply({ content: 'Someone messed up big time.', ephemeral: true });
-					let roleIds = data.dataValues.roles;
-					let roles = [];
-					for (const id of roleIds) {
-						let r = await interaction.guild?.roles.fetch(id);
-						if (r) {
-							roles.push(r);
 						}
+						let roleIds = data.dataValues.roles;
+						let roles = [];
+						for (const id of roleIds) {
+							let r = await interaction.guild?.roles.fetch(id);
+							if (r) {
+								roles.push(r);
+							}
+						}
+
+						// console.log(roles);
+						// console.log(userRoles);
+						// console.log(newRoles);
+
+						if (data.dataValues.style == 'buttons') {
+							let size = 5;
+							let arrayOfArrays = [];
+							for (let i = 0; i < roles.length; i += size) {
+								arrayOfArrays.push(roles.slice(i, i + size));
+							}
+
+							// arrays with all the buttons and if the user has them are now in arrayOfArrays, figure out how to get that in a message later:tm:
+
+							let rows: ActionRowBuilder[] = [];
+
+							for (const roles of arrayOfArrays) {
+								let row = new ActionRowBuilder();
+
+								for (const role of roles) {
+									row.addComponents(
+										new ButtonBuilder()
+											.setLabel(role.name)
+											.setCustomId(`toggleRole-${role.id}`)
+											.setStyle(ButtonStyle.Primary)
+									);
+								}
+
+								rows.push(row);
+							}
+
+							await interaction.reply({ content: undefined, components: rows as any, ephemeral: true });
+						}
+
+						return;
 					}
-
+					case 'toggleRole': {
-					let userRoles = (interaction.member as GuildMember).roles.cache;
+						const id = interaction.customId.split('-')[1]
-
+						if ((interaction.member as GuildMember).roles.cache.has(id)) {
-					let newRoles: RolesChecker[] = [];
+							await (interaction.member as GuildMember).roles.remove(id)
-					for (const role of roles) {
+							await interaction.reply({content: `You already had <@&${id}>, so I removed it from you.`, ephemeral: true})
-						if (userRoles.has(role.id)) {
-							newRoles.push({ role, has: true });
 						} else {
-							newRoles.push({ role, has: false });
+							await (interaction.member as GuildMember).roles.add(id)
+							await interaction.reply({content: `You didn't have <@&${id}>, so I gave it to you.`, ephemeral: true})
 						}
 					}
-
-					console.log(roles);
-					console.log(userRoles);
-					console.log(newRoles);
-
-					if (data.dataValues.style == 'buttons') {
-						let size = 5;
-						let arrayOfArrays = [];
-						for (let i = 0; i < newRoles.length; i += size) {
-							arrayOfArrays.push(newRoles.slice(i, i + size));
-						}
-
-						// arrays with all the buttons and if the user has them are now in arrayOfArrays, figure out how to get that in a message later:tm:
-					}
-
-					return;
 				}
 			}
 		}

src/listeners/ready.ts

@@ -48,6 +48,9 @@ export class UserEvent extends Listener {
 			embedColor: {
 				type: DataTypes.STRING
 			},
+			buttonLabel: {
+				type: DataTypes.STRING
+			},
 			roles: {
 				type: DataTypes.ARRAY(DataTypes.STRING),
 				allowNull: false

src/listeners/rolesNew.ts

@@ -14,6 +14,7 @@ export class UserEvent extends Listener {
 		let title = interaction.fields.fields.get('embedTitle')?.value;
 		let description = interaction.fields.fields.get('embedDescription')?.value;
 		let color: string = interaction.fields.fields.get('embedColor')?.value as string;
+		let label = interaction.fields.fields.get('buttonLabel')?.value;
 
 		let regex = /[0-9A-F]{6}/gi;
 		let matches = color.match(regex);
@@ -47,8 +48,8 @@ export class UserEvent extends Listener {
 		} catch (err) {
 			await interaction.editReply({
 				content: "You didn't make a decision in time. Here's the data you put into the modal, as an embed.",
-				embeds: [{ title, description, color: Number(color), fields: [{ name: 'Color', value: color }] }],
+				embeds: [{ title, description, color: Number(color), fields: [{ name: 'Color', value: color }, {name: 'Button Label', value: `${label}`}] }],
-				components: []
+				components: [{type: 1, components: [{type: ComponentType.Button, label, customId: 'ignore', style: ButtonStyle.Primary, disabled: true}]}]
 			});
 			return null;
 		}
@@ -92,7 +93,7 @@ export class UserEvent extends Listener {
 			await interaction.editReply({
 				content: "You didn't make a decision in time. Here's the data you put into the modal, as an embed.",
 				embeds: [{ title, description, color: Number(color), fields: [{ name: 'Color', value: color }] }],
-				components: []
+				components: [{type: 1, components: [{type: ComponentType.Button, label, customId: 'ignore', style: ButtonStyle.Primary, disabled: true}]}]
 			});
 			return null;
 		}
@@ -106,11 +107,12 @@ export class UserEvent extends Listener {
 			embedTitle: title,
 			embedDescription: description,
 			embedColor: color,
+			buttonLabel: label,
 			roles: roles.values,
 			style: type == 'selectButtons' ? 'buttons' : 'dropdown'
 		})
 
-		console.log(data)
+		await interaction.editReply({content: `Alright. The roles menu has been created, with the ID ${data.dataValues.id}. Use \`/roles show ${data.dataValues.id}\` in any channel to display the menu.`, components: [], embeds: []})
 
 		return;
 	}