Trying to figure out what code goes into the component files and not the command files.

[mh1723]

Im very new, be gentle. Ive made a lot of progress but Im still rather stumped around component handlers. I can get my slash commands to work, but I dont think its the best way. I have the slash command files, interactionCreate, handleComponents, handleCommands, handleEvents and then matching folder structure (see below). Here's the one command cant seem to figure out.
I took out my ridiculous number of console.log statements. From them I could see that the code get to the role_select.js file. In discord I get the dm and I can pick the roles (which I expect since that's still in the role.js) but it doesnt capture the roles I selected. I see that the collector ends but thats it besides an error in the dm saying the interaction failed.

It's subcommand

const {
	SlashCommandSubcommandBuilder,
	ActionRowBuilder,
	StringSelectMenuBuilder,
} = require('discord.js');
const Guild = require('../../schemas/guild');
const chalk = require('chalk');

module.exports = {
	data: new SlashCommandSubcommandBuilder()
		.setName('roles')
		.setDescription('Updates the role info'),
	execute: async (interaction) => {
		try {
			const guildRoles = interaction.guild.roles.cache;

			// Create the options for the select menu
			const selectMenuOptions = guildRoles.map((role) => ({
				label: role.name,
				value: role.id,
			}));
			console.log(
				chalk.yellow(
					'roles -> selectMenuOptions: ',
					JSON.stringify(selectMenuOptions),
				),
			);

			const selectMenu = new StringSelectMenuBuilder()
				.setCustomId('role_select')
				.setPlaceholder('Select roles')
				.setMinValues(1) // Allow at least 1 role to be selected
				.setMaxValues(selectMenuOptions.length) // Allow maximum number of roles to be selected
				.addOptions(selectMenuOptions);

			const actionRow = new ActionRowBuilder().addComponents(
				selectMenu,
			);
			await interaction.deferReply({ ephemeral: true });
			await interaction.followUp({
				content:
					'to select roles based on event completetions\ncheck your DM, Click <https://discord.com/channels/@me> .',
				ephemeral: true,
			});
			console.log(chalk.bgMagenta('inside roles execute'));
			const dmChannel = await interaction.user.createDM();

			await dmChannel.send({
				content:
					'Select the roles you want to assign to the user when they complete an event:',
				components: [actionRow],
			});
		} catch (error) {
			console.error(chalk.bgRed(error));
			console.error(chalk.bgRed(error.stack));
			const dmChannel = await interaction.user.createDM();
			await dmChannel.send({
				content:
					'There was an error trying to run the role update command!',
			});
		}
	},
};

The component file:

const chalk = require('chalk');
const Guild = require('../../schemas/guild');

module.exports = {
	data: {
		customId: 'role_select',
	},
	async execute(interaction, client) {
		console.log(chalk.bgMagenta('---------------inside role_select execute-----------------'));
		try {
			const dmChannel = await interaction.user.createDM();
			const filter = (componentInteraction) =>
				componentInteraction.customId === 'role_select';

			const collector =
				dmChannel.createMessageComponentCollector({
					filter,
					time: 600000,
				});
			collector.on('collect', async (componentInteraction) => {
				const selectedRoles = componentInteraction.values;
				console.log(
					chalk.green('selectedRoles is: ', selectedRoles),
				);
				let guildProfile = await Guild.findOne({
					guildId: interaction.guild.id,
				});
				if (!guildProfile) {
					guildProfile = await Guild.create({
						guildId: interaction.guild.id,
						guildName: interaction.guild.name,
						roles: [],
						members: [],
						successChannel: [],
					});
				}

				// Update the role info
				guildProfile.roles = interaction.guild.roles.cache
					.filter((role) => selectedRoles.includes(role.id))
					.map((role) => {
						return {
							roleId: role.id,
							roleName: role.name,
						};
					});

				await guildProfile.save();

				/* dmChannel.send({
					content: 'Role info updated!',
				}); */

				collector.stop();
			});

			collector.on('end', () => {
				if (!collector || collector.ended) {
					console.log(chalk.blueBright('collector ended'));
					return;
				}
				dmChannel.send({
					content: 'No role selected. Please try again.',
				});
			});
		/* 	await interaction.editReply({
				content: 'Role  at end info updated!',
				ephemeral: true,
			}); */
		}
		catch (error) {
			console.error(chalk.bgRed(error));
			console.error(chalk.bgRed(error.stack));
			const dmChannel = await interaction.user.createDM();
			await dmChannel.send({
				content:
					'There was an error while trying to add roles in role select!',
			});
		}
	},
};

the selectMenu case from handleComponents:

case 'selectMenus':
					console.log(
						chalk.bgCyan('handleComponents case: selectMenus'),
					);
					for (const file of componentFiles) {
						const menu = require(`../../components/${folder}/${file}`);
						selectMenus.set(menu.data.customId, menu);
					}
					break;

finally from the interactionCreate.js:

else if (interaction.isStringSelectMenu()) {
			try {
				const { selectMenus } = client;
				const { customId } = interaction;
				const menu = selectMenus.get(customId);
				if (!menu) {
					new Error('InreractionComplete -> Select menu code not found!');
					console.log(
						chalk.cyan(
							'interactionCreate -> isStringSelectMenu: Select menu code not found!',
							menu,
						),
					);
					return;
				}
				await menu.execute(interaction, client);
			} catch (error) {
				console.error(chalk.bgRed(error));
				console.error(chalk.bgRed(error.stack));
				await interaction.reply({
					content:
						'There was an error while executing this command!',
					ephemeral: true,
				});
			}
		}

-src
bot.js
-commands
-tools
channel.js
event_Complete.js
guild_update.js
members.js
roles.js
tag.js
-components
-buttons
test_button.js
-selectMenus
role_select.js
test_menu.js
-events
-client
guildCreate.js
guildDelete.js
interactionCreate.js
ready.js
-mongo
connected.js
connecting.js
disconnected.js
error.js
-functions
-handlers
handleCommands.js
handleComponents.js
handleEvents.js

[Qjuh]

In your component file the parameter interaction will already be the StringSelectMenuInteraction, you starting a collector in there would basically start a new collector every time they select something. Don’t do that, instead put the code of your collect event there directly into the execute of the component file.
Secondly I don’t see why you would do all that in DMs when you already have an ephemeral reply you could attach that SelectMenu to so the user doesn’t have to switch channels to complete the process.
And lastly join the discord support server to continue this in a forum thread on there.