Code With Me - Edit Task Immer Function - Kanban Task Tracker

hello I'm Eric I'm a software engineer welcome back to another entry of my code With Me video series We are continuing work on our kanban task tracker um if you didn't see the latest video which I'll link up top we uh ported over our task data into our already existing ad task modal uh modal ADD test modal and now we have actually updated that so we have an edit task which I've just realized now still says add new task at the top so I don't really want that but focus of today after we make that adjustment is to actually edit the task all we're doing right now is we're logging that edited test that we received back from this modal and now we're going to try to devise a way to actually update our whole state all of our board information here with our new task so first let's go to our test modal and right here we've got add new task right and I can very easily make that we're sending in task data maybe we should be able to adjust this very quickly to a ternary operator where basically we just say like if we have task data then we're going to return edit task otherwise will return add new task and I think that should work out fine for us right so let's click edit task that says edit task now click that plus button we have add new task that's fine cool we don't need to do anything else with that um so now we want to actually do something in our immr file so let's go look at our error functions and let's pull those over here if I can to the right side of our um our vs code and bring this all the way out we've got the calling we're calling the edit from the task view card and here's where our added task function is again right now we're just console.logging our completed task data um so what we're going to do with this I made some notes for myself here in the inner functions file to where we need to edit a task and um I don't know about this part if I need to store this variable get we're getting this as a variable um so I should just be able to get my task as a variable um and we've already got a couple other things here we've got a delete task method which removes any task that we send over to it which is based on the board index that we're on the column index and the task itself right because we're sending over task index all that information each task the way I have this working right now is we're mapping through all of this data so each board is mapped so each board knows what index it is and the giant Json data file that we have we'll take a look at that real quick here's our Json data file right so we map through the boards array so platform launches the first board in that array so it knows it's at index zero um The Columns array of that board the to do column knows its index is zero right all that stuff all the way down the text so if we delete a task it sends back those indexes so it knows we we don't have to do a search algorithm in here we don't have to do a find index to find those things we could we could adjust this and we could do that stuff and I could get rid of all those indexes that we passed down but they exist right now so we're using them um so that's what they're here for we have an add task function which does a very similar thing excuse the lag as it spreads back out um where basically we send over the board data the board index number whatever the new task is we do find column index here right because if we're making a new task it doesn't already know what column it belongs in because it's new right so it uses whatever our task status is a task status right I'm going to keep doing this task status would be to do or doing and those are the titles of the columns so we can use that status and look through and find that particular column using the find index method right on that array I reviewed this code previously in another session so you know again I'll link up top to um the full uh playlist of kanban task tracker videos I have so far in case you want to go back and catch up with 7-Eleven and see where things are at so I sh the way I'm thinking about editing a task is I'm not really making adjustments to the task in the state because our state is a giant nested object right so he talked about this in previous videos as well um in in react your state is immutable so in order to update an object or an array that is in state you need to make a copy of that and then use your Setter function with your copy otherwise you're just pointing back to the same object in memory and you're not allowed to make your adjustments to your object in state as you would in regular JavaScript land react isn't a fan of that right so that's the react framework that's the way that works so we'll make a copy of this thing first make our edits and that's what Emma allows us to do if you're not familiar with emmer I've made a video on that as well a brief video introduction to how that's working now link to that one as well um in a card above so feel free to check that out so what we're going to do when we're editing a task we've got a number of things we can do here right and the functionality that we need to be aware of is not only if I click edit here not only can I edit title description and the subtasks but I can edit the status of this thing and that's where the concern is for me so you know if we look at if we look at our big Json object here this is this is what is being displayed on our screen here and when we make edits to this stuff you know if I'm adding in a new task all right I can tell this thing to go into the to do column of platform launch and it's going to make a new object over here in this array with title and description and all that stuff cool if we're editing a task what's going to happen well it's you know it's gonna pull quote unquote this information right because we have this task object let's say we're we're looking at you know build UI onboarding code this is that task that we have highlighted this component is uh when I have is like a task preview card which has that task data right because we've mapped over all of our boards here we're mapping over all those columns here's one two and three which is off screen there's the done column and then we map over all the tasks in that task array so here's one well zero one two three right and our zero position is build UI for onboarding so if I open this up here's that data that has been mapped and it's displayed correctly within this giant object now if I edit this I'm in effect going to be making a new task the way I have this set up right we know based on the previous video our functionality is just making a new state right state is existing here in this modal so to speak and we're just pulling the data that exists we're not actually updating the state of that data we're just using that data to make a new object that we're sending back here into this function that's kind of being hidden over here right so if I send the state this task this this new task object over to immer I'm not actually going to directly edit this right I guess I could write a function that checks a bunch of stuff and if if things are different then we then we just edit this but the the main thing that can happen in editing is that we can change that status and when we change the status this whole task is going to move anyway right and if I look at my inner function what I've got here is I've got an update task status function and look at all the stuff that's going on here right we need to this is probably going to help if I pull this file over here actually um oops let's not do that don't save that let's try that one more time let's put it here right so we why do I have a breakpoint we call our update task satisfunction we send in the board data as it exists already all of it we pass in a board index number so we know what board we're on because that's easy enough we're not going to we don't have the capability here to do tests from one board to another that's not a thing we need to do we pass in our column index right because that task already knows what column it's in based on being met and it knows its task Index right of that array and then we're passing in a new status all we're doing here is updating status and when that happens we're using emmer and it's produced function passing the board data make a draft of that data so it's doing all the flattening stuff for us and you know making that new object and everything that it needs to do um I'm not really flattening but he's making new objects and stuff um well I'll be doing a lot of other backup right that we're not preparing to but that's okay um it's making all of its copies and then what we're doing here is we pull out the task that we're updating based on just the location of that task right forward index at columns column index dot tasks and we splice out the task index and we're only splicing out one object right so this is where I'm able to make the adjustments to that object because it's made a copy of it so let's say this is the task we're going to change the status to it removes this task right and then it updates the status of that task to new status then based on whatever the new status is we find that column index based on the name of the status and then we push that task into that task array of that column so if we're editing a task not only can we make edits to the name and description and stuff and put this thing back into where it potentially already lived but we're going to have to end up putting this thing back into maybe a different place entirely maybe a totally different column so that kind of sucks um but you know what are the ways we do that right we're gonna we have the new task that we're gonna take in I'm thinking we just call the delete method we already wrote to delete the current version of the task right and we store that in you know well I have store I don't need to store we're just going to delete that text right and then we'll call the add task method with our board data we have to transport data back into it and we'll add our new task right so in effect this isn't going to work out too great right because maybe we have to make some changes here but maybe I'll start here before we have our final product um because all we're doing is we're pushing that new task right on the end of that array and that's okay for us to start so if we make let's say we make an edit to this task this particular object here we know we're making a new task out of it quote unquote right new object out of it because we've updated let's say the title maybe that's all we change will we get back another object we'll get that object over here we'll call the delete method on this particular object and then we'll just push our new task onto the to do array right and for now we'll push it on to the end it'll show up at the bottom after we've edited it that's okay for now maybe we can go back and when we do the um we do the add task function maybe we make an edit to this so we can send over um we can send over an index number the task index number and actually like you know update that array so we put that that object back into the right place so I don't know let's start let's start and you know we've talked about I've talked about this for 15 minutes now I'm actually going to do something with it so um let's edit a task right and over here on my task view card I called this edit task all right so let's do export let edit task equal um which I can't call it uh edit task again right that's going to be messed up I have to call it something different so um we'll call it edit test camera for now I don't know it's okay and that's going to be um you know we're going to need the same kind of stuff we're getting here where we take in board data and board index number and we take in our task all right so I'll just copy that over here except here I'm going to call it edited task right because this is actually something that already existed and then we'll go into our actual function and this is the stuff so store a task a new variable we already have it in the edited task variable right so I shouldn't do anything new there we're going to call our delete method and remove the current version of the task and then call our ad and send in our new stuff so how easy is this going to work out for us let's see um if we call delete task we know we send involved data board index which we have column index which I don't have yet and the task index number right so I guess then in that case we're in test view card all that stuff exists right I've got task index I've got board index I've got column index so I can send all that stuff in and let's do this let's let's send those other things in here so we've got word index we're gonna need column index which is a number and we'll send in task index which is a number right so those things are there and pretty resiling every for some reason I don't know why because it goes away and it seems okay so cool so now we can call our delete method so if I do delete task right with our board data and our board index and our column index and our task Index right let's do that we return an updated board so I still need to store that somewhere so we can say um what I don't know uh 10th board for now equals that so we know we get a temporary board object back with that task removed and then we need to call the add task method with the board data from that we've returned with the new task to add that new task right so I should be able to just say um call add task right with the now temp board as our board data that we're sending in here still going to send in that same board index number and then our edited goes in here as our equipment task and that really should just be task at this point if I'm not going to have a better naming convention but okay um and then also returns updated board right so I could just make this a return statement here just for the sake of making this a little more readable let's just for now do let final board equal that so we know we get upward object there and then we can um we should just be able to return final board right and that'll send us back here so let's let's do this now what we're going to do here is I'm going to need to import this do I already have an Emer function here I don't right so we should import um and this is this way right so it's on a default edit task hammer right at least found that for me that's great and then we'll actually use it down here where I'll comment this out we'll just say let result equal edit task immer are we saying that our voices yelling at me because I'm missing stuff right expecting five arguments but got three so we know we need four data forward index um you know let's highlight this four data board index column index task index and then the edited task right so we've got four data first board index is there now column index we need column index and then task index and then we're calling this edited task right not new task edit the task and those are our five arguments I'm going to get rid of this now and this and then let's before we do anything else let's just consult DOT log this result right actually I don't want to completely remove what I've got there but let's constantly unlock this result just to see if we can look at the data first and see if it's actually doing what I expected to do before I start updating um everything and did I not save all of my files is something what do we got here unexpected in my inner functions file let's see what's going on here why oh yeah no doubt I didn't actually make this a function okay there we go so I've got that and let's go back here and let's set the color on this because I still can't stay on the white one um let's look at our console and let's uh make this easy on ourselves firsts right we've got the very first one build UI for onboarding flow which is the first entry in our data um if we make an edit to this and let's just throw edited at the end of this and this is too big for my console handles now we get our boards right that we just console.logged our result right and we know we're in our platform launch board and we have our to do column so now the first task here isn't going to be build UI for onboarding flow anymore it's the ODI search right because we know I've deleted but now here's our build UI for onboarding flow edited so it looks like it's doing what I want it to do and currently just pushing it on to the end of this array so now instead of console.logging this let's actually set our board data right and allow this to do the updates that it should be doing so let's reset this um get rid of my console there see what happens so this in effect once we do this this should move to the bottom of this because we're still just mapping over here and we'll make a couple edits we'll do edited title we'll do an edit in description throw a bunch of junk in there and let's get rid of sign in page it shouldn't matter what edits we make to this because we're just basically inserting a new object here and I shouldn't update this button instead of saying create task it should say edit task right we'll do that in a second and there we go now it's at the bottom the old UI for onboarding flow edited it only has the two tasks there's the stuff we put in there so that's working that's a good first step right um let's edit this again and let's move this over to the doing status and there we go that worked uh sorry you can't see it because of my blocking but it's moved to the bottom of that second column so now it's in doing so that worked um it's doing what we want what we've expected it to do so now the other process is um we can send in the the task uh index right and we can instead of just adding it in we should right we shouldn't be moving this around um and if we look at our add task function here right um it's it's only I guess I need to think about this for a second right because I can I can send over the um the index number and we can set this as another parameter here and I guess we can have a default value right um of like null and we can just check before we do this push option right because you know it's going to go to the end of an array and I don't really think I need to set up um in here you know to find the number of items in that array that does this I don't need to do that I would just say if if the task index number exists we're going to do if we have to do a different method it's not going to be push anymore right we'll look at that again we'll refresh our memory on array methods we're not going to push we're going to actually insert this thing so let's go look at mdn array methods right and mdn is an excellent source for refreshing our memory on all this stuff right so what do we have scrolling down this please display expensive changes the concept of array by removing or replacing using elements and or adding the elements in place right so splice is what we want to do and the syntaxes here we start we have a delete count if a delete account exists at all which in our case is going to be zero right we're not going to delete anything we're going to start this at whatever our index number is that's our insert and then our item so let's I guess give this a shot right here you can see some examples of it where the insert an index one so the second item in the array they're deleting nothing they insert February this is what the output is so this is what we're going to do right we're going to do our task stop splice whatever index 0 and our thing so once while we have this open right so here's the here's the push right so basically the other thing we're going to do is either we're going to push or we're going to do this exact same thing your app's not boards board index.com um tasks Dot splice and we're going to need to do our task index zero in our new task right that's a that's an effect what we're going to do um but only if we've got some value in task Index right so let's under edit task dimmer let's we've got task index there we're already sending in task indexed here so we know we have access to it so now I'm going to add task this is where the update's going to come in right and we can send over a task index right which will be a number um what is my syntax on this do I do equals null right it's number or null is that how that would work out let's get rid of my typing for a second and let's let uh we can just do equals no or zero right and let's highlight my no cannot be used here why well you know what I could do I could do negative one right um and this is still just a number right it's it's negative um equals equals negative 1 should be the way that I set that default if I'm not misremembering um so let's do let's do a test here then right because once we pass in task index if it doesn't equal negative one we'll just console.log well yeah we can start that up top before I even get into my error function so let's mess around a little bit and we'll say like if um task index is greater than zero console.log task index you would even say like index is task Index right because it's either going to be negative one or a value and then it's going to do that for us so um that's there and let's go ahead and do an edit task we've got add task and then throw in okay index at the end right and that I think is what we want let's give it a shot if we look at our console get rid of that let's make an edit here search edited I'll click that button I'm not getting anything here let's see if it's less than zero what's happening let's see if it's actually no I'm not uh I'm not getting anything so that's interesting can we just console.log task index and see if that's am I not able to do that here for some reason okay so that's coming in a zero now which is cool so I wonder why my oh right because I only did greater than and less than duh of course I was doing the first object in that array so of course cnx was zero right so if it's if it's um greater than or equal to zero is what we want otherwise it's negative one right so now I get rid of that and now that should work so we so let's edit this one again I'm going to do edited 2X and now we see task index is zero right let's go to the console log in the second one so that's fine so now we know we're getting that and instead if I just make a new task and do new task and whatever see now I'm not getting that console.log because we're defaulting that to a negative one value cool I mean it's a way to handle it right it's it's a thing to do for us um so now within our immor function now we can see if this is going to actually work the way we expect this to work with editing a task and putting it back into the right spot um where we can change both of these and we can make an if statement here right and we can say if let's say if task index is greater than or equal to zero right which means if we're passing something in then we're going to do this else we're going to do this one and push it on the end of whatever the array is so let's see that I think is going to do it for us we've got that saved everything looks okay there let's drag this back um not console.logging anything anymore so we'll get rid of this and we'll refresh this so we'll go back to our base data let's do one in the middle here let's do build UI for surf triple which will be at index one and if we make some edits here we'll do edited title we'll put in whatever in our description fingers crossed oh hey look at that now that says edited it's in the same exact spot as it was and it's got our edited description in there very nice I am I am pleased with this um used to be all the adjustments I think I need to make on actually editing task right because no matter what edits I make even if I do this again now and I start adding new subtasks in here it's all going to work the same way here it is we can close this out it's still in the same spot right let's widen this out a little bit more let's look at editing a task and uh here's here's the interesting part there now right if I edit and move a task then it's going to be it's going to have an index with it right so now it's gonna if I if I do this and uh you know what let me just take let me just take this as an example if we do this and we throw edit it here and I change this to doing it goes into the zero uh Index right because that's the way that this is set up is that okay I don't know um maybe it's it's working a way um I don't know you know the way I have things set up right now I don't have an easy way to check for this we can think on this for a while maybe we can think of a different solution um but it is working I would prefer that it go to the very end of this um but I don't really have a way I guess what I could do um when I'm removing that task I'm not doing anything else here you know if I really wanted to make this complicated I could pull out that task and then we could compare the status of that task to the status of the new task and depending on where that goes um if it's different then instead of sending that task index over we just push it to the end um but also you know I'm still I'm still also thinking about um drag and drop functionality which I haven't even really done anything with here I've just been setting up these functions and hoping that I can just carry them over um but drag and drop might be a thing too just to rearrange these functions and move them around within their array so I'm not even there yet I'm gonna I'm gonna call this a partial success for now because we're doing mostly what we want this to do and we know there's probably some stuff that we can do to change the way that this works um you know I don't I don't necessarily know that this is wrong in functionality um you know if I'm if I'm editing a task and I'm moving over that way like I can change the status of this here and this is going to push to the again it's behind me I can change the status on one of these right and it's going to push to the bottom and that's fine um if I edit a task and move it over that way it's going to insert itself somewhere I don't love it I think I'll think on it for a while I'm not gonna I'm not going to plan out a solution during this particular video but we've got a good amount of functionality working here and if we think about a different solution later we can go back and we can make some adjustments to stuff but for now we've got this edit functionality mostly working um with the little asterisk next to it of a potential adjustment that needs to be made in the future we'll see what happens to that thank you as always for following along hopefully this was a fun Journey for you as it was for me and we'll see you next time

Channel: EricWinkDev

Views: 47

Keywords: javascript, typescript, immer, react, reactjs, vscode, arrays, array methods, splice, method, html, css, coding, programming, webdev, web development

Id: f4Ps7lVEido

Length: 39min 59sec (2399 seconds)

Published: Fri Dec 16 2022