Build a Multi-List Drag and Drop To-Do App Using React

hello guys welcome to my youtube channel in this tutorial we are going to be building a simple task management application where every um main feature here is going to be the drag and drop functionality for this task so the first thing is going to be our ordering and our reordering functionality and lastly we're going to have that possibility to drag items in between lists drag items from one days to the other and this is it so um and just one restriction here which is going to be in case the user tries to drop an item out of the list it should bring it back to its initial position without really altering anything so if i try dropping it outside that should get it back to where it was but if i drop here it should drop all right guys um if you haven't subscribed to the channel make sure you do that right now and don't forget to like subscribe and probably share with your friends and um for comments guys feel free to ask me any question in the comment section i will answer to the ones i can and anyone that i can't answer i might give you a reference to where you can find um the solution and then i'm also open for any discussions regarding um maybe possible improvements these are mini applications or maybe if you have any feedback i would be very grateful to receive and any suggestions would be highly welcomed all right guys um let's get into our code and start building this fantastic to-do list application or let's just call it task management application okay guys um we are going to be using nexus so in that case we choose mpx create next app and we're going to call it react dnd example okay let's wait for it let's wait for create next app to configure our next application for us in the meantime let's just pause the video and come back when it's done okay so um it's done installing the all dependencies so let's just open that and open it within our code editor all right so um we're going to do let's just first of all run our application it's a yarn there then we're going to open it within our browser okay this is our next application so let's go into our chakra ui documentation and then search for areas where um maybe search for how nexus has been configured to check for ui okay so the first step is to create an xjs application which we've done and then the second step is to now install chakra ui dependencies let's go ahead and do that so i'm just going to open the table our editors terminal and install the packages all right guys let's wait for this to get installed okay our chakra ui dependencies has installed and uh let's now go ahead and add our gold fonts the font okay this is the font we're going to be using within the application and after that we need a documents page so let's go ahead and create document such as page and within this page um of what we're going to do i think let me just i'm just going to make tenders into a class component instead of a functional component and it's just going to be without any name anyways let's do it with let's do it functional component and i'm going to do export okay um now guys let's use um let's use the class component instead because we need to extend it to document we call it my document extends document and this document comes from next document so let's make sure it's imported okay now within our document run render function and a render function returns html from document let's give a language of ing english and ahead we're not within the head we're going to now uh paste our a font font family a link so this this is where you can get this link here you can just come here i'm going to use poppins pop into my font family so you can choose whichever link you whichever front family you would like to use now let's also add the body and within our body we need two components to enter and the two components the first is the main component which um i think represents our main just it's more like a parent for represents i mean application i can see this is just main application then we have next script this is to render and actually scripts well guys i'm not very i don't understand all of these two components very well but feel free to check them out in the next yes documentation okay we are done with the font we're setting up the fonts let's now go into our styles we don't need the styles anymore because we are going to be using chakra and then we let's create a source folder within our source folder and uh let's go into pages and just change remove all of this because we don't need them i'm just going to call it up i just like to make sure that there is react reactors imported here now we have that let's uh this is going to be on our home and uh what we need is going to what we need next is the theme which is this which is this and within our theme we have cut we need colors an object and i'm just going to quickly paste the colors we need for this our theme by the way i'm just going to paste the entire theme directly i 18 file and i'm going to quickly explain everything there so here this is our theme we're exporting we're importing on extend thing from chakra react and chakras team now we've defined our colors here and um we've also defined our fonts the body and the head should both have the same fonts then for extended theme we are now this is how we declare our theme we've declared an exported theme at once we as we're spreading the chakra theme even though we might we we are not going to use it but i just said i just thought i should spread it there since we need since it's the theme since we are defining a theme so these are the most important thing here you can still do without the steam but this one's it's a must now the next step and i think the last this is the last step this is the last step for the chakra ui config so we are going to import chakra provider and this chakra provider text expects a theme prop which is which in this case is going to be our theme let's make sure that this theme is imported and let's go ahead and check our application okay seems like we've imported [Music] head is not defined make sure we've defined it still nothing that should come from react should come from react documents styles is not defined as well let's go into this here and i think our application works just fine okay now that we have all of this set up i react next year's application is configured and it's configured with our team with our um chakra ui framework so style library so the next thing we need to do is to design our page and give it all the stylings that we can so the first thing that's within our index page we're going to use flex and this flex i'm just going to give a flex direction of column now menji main bg comes from our theme so we have here main pt and this is just the main background which is dark i'm going to give a minimum height of 100 view height and i'm just going to give it with a full shield compiling a 100 percent just a mission occupy the entire week and then let's give a caller the phone call of our text white text this also comes from our theme here and what else lastly i'm just going to give pardon bottom of two rams let's see what we have cool so this is okay now let's also define the header forums column align item center then heading they have fun we need font size to be three extra large three times exercise extra large and font weight i want it to be 600 dots bold now let's give the low part of our header so we're going to import text text should have a font size of 20 pixels on the weight 600 as well and color should be subtle white it's also text and i'm just going to give we are beautiful let's see what we have cool now we have now we have our header the page header let's now uh define the body of our page i'm going to justify content space between so this is going this is the component that houses the the columns for pixels for random solder and uh now let's also um we need to define our column so what i'm going to do is i'm just going to create a static column so now and to make that monitor refractor so we have flex we're going to give it a rounded 3 pixels column bt background 400 pixels wait 620 pixels for height and should be a flex though it should be a column flex direction now within this column let's now give the heading the header of the column the header text within the header someone's epics so and here i'm going to align item center height of 60 pixels rounded three pixels okay okay we've defined the column and it now has its heading as well the next thing we need to do is the body where um what has been rendered let's go there so we have here this is this is our column and just beneath the header we're going to have another flex and this flex is going to have a pixel padding button side by side of 1.5 ram i'm going to give it a flex of one so that it it should always expand and occupy the spaces evenly then we have light direction column then that is it now let's also define let's this nato's installer all our tasks cards so we're going to have a flex as well this flag should have margin bottom of one ramp so the species between the attack should be one ram a height of 72 pixels and um background card pg we have uh rounded should be rounded rounded by 3 pixels and padding should be one pixel up from top and bottom then fifteen pick uh 1.5 picture pixels for top and bottom button and side by side so we have a card and within our card we're going to have a text what we can do without the text but i'm just going to have a text and let's just say hola others say hey there okay this is our task so the most important uis are created so we need to now do some refactoring and integrate our drag and drop package so let's go inside resource and we're going to have a column file and this column file we are now going to copy the column we've defined here but this column that we've designed here and just paste it there first of all let's import it and within our column here we have this make sure that we've imported the flex and text components from chakra okay nothing has changed and let's just all right that's cool now next thing is the last part it's now going to be for us to integrate our package for drag and drop so let's go now and install using your own art react beautiful let's install let's install the react drag and drop package and start setting up for drag and drop feature within our home component we're going to need the drag and drop context drag drop contacts from reality tnt very beautiful dnd and to make sure that this component is wrapped by the context now that we have this this component expects on and on drag end function and i'm going to define that handler the same name these on drag express expects every song and resort here has destination which is the destination for the drag and drop has the source which is where drag starts and we're going to need both of them within our application here okay so um next thing it's going to be for us to define our data let's create that so i just created data which we will be using for this application and i'm not going to just i'm just going to copy this and paint i'm just going to paste it here and we will go over it so this is the data so we have this data i'm calling it initial data this is the initial state for our task we have the task we have a hash map for task and each id is mapped to its tasks here in this format and then we also have a hash map for the column where each column id is mapped to that specific column and each column has has a list of task ids that belong to it lastly we have the column order this on this just represents this represents the order in which the columns appear on your screen on your screen so um we are going to be using this information to represent detail in our ui okay next step is to define the state so we're going to have view state and this has a state this state takes an initial data as its initial state making sure it's imported next is we're going to use the state to render render the tasks within the columns so i'm going to have state that column order and i'm mapping through the column author we have column within the state i'm going to get the column by the column i get a column by column id remember this is the reason why we have it in this format we have columns mapped to the column ips so i'm going within those columns and i'm getting a specific column by the id here and i'm also going to get the task for that column so we have this column plus ids and then i'm going to map through that those class ids and we're going to get the state thus by the task id now the last step is to return a column and this column needs to have a key which is the column id and the column like that and it has make sure that this is removed okay we didn't have a state are columns aligned in that format now with the differences this has been rendered from the number of columns available here so let's now get into our column components and make use of those of these data that has been sent as propped not as pro so we have your column and tasks we're expecting column enters from the within the other as flaps column title that's updated and for the task we are going to do a mapping areatars.map and i'm going to copy this then i'm going to that's the content great we know about us and um okay the last thing we have one last thing to do just so we already we've already defined our context we've already wrapped the main component with the context let's now add the droppable and draggable components to the application so for now let's go into our column our column and within within our column we have we're going to wrap this the container that that holds the task with the dropper pool component coming from real beautiful tnt now this wreck this droppable component expects a droppable id and this id is going to be a column id next this droppable has syntax by which it's expecting its children to be rendered so we have here our drop hole provided then we have its snapshot let's just render them here now we have in here this now we need to also we need to uh add the ref the draggable in our ref as a prop to the comp to this component so this is a container that's the container that wraps the container that holds all the tasks or they just say where we want to be able to drop items we need to add a ref a ref to it and also we have to spread the droppable provided drawable props cool at this point we are not we won't be able to drag and drop yet unless we've added a draggable component around the task so let's go ahead within our task we need to wrap those stars wrap the tabs by with a draggable component and this draggable component has needs a key since it's been within a map and then it also expects a draggable id just like the dropable and this id should be a string but our test ids are all numbers so let's make sure we are passing a string lastly it expects an index and in this case let's just give it the index from the map function so this is it and it's it's going to follow the same syntax as the draggable as the droppable sorry you could provide it and all right first thing the key you need to buy the key this key is going to be your task id so we can now take it off from here and have it here instead and then actually we don't need it here here so and then another thing we need to add is the properties for our draggable first property we need to first uh let's give it the ref draggables in a rav next we need to spread the draggable props lastly 100 props okay so we need these three three uh parameters within us properties to this to these uh container to this uh to this task for it to be able to for us to be able to drag and drop it whatever we want okay now we have this let's see if we are able to track we're not let's see what error okay so this is a problem i think many many people will face and the quick solution for this is because we are having this because we are created we're having this because next year's renders on the server does server side rendering by default and we are importing in here we just we need to do we need to implement dynamic input for this column component that uses that uses the draggable and dropable components so to solve this issue we need to import this using dynamic import and um i'm assuming that this should solve our problem okay we have one issue um this is not enough we need to disable server side rendering for this component let's see create our errors are gone let's see now we are able to drag and drop items so notice that we're able to drag but it doesn't stick at the position that at a position where we drop it so when we drop it it switches and goes back to where it was and that's because we've not written the code that reorders positions so that is what we need to do next let's go within our index file and add some code within the on drag end function so a few steps that we need to follow here three steps the first is to check if if user tries to drop in an unknown destination we have is the if statement for that let's just do the next next is if user drops within the same if the user's destination is equals to if the drop destination is equal to the source destination if drop destination is equal to the source not really so what i mean here is if the user drives and drops back in the same position yeah if the user drags and drops back in this same position lastly if this is not nicely actually this is the third point which is if the user drops within the same column but in a different position and the last point is if the user drops after the same like moves from one list to another okay dropping outside um i don't know dropping within an unknown destination it's forbidden so we're going to check if the destination is undefined like just return now just return for it so if you're dropping somewhere that doesn't uh contain the droppable isn't wrapped by the droppable component then we are the destination is going to be undefined so we should return now next is if we are going to check if the destination if the droppable id is equal to the source in the destinations dropboard id it's equal to the sources dropable id and if this nation's position or index is equal to the sources index then just return now oh wait you should return for it that's the case just start to the last of the second to the last is i'm going to do a check if the source is column so i'm going to define two columns here we have the sources column the sauce column which is gotten from the state column using the sauce dropable id and the destination column gotten from the state using destination droppable id and our if statement now is going to do a check for source column if the source column id which is the column the first column if this equals to destination columns id then you should we should reorder the list and we're going to define a function that is going to return a new column reorder released and return a new column this function takes three parameters the source column the the source index which is our start index and the destinations index the end which is the end index in this case and um with this new column we're going to update our state so let's just create a new state here new state this new state is going to spread the old state and update columns state columns spread in the columns and use the new column id we are updating the column by that new columns id then set our state a new state now we have this is the after that let's return forward now this is just to break the execution here just to end the execution here because if the user is reordering then it means he's not dropping outside a column it's just dropping within the same column so by the end of this computation or this uh calculation here should end that execution let's get at the top at the top now let's define our reorder list column list function and we expect in the source column the start index and the end index okay a few things we need to do here first is to create a new task id we need to get all this the list of all the tabs so we're going to create newton's id list of uh i mean test ids and we are doing that from the source columns first ids and then we have we're going to remove that nature's explain so we are going to use the slice function and we will go through the tasks newton's ids and user splice function to remove an item from the start position so we're going to remove an item that is one item from the start index so when you're starting the drag we're going to remove that item from that start index within the array and one here depends it represents the number of items we are removing so removing one from the start index and this splice function normally returns the items the item you've removed or the list of items you've removed so in this case it's just one i'm just and i'm just going to call it removed then i'm going to have the new slice function within uh that loops through the newton's ids but in this this time we are getting the item at the end index we are not we're not deleting any item so zero means we're not removing any item at that and the end at any index and removed we are now adding this item at the end index so what we've done here is we've gone through the start index we've taken the item at the start position that we've we're going through the we've gone through the task ids array we've taken the item we've picked we removed one item at the start index then we've gone to that task ids array again we've added back a new we added back the removed item from the start index to the end index lastly we need to define a new column and update and provide all the data spread source column here and update it as ids the new test ids last we return new column which is what we've been experiencing here right guys um we are done with the re-ordering part of the application let's test it out okay we have an error let's refresh okay the error is gone now remember we already had a drag and drop so let's remember notice this is the position for this create page layout let's drag it to a different position and that's these so our reordering functionality is working the next and last thing we need to do is to work on the uh ability to drop outside of that column so let's do that now which is this all right let's so if the use moves from one column to another we need to also update the state for that so we have we need we're going to do uh in this case there is no we don't need to do any if statement because the first few if statements we have we can only get to this point if none of these if statements are true so let's um just go ahead and implement the code for moving from one list to another so within this we have we're going to create a start index or start task id this is a stat columns source ids and we're going to create it from the destination columns plus ids not destination but the source column sorry and then i'm going to also remove a task id from the stat task id plus ids already and we have we get to get it from the source index and then now that we've removed it we have to define a new start which is going to spread the source column and it says ids that's those columns then next thing is to create let's create an end those iris from the destination destination columns does ice and we are going to remove after not removed we're going to replace that destination um we're going to replace we just could not replace but we are going to insert i'm going to insert they removed us they removed this id from the start ids array within the within this entire ids already now that this is done let's create let's just create a new end a new end task column or add column new end column and um this is also going to spread the destination column then we have the task ids from that for that destination column which are the enters ids now another thing we need to do is to now update our state which is i think this is the last thing we need to do new state spread the whole state just like we did in the previous parts then update our column columns first of all update spread the old columns and the two columns which are the new start column and new and column nothing set state and that should do the magic for us so guys this this should now permit us to be able to drag in between the columns and this is it and it works now just a few finishing touch to our drag and drop application i'm going to add a few styling to the stick to this cards as you drag so let's go back into our columns and on the tasks on this task a few things when it's art is the outline notice the border lines we you see wait i just want to make it look a bit nicer so let's add an outline and give it out main color this outline color it's going to come i'm going to use this draggable snapshot this snapshot we're going to get this dragging property from the draggable snapshot and we will be applying an outline color when when the card has been dragged so there is a color within a theme called card border and if it is not dragging just make it transparent so it will seem as if there is no color no butter at all and then uh what eggs i think this should work for us we now have a lasting let's just add a slight border a slide our box shadow same thing we're going to conditionally apply this shadow but this is draggable and there you have it so we have you're applying this box shot when you're dragging and if you're not dragging it should be on set let's test that out so we have a slight box shadow okay all right guys um this is the end of our our tutorial and um don't forget the don't forget to smash the like button if you have any feedback to give you can just drop it down in the comment section if you like this video let me know if you don't like it just let me know and for any um i'll be very happy to receive any any suggestions for future tutorials so guys subscribe and stay up to date with the latest videos i'll be uploading because more interesting tutorials tutorials will be coming up as the days go by all right guys thank you for watching and see you in the next tutorial

Channel: FullStack Mastery

Views: 31,705

Keywords: react-beautiful-dnd, react-beautiful-dnd example, react-beautiful-dnd tutorial, Build a Multi-List Drag and Drop To-Do App Using React, how to create a drag and drop form builder, how to implement drag and drop in react, how to create drag and drop in react js, drag and drop in react, react drag and drop, drag and drop javascript, build drag and drop react, Trello Clone with React Beautiful DnD, JIRA Kanban Board In ReactJS, reorder a list with react beautiful dnd

Id: ALFuC2bWaZs

Length: 52min 21sec (3141 seconds)

Published: Sat May 14 2022