Make Discord like Drag n' Drop System (Next.JS 13)

hey this is Drago from drvg or however you want to pronounce it at this point you must have visited my site so the most interesting thing about my members asked about is the role management system so first of all I'm just going to log in and I'm going to show you what I'm talking about okay so here's the role management system I think it might be familiar with this one because Discord has the same thing in a way so like in the roles you can like drag and drop over here or maybe here or whatever you want and in my site I can also do this thing so I can actually drag and drop mode over here or maybe I can move user over admin and then I can do whatever I want so some of you actually requested on my DM about explaining the code behind it so I'm actually going to make it live on this video okay so let's actually started so here I just have a project like a just an empty project with the app directory and here I have the home folder inside it the page is actually empty because we're going to make it so first of all I'm just going to run the server with pmpm div and I'm actually going to going to open the site Local Host 2000 it's going to take some time but it should be quick so here it is ready now the background color is actually gradient because I actually set it to gradient in the global CSS with uh where it go this one the first thing we need is rules so by default I actually use database for the rule management system we can actually create Rule and Rule and edit rule whatever the thing you can do with Discord the same thing you can do on my site so now we're not actually going to use database which is just going to hardcore the rules and after that we're going to do the drag and drop feature so first of all I'm just going to go to config and I'm going to create a file called con. TS because we're actually writing typescript now before actually writing anything we're going to install a package called pnpm add nanoid or actually Nano ID so it's basically a random ID generator I already have this package so I'm actually not going to install it so first of all we're actually going to import the package so import uh empty from Nano or Nano ID whatever you want to say and we're actually going to destructure it to Nano it now first of all we're actually going to create an interface soort interface with the name of rule now inside it if actually copilot gave me the session but we're actually going to use the ID as string then the name also as string uh then we have the key with string value and lastly the position this will keep track of the position of that Ru now when you text hardc the roles so just going to write export constant uh let's say r or maybe roles with the interface roll array nice I'm actually going to write it behind the scenes and then I'll be back so here are all of our roles with the ID Nano ID like the random generat ID then we have the name as owner key as owner and the administrator administrator moderator guest and member these are the five roles that we're going to manage okay so I'm actually going just going to save it and we're just going to head to page now here we're going to first create a section just to look at good then we're going to give it a class name with flex P5 and I guess py10 now that we're done here we're going to create a div with a class name container Max width of sorry width uh let's say 75 bra maybe and lastly padding zero because we do not want the containers padding now inside it we're going to have a heading so with a diff I can write class name let's actually write it letter so we'll just add p with first of all roles we're going to make the class name as text let's say 5 Exel and font uh bold next another paragraph tag with let's see what coal actually gives us so let's manage the roles of organization yes that's fine uh then with the class name of text Gray 400 and uh I guess yeah we not need anything now for this one we're going to set the class name to space y let's say two and text Center Center not clip yeah that's fine let's see how it actually looks yeah that looks good to me no problem now finally we need that component so first of all you can actually use react DND which I can actually show you over here react DND now that's the package you can use it it's completely on your wish but there is another package called react uh beautiful DND I believe now you can actually use this package they have a very nice example on it so you can like track and drop over here or maybe here or maybe over here I don't know just do whatever you want you can experiment with this one but here's a problem with this one the latest version of lexj uses react I guess 18 something so we have react 18.2.1 but this version like this is not in maintenance okay so they like have a whole section for this so they're not actually maintaining and it actually supports react 16 and so there are some bugs and glitches uh that's why we're not actually going to use it but there is another package called hello p/ DND now we're actually going to install this package this is actually forked from the original package react beautiful dndd and this guy whoever the guy is I don't know who is that guy yeah it's actually hello P that guy so actually going to use this package so we going to add pnpm add at hello Pangia SL DN so I actually have this installed so I'm actually not going to install it again for this part we actually not going to use it here okay so we're actually going to create a component inside components folder uh called home and inside it we're going to create dn. TSX let's say now we're going to mark it as use client because it's going to be client site and we're going to just use the snippet now we do not need this this and this part two we can make it DND or let's say dndd before we actually write anything inside the return we're first going to define a state with constant roles comma set roles equals to you state of rule you state have Define it I have to import the rule from the const and finally for this one we're going to use rules from the const now if you if you're actually importing the data from the database you have to write that like my original code has that initial rules variable from directly imported from the database but here we actually hardcoding it so that's why we're using rules now be handling actually two events first of all handle drag start with a function basically for now we're actually not going to write anything another event constant handle uh sorry handle drag end equals to the same thing now here inside it we're first going to make the react fragment to div and then we're going to define the class as Flex Flex call and G five now the first thing we need from the package is import with a the structure from uh at hello p/ DND now we're going to import the drag and drop context uh the dropable the dragable and I guess and another thing like drag result I guess something like that uh or maybe drop result I guess not drag result yes drop result now first of all we're actually going to wrap the whole component inside the context so drag drop context and inside it we're actually going to Define events so so on drag start with the handle drag start and on drag end with the handle drag end now we're going to use the dropable now this dropable actually takes a dropable ID you can set it anything you want but I'm just going to set it to dropable now we're actually going to close it also now inside it we actually fire a call back with the provid it but we're not going to write provided cuz you're going to need it lat so that's why we're just going to write dropable provided dropable provided and then we're going to f the call back with the return return statement now as we're going to make a list so first of all we're going to make a ul and then we're going to make it a class and then we're going to give it a class of flex Flex call Gap four lastly we need two props the whole props and the ref so first of all we're passing the whole props the props for the dropable provided and finally the ref now if you do not Define the ref it's not going to work so it is important next the state roles that we already have we're going to map it so rules do map with roll and index we're going to actually close it and then inside it we're going to call the Dragon so with dragable and then we have copilot has already sest us dragable ID index and key so we're going to just give it now here it also fires a call back so we have to catch it and with the dragable provided we're just going to write it dragable provided we're going to fire it and I guess we have to close it yes it is closed as we're already inside the UL and we're mapping it so each of the components are going to be a lii now the LI is actually going to contain some classes so class name so we're going to have Flex item Center justify center cap 4 rounded MD BG default let's say 50 and ping of four now we also need to pass the props of the dragable over here so this time we have the dragable props drag handle props and finally the ref now also the ref is important here lastly just for styling we can just have a diff with the icon now I have to define the icon obviously so icons and the chip this chip is imported from next so if you're not using it please go and use it it's awesome and lastly we're going to have a div for the buttons so first of all we're going to have a button for the edit and secondly have the button for the close so I'm actually going to import the button over here and now that it is imported it all looks good and I guess there is an issue with the brackets I guess I messed up somewhere oh yeah so this one I actually forgot to close so this just goes here and actually just fixes the problem now I can actually handle save and it will just format the document now there is another thing that we actually need which is after dragable after this one before you will we're going to have dropable provided. placeholder now this part is also important now if I actually check this site I guess I have to refresh oh I'm actually not importing this component so after this one we're going to import DND export it from that one so DND and that's fine we're going to save it and I guess it should be up here yes it is here uh there's a problem with the CSS okay this is supposed to be justifi bit and not Center I guess that should fix it yeah I'm going to just save it and okay uh that's weird uh okay this diff this div is supposed to end here not there now if I actually do this it's not going to work like it's actually dragging but it's not dropping right so it's not sticking over here so for that we can do one thing we have to Define this events so first of all for the drag start this part is actually optional okay so you can actually just skip this part the drag start event so you just want to write if window. Navigator vibrate then we're going to window. navigator vibrate of 100 okay so that actually means if the device supports vibration so after someone starts dragging a component or any of the cards then it's going to vibrate the phone next the handle drag now for this one we have to define a parameter so the parameter goes as result with drop result the thing that we imported earlier now inside it we're first going to write if result do combine we're going to have set new roles with roles and the roles array then we're going to new roles do splice with the result Source index comma one so you're going to splice it lastly we're going to set the roles to new roles and finally we're going to return now that's if the results are combined if they're not then we're going to first check whether there is test or not that means if you start dragging four this one is Source okay so if you drop it over here now number two becomes the destination so this is the source number four this is destination with number two so if there is no destination if it was not moved we're going to return and last lastly we're going to check if result destination index equals to result. Source index that means it was not moved then we're going to return for example if we start moving it and then actually drop it over here we're going to return lastly we're going to do constant new roles equals to we're going to call a function of reorder now what is this actually going to Define it actually reorder not red order so I'm actually going to go to lip and then utils inside it I'm actually going to define the function at the last line we're going to Define function actually we have export it so export function reorder now we're going to actually use typescript CH X so we going to use T item T itm this part is optional the generic part but it is better if you use it so actually copilot gave me all the Su so I can just hit Tab and I'm just going to explain it to you so first of all we have the list the T item all the items that we are passing the roles basically then you have the start index so the index that we are starting with and the end index the index we're ending with so we'll first make the result as an array and then we're going to destructure removed from the result splice of start index comma one so now we're going to splice the result finally with end index zero and removed and finally we're going to return the result now we're actually going to see it in the action better so I'm actually going to save it we can actually now import it and lastly of the roles the list result of source. index the start index and finally the destination index with the end index and finally we're going to return the new roles inside the set roles and that should be it so if I now try to move guest okay I'm moving guest in number four over administrator it should drop and it should change the number so we have the 1 2 3 4 5 if I try to move member the number five index if I try to move it on number one it should change it to one and the rest 1 2 3 4 5 so it will just reset all the numbers after it and obviously I also add another function with the close one that just remove the index from the new roles array and just set the roles to the new roles so if I just try to remove owner from here if I click on it the owner gets removed and obviously it's just hardcore it so if I just refresh it it just comes back yeah that's it so I hope actually you enjoyed the video if you want more content like this do subscribe to the channel do give this video a thumbs up and you going obviously visit my site on it's tv.me or it's t.me however you want to say it and I actually just released a new feature on this site today with the hire me section so you can actually create project and collab with me over here and if you already have an active project you can obviously chat with me about that project I'd be happy if you actually join my server we always talk about webp stuff and the other things goodbye have a good day peace

Channel: DRVGOtheDEV

Views: 477

Keywords: nextjs, next, react, nextjs app router, app router, ssr, next js 13, drag n drop, react dnd, react-dnd, dnd, nextjs dnd, dnd in nextjs, todo list

Id: 1Vl56wvjvZg

Length: 14min 39sec (879 seconds)

Published: Mon Oct 02 2023