Automatic Help Command with Dropdown Selections | discord.js tutorials!

[Music] hey guys welcome back to another video so in today's video i'll be teaching you guys how to make a dynamic help command so here's a quick preview of it so if i do exclamation mark help you should see all the emojis so as you can see your info we have info commands test commands then moderation commands all right i'm pretty sure you guys seen the review i mean the preview all right so uh we're actually going to use discord just version 13 so to install it you gotta open up terminal just do npm i discord gs to get the latest version which is discord.js version 13. so um uh we're gonna use the uh command handler from the previous video so uh the reason that i'm using this handler because we're gonna use the directory okay that actually basically stands for um the folders in here so we have info moderation and test okay so uh if i go in commands you should see i have a few fake commands so as you can see here we have band we have kick with unban so all of these are fake commands okay so just pretend this is a normal bot with all these commands and then we have a description away in here so the essence of this uh help command is it displays the name as well as the description all right so once you select a new category it's gonna diff uh it's gonna show the name of the command as well as the description of the command so let's just start coding it all right so uh we're going to import some things from discord.js okay i think we can use yeah we're going to use message embed all right and then we're going to use the action row and then lastly i think we're going to use the select menu message select menu all right that's all we need from this gojs and then i'm just gonna name this command the help command all right so you can add a description to your command simply by doing comma and you can just add a description and just do a string whatever it is so let me just say help command for bot you can do whatever you want all right so in here um we're going to define a way so we're actually going to get all of the directories it's pretty simple you can use the set in javascript so cons directories equals to um a an array and then we can just do a dot why is it doing that and then we can use a new set and then in descent we're actually going to pass in the uh directory so we can just do client commands the map okay do make sure you're using my command handler uh the latest command handler all right and then we're going to map the command uh let me just do command and then we're going to do the command or directory directory all right so make sure you have the correct spelling i think i missed another bracket in here all right so we're gonna um get all of the categories so let me just test this out real quick so let me just check if it's work check if it works so console.log directories and then if i do our exclamation mark help if i do exclamation mark help it should list all of the directories that i have so as you can see here we have model info we have moderation and this and we have test okay so all of these are the command directories okay or you can call it categories okay so the next thing we're gonna do is we're gonna define a function to make the string prettier so as you can see here in terminal uh it doesn't start with a capital so it starts with a lowercase so you actually make this uppercase so it looks a little a little nicer if you want so let me just do format string equals to a function let's just use the arrow function okay that's the way to go in 2021 so sdr character 0 we can make it 2 upper case okay it's a function and then we're going to add the um the lowercase words by doing string.slides and then two lowercase so this basically gives us formatting okay so um you don't need to change the info to capitals at the first character or whatever it is all right so this is the function so let me just recheck if i did anything wrong so that looks good to me so let's just move on okay next thing we're going to do is we're going to map the um we're going to filter out the command so let me show you what i'm doing so i'm just going to call this categories so this basically is going to show us our command category and then it's going to list out all of the commands and its info so we can just do equals to directories the map there and then uh we can do this okay we can just define get commands because the client commands dot get oops we're gonna filter so as i said we're going to use the directories in the command that's why i'm asking you to use this command handler so client the commands to filter and then we're going to get a single command and then which is going to be um command the directory is equals to directory all right so we're checking uh we're going to filter out the commands like this okay so let me just uh format the code a little bit close the sidebar okay so once we get the commands uh we're going to map the commands so in here we're just going to do dot map command okay so in here we're just going to return a name will be command.name oops should add strings in here command.name and then we're going to get a description as well so we can just do description will be command.description all right so um if the command doesn't have a name so we can just do ar if it doesn't have a name we can just do command is not ready or that or we can do there is no name okay or in here we can just do there is no um description for this command all right okay pretty simple okay here's super simple stuff and then lastly we're going to return the directory name and our commands so our gate commands so let me just do return okay make sure it's not inside the get commands uh make sure it's not in get commands and then we're just going to return a directory directory which is going to be format string and then we're going to pass in directory in here and then next will be commands will be get commands okay so we can actually console or log out this so i can show you what it actually outputs so we can just do console.log and then categories go back to discord okay and we do help okay as you see here info okay there are two commands we can't really see because it's labeled as object so if i go back to reduce your code and i open the sidebar okay uh what am i even doing okay so as you can see info have two commands so there's two commands in here moderation should have four commands so let me just open up there's four in here test should have two and there is two so basically in these objects they have a name and a description so we can use that in our mercedes select menu okay so the next thing is we're going to create a initial embed so this embed is going to be sent the first thing uh when we run this command this embed will be sent so i'm just gonna name this embed or you can make it a message content as well i'm just gonna make an embed so it looks a little better new message embed we're gonna set a description uh we can just do please choose a category uh in the drop down menu okay so please choose a category in the drop down menu it's a really simple embed and then now we can create a component which is the message selection menu so let me just define it really quickly we're going to make it a function so we can set it disabled or we can set it not disabled all right so we just reconst components equals to a stay in here you're going to need a state which is going to be true or false so this is going to be a boolean okay so in here we're just going to do new message action row message action row and then uh we can add components okay in here we're gonna set a message select menu and then we're gonna set a custom id to um help menu or you can sell whatever you want uh it really doesn't matter right now and then we can just do set placeholder okay so this is uh if you don't know what placeholder is i highly recommend you to check out my selection video to really understand what's going on in here so the set placeholder we're gonna just gonna do uh please select select a category let me just format this and then uh lastly oh actually we need to add options as well so set disabled okay so in here we're gonna pass in the state if it's false it's gonna not say disabled and if it's true we're gonna set it disabled so i'm gonna explain why we're gonna use this function this components function layer on this video okay so we can add options so here is the fun part okay we need to map up the categories so let's use here we're going to map out this all right so category.map and then command okay and then we're gonna return an object okay so let me just scroll down a little bit let's close this away okay so in return um you're gonna return a label okay so this is a label for the um options so we can just do command or directory okay and then we can set a value okay so this is what we're gonna get so we can just do command the directory.2 lowercase because we want it to lower in lowercase so you can easily uh check it out all right and then lastly we're gonna have a description okay so uh we can just do commands from um command or directory and then uh category all right pretty simple okay i'll be also teaching you guys how to add emojis to your command at the end of the video so yeah uh do you stick onto the end of the video all right so this component is basically done so now we're gonna set i'm gonna teach you guys how to send a message so i'm just going to define this as a initial message so initial message all right equals to await message.channel.send and then in here we're going to send the embeds this is going to be the embed that we defined earlier uh next we can have the components which is going to be components okay so we're going to set the disable to false all right because uh we need it to be able to we need to interact with it so we're gonna use components false okay pretty simple and then uh let me just go down okay we're gonna create a collector so uh first we're gonna define a filter of course the cons filter equals to interaction once again it's an arrow function so we must make sure the interaction the user id is equals to message the alter id okay pretty straightforward once again and then we're going to define a collector so cos collector equals to message.channel.createmess uh messagecomponentcollector make sure there is a component in here you want to use a message collector only so in here we're going to pass in a filter and then we're going to have a component type okay you must make sure it's a select menu lastly we're going to have a time you can set whatever time you want i'm just going to make it five seconds okay i'm going to make it five seconds okay you can put whatever time you want or you can just remove it okay so uh we're gonna make it collected or on and then collect okay so once it collects something let me just do that real quick okay so we're going to get value so const uh directory equals to interaction the values all right so this is what is going to pass in in here so once we get this this is going to be uh in here all right so directory so uh we can just i'm not going to hard code everything this is going to be totally dynamic so we're going to make some dynamic code cons category equals to categories dot fine okay we're going to find and then uh x uh x directory not to lowercase is equals to directory all right so this basically means that we're gonna go back into this object where's my terminal okay so we can go back into this and then we're gonna find for the correct a name so let's say we pop we clicked on info it's gonna search for this object and it's gonna return this object over in here so here is our category and then lastly we can uh edit the embed so it's pretty simple all we need to do is interaction dot update okay we're gonna use this interaction okay we can update the message by doing embeds embed okay so now let's defend uh define the embed cons embed equals new message embed oh then define embed up here oh yeah i did um let me just do uh initial okay now mine let me just leave it over there i'm back okay let me just leave it there and then we're gonna define a new name in here so embed uh let me just do category embed all right why not category embed okay so it's a new message embed you can just set title what send title uh title and then we can just do directory commands so this is going to say what command it is and then we're gonna set a description so set description it's gonna be uh you can see whatever you want i'm just gonna say here are the list of commands and then we can just do add fields make sure there's an s okay so let me just format the code again so in add fields we're gonna do some more fun stuff so category okay and then the command stop map and then we're going to get the command return and then we're going to return an object with name a name which is going to be um the command name okay so let me just leave it as strings for now empty strings so value we can have a value so this is basically a normal field of embed a normal embed field so this is what we have an inline will be true so in line if you want it to be all in the same like okay i'll explain it later on i'll explain why we're going to use inline later on so for the name uh we're just gonna make some cool formatting so two backticks and then backslash backtick backslash backtick so it's gonna create a markdown effect i'm gonna show you guys what i mean later on in this video so we're gonna use the dollar sign thing uh command.name okay so we're gonna display the command name first okay for the value we're gonna set the description of the command so you can simply do command.description all right so this is basically done and then uh we can update the embed uh like this all right so finally uh we're gonna once it's ended we're gonna make it so that it disables the um the components okay so let me show you what i mean so collector the on and so once it's ended okay once it's passes five seconds we're just going to do this arrow function okay we don't we don't need the uh properties in here so we can just do initial message dot edit okay and then we're just going to edit the components so in here components we're going to use the components again the components function okay for the state we're going to make it true so we want to set it as disabled so yeah let's just test this out let me just go back to discord okay and let me just run help all right my bad uh this shouldn't be and uh curly braces it should be an array so i totally messed it up so just make sure this is an array all right so let me just remove this okay so just change the curly braces to an array so let's just restart it okay ready let's just just oh help okay it works so we have all of categories in here so info moderation test okay so if i click on test there's an error so what's the error let me just check unexpected token oh it's not the error oh i see now i see now all right so let me just remove the timer because we don't have that much time to work with okay so let me just remove this timer for now okay so if i do execution my hub again and i can choose a category info okay so here is a list of commands so this is the command name so if i zoom in you should be able to see that it has a black background so this is why i use the markdown syntax so uh if i go back to my command section okay as you can see here there is a help command so help command for bot this is this this is the description so you can find that in here uh the description is held command part and if i go to ping.js there is no description here that's why it's going to say there is no description for this command so if i want to choose a next category so i just need to click on here click on moderation so as you can see here there is a band command there's a key command there's an embed command there's a one command all right so um now i'm going to teach you guys how to add emojis into your um drop down menu in here so you can have a emoji in front of info you can have an emoji in front of moderation and etc etc so go back to your code and then we can create an object called emojis so cons emojis equals to an object so in here basically you're going to pass in your um category name so moderation we have info moderation and then test all right so we have three categories in here so you can just pass in whatever emoji you want so for info i'm just gonna have a info emoji in here this i information and then uh for moderation i'm just gonna have a hammer because why not it looks something like moderation i guess and then for lastly for test i'm just search for test tube if there's it yep there's a test tube so this is all the emojis that i want so you want to scroll down until you find for until you see components and then in here there's a label value description so there's actually a way to add so you can just do emoji so in here we're just gonna do emoji and then we're gonna use the uh square brackets command the directory dot to lower case or it's gonna be null alright so if the category doesn't exist in here there won't be any emojis in there all right pretty straight pull it okay make sure it's asked i forgot to add the ass so emojis so now i'm back in discourse all right so if i run the help command as you can see here there is info moderation test so if you click on one of them it's going to edit the embed click on another embed again okay so the last thing i want to show you guys is another approach to this so if you don't want to send an embed you can actually do something else which is going to be pretty cool all right so um instead of sending editing the message you can actually send a new message which is only viewable by yourself so you can simply do that by doing uh interaction dot reply all right so embeds uh we're just gonna make it appromo true all right so like this and then basically you can just remove this okay so let me just show you guys what this looks like if i do excludation mark help if i do exclamation mark help okay and then if i choose a category test it should show me the category and then i can choose um whatever category it is so yeah that should be it for today's video if you have any questions or any issues feel free to join the supporter links will be in the description alright have a nice day see you next video bye

Channel: reconlx

Views: 10,360

Keywords:

Id: NfFkySxHxtg

Length: 22min 32sec (1352 seconds)

Published: Sun Aug 08 2021