better UI/UX for inventory view

commands/inventory.js

@@ -1,4 +1,4 @@
-const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');
+const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, SelectMenuBuilder } = require('discord.js');
 const { Inventory, addInventory } = require('../structures/inventory');
 
 const action = ['ditch', 'drop', 'forget', 'throw out', 'leave', 'set down', 'let go of'];
@@ -211,13 +211,52 @@ module.exports = {
       }
 
       if (args[0].name == 'view') {
-        // Display Inventory
+        let items = new SelectMenuBuilder()
+          .setCustomId(`inventorySelect-${interaction.member.user.id}`)
+          .setPlaceholder('Select Item to view')
+          .addOptions(
+            {
+              label: 'View All',
+              description: 'View a list of all your inventory items',
+              value: 'all',
+            }
+          )
 
+        for (let i = 0; i < inventory.guilds[GuildDB.serverID].items.length; i++) {
+          if (inventory.guilds[GuildDB.serverID].items[i].type == 'firearm') {
+            items.addOptions({
+              label: inventory.guilds[GuildDB.serverID].items[i].weaponType,
+              description: 'View this items description',
+              value: `${i}`
+            })
+          } else {
+            items.addOptions({
+              label: inventory.guilds[GuildDB.serverID].items[i].name,
+              description: 'View this items description',
+              value: `${i}`
+            })
+          }
+        }
+        
+        const opt = new ActionRowBuilder().addComponents(items);
+
+        interaction.send({ components: [opt], flags: (1 << 6) })
+
+        client.once("interactionCreate", async MenuInteraction => {
+          if(!MenuInteraction.isSelectMenu()) return;
+          if (!MenuInteraction.customId.endsWith(MenuInteraction.member.user.id)) {
+            return MenuInteraction.reply({
+              content: "This button is not for you",
+              flags: (1 << 6)
+            })
+          }
+          
+          if (MenuInteraction.values[0] == 'all') {
             let inventoryEmbed = new EmbedBuilder()
               .setColor(client.config.Colors.Default)
               .setTitle('Your Inventory')
           
-        let description = `To see detials on an Item use \`/inventory item [item number]\`\n\n\`\`\``
+            let description = `To see detials on an Item use \`/inventory view\` and select the item to view\n\n\`\`\``
             for (let i = 0; i < inventory.guilds[GuildDB.serverID].items.length; i++) {
               if (inventory.guilds[GuildDB.serverID].items[i].type == 'firearm') description += `${i+1}. ${inventory.guilds[GuildDB.serverID].items[i].weaponType} - ${inventory.guilds[GuildDB.serverID].items[i].description}\n`;
               else description += `${i+1}. ${inventory.guilds[GuildDB.serverID].items[i].name} - ${inventory.guilds[GuildDB.serverID].items[i].description}\n`
@@ -226,35 +265,9 @@ module.exports = {
     
             inventoryEmbed.setDescription(description);
     
-        return interaction.send({ embeds: [inventoryEmbed], flags: (1 << 6) });
+            return MenuInteraction.update({ embeds: [inventoryEmbed], components: [], flags: (1 << 6) });
-      
+          } else {
-      } else if (args[0].name == 'wallet') {
+            let item = inventory.guilds[GuildDB.serverID].items[MenuInteraction.values[0]];
-        // Display wallet
-        
-        let item = inventory.guilds[GuildDB.serverID].items[0];
-        let ID = `${client.exists(item.ID.firstname) ? item.ID.firstname : '...'} ${client.exists(item.ID.lastname) ? item.ID.lastname : '...'} | ${client.exists(item.ID.dob) ? item.ID.dob : 'N/A'} | ${client.exists(item.ID.addr) ? item.ID.addr : 'N/A'}`
-
-        let walletEmbed = new EmbedBuilder()
-          .setTitle(`Your Wallet`)
-          .setColor(client.config.Colors.Default)
-          .addFields(
-            { name: '**Cash**', value: `$${item.cash.toFixed(2)}`, inline: true },
-            { name: '**ID**', value: ID, inline: true });
-
-        return interaction.send({ embeds: [walletEmbed] });
-
-      } else if (args[0].name == 'item') {
-        // Display Item Data
-        
-        if (args[0].options[0].value < 1 || args[0].options[0].value > inventory.guilds[GuildDB.serverID].items.length) {
-          let embed = new EmbedBuilder()
-            .setTitle("Please provide a valid item number")
-            .setColor(client.config.Colors.Red)
-
-          return interaction.send({ embeds: [embed] });
-        }
-
-        let item = inventory.guilds[GuildDB.serverID].items[args[0].options[0].value-1];
             let itemEmbed = new EmbedBuilder().setColor(client.config.Colors.Default);
             if (item.type == 'wallet') {
               // Display wallet
@@ -284,7 +297,26 @@ module.exports = {
               itemEmbed.addFields({ name: item.name, value: item.description, inline: false });
             }
 
-        return interaction.send({ embeds: [itemEmbed] });
+            return MenuInteraction.update({ embeds: [itemEmbed], components: [], flags: (1 << 6) });
+
+          }
+        });
+        return;
+      
+      } else if (args[0].name == 'wallet') {
+        // Display wallet
+        
+        let item = inventory.guilds[GuildDB.serverID].items[0];
+        let ID = `${client.exists(item.ID.firstname) ? item.ID.firstname : '...'} ${client.exists(item.ID.lastname) ? item.ID.lastname : '...'} | ${client.exists(item.ID.dob) ? item.ID.dob : 'N/A'} | ${client.exists(item.ID.addr) ? item.ID.addr : 'N/A'}`
+
+        let walletEmbed = new EmbedBuilder()
+          .setTitle(`Your Wallet`)
+          .setColor(client.config.Colors.Default)
+          .addFields(
+            { name: '**Cash**', value: `$${item.cash.toFixed(2)}`, inline: true },
+            { name: '**ID**', value: ID, inline: true });
+
+        return interaction.send({ embeds: [walletEmbed] });
 
       } else if (args[0].name == 'add') {
         if (args[0].options[0].name == 'firearm') {