Code With Me - Edit Task Modal - Kanban Task Tracker

hello my name is Eric I'm a software engineer and this is another entry in my code With Me video series working once again on the kanban task tracker I'll link above to a playlist that contains all of the kanban uh videos recorded so far some of them are just code reviews others are code with me so here we go I believe this time around I'm going to work on the ability to edit the task which right now we don't have we can delete a task another nice little pop-up uh which works fine but I want to be able to edit a task so in the previous video we broke out some functionality uh where we've just made some custom hooks but I'd like to take another look here so we've got um our task modal in our create edit folder that's this bit of code right here which is primarily just rendering the pop-up and then we now have our functionality of this in a hooks folder with the use make task code here and the thing I'm considering is you know maybe this isn't best practice maybe this is okay um you know trying to consider the single responsibility principle um you know if if this component is responsible for making a new task and editing a task technically might not be single responsibility then right that's two things that it's handling uh but if I frame this in the way of managing the state of a task object maybe that's appropriate then as a single responsibility um you know I'm also keeping in mind the dry methodology don't repeat yourself so you know all of the stuff that's going on with these components here it would just be repeated again if I'm going to make another component that handles just editing I don't know um we'll we'll mess with it we'll see what it looks like for us and if I change my mind I change my mind let's see what happens so called so much other stuff so I've got our task model here and I guess the first thing we should look at is when we go from the actual The View task card test view card there it is um I don't need this change event here anymore so we'll get rid of that so right now um we've got this edit button over here somewhere here's our edit button which isn't doing anything um and our first step is going to be clicking that edit button to make our task modal appear right so what do we have here already um we're going to do something similar to what this delete Model is doing right where if we click on delete task it renders back delete modal because we have a state for that right so let's let's start there and let's do a const we'll do edit modal and set edit modal and we'll put use state false to start that out and nice and easy down here on the edit task button and we'll just throw it on click here and an anonymous function and that we can just update the state of set edit modal and we'll drop that to true and right now it's not going to do anything but a better State because we don't have anything rendering here um but just like we have with the delete Model at the bottom and let me cut this out of the way we basically have a ternary operator here and it just says if the lead modal is truth the truth the value or true to render this delete mode only pass in a bunch of um props here so we'll do the same thing down here and we'll say if edit modal is true and then What's happen let's render this what do we call this cast modal cast modal all right so task mode we're going to require a bunch of props right so we can see everything that's here show add task is missing set show ad task um column names and add new tasks so show add task and set show add task those are just our visibility right so if I get rid of this for a second and make this pop back up um which now we're going to use this for two different things you know they may make inventions here are a little off right because if I click this button to add a new task that's the show add task coming from um I believe the at the high level of the app right set my board show add task yeah so the structure of our app here is we have our our app the high level and then the nav bar which is where that button lives to add a task to the board so um we're gonna have its own uh show add task quote unquote exist at task view card level so that's what our edit model is going to be so rather than passing in show ad task and set show at task which is actually let's go look at um the task model because I don't think I'm doing anything with show ad task besides setting it to a false value and yeah and I'm doing it here and here and I don't know why I did this this way because I I don't need to pass in the value of show ad task I can just make this false in both of these uh places and I don't need show ad task here and I don't need show add task here right um and I guess what I'll do is I'll go back to app and I'll remove that as well uh because right now that's going into the nav bar show add task we don't need it don't need to pass that through and then we can go to the navbar component which is in my nav bars that bar show add task I don't need the only thing I need is the setter and see this is doing the same thing here where we're setting it to the opposite of show add task right um which this case is just going to be a true value this is the button up here that we're clicking on don't need it to go to the opposite of what it starts as uh so we can get rid of July task here just a little cleanup thing right of things I don't really need in here that I decided to put it for some reason and I guess that's it then right July test goes to true wordless is giving me an issue for some reason okay we every section whiteboard is missing a type can I accidentally remove that for some reason it doesn't look that way does it so let's uh let's save everything and see how things are working here oh yeah oh right we still have props we need to pass in here that we didn't do yet I'm still working with the mess up this is still working so that looks fine um cool we'll come back and deal with that another time and now let's work on our task model right so we've got the requirements here now officially of set show ad task which in our case is not going to be show add task it's going to be edit modal right set edit modal so which I should probably adjust that name then right so I don't confuse myself later because I think that has the potential to happen here um because the task model and if we do instead of set show at task we do set show modal right change this and anything else we've got to set show modal and then we can go back to our app here and change this to set show modal for our well actually you know what we can navbar that's fine but we need it to show up on board View forward View except show my task so we'll do this about the set show modal right so all that should work out I think so it looks like that's oops yet again need to comment this out to make sure all those adjustments are working and we have this activity first I've got to take care of that okay so that's working fine all this stuff since he's working cool so we know those adjustments are fine so now we have essential modal required column names required to add new tasks um which what is add new task right add new tasks which is this comes down from our app for our board view actually let's see or View add new task right which takes the task that we make in that modal sends it back calls out to our Ember function list and basically insert this new task into um whatever board we're adding this to right so when we go through this process of editing a task I'm still going to do that in an MR function and I'm not going to pass add the task back to here right it's going to this is going to be called upon from a different place which is what's going to be a little bit confusing of the way I'm setting this up so maybe this is a bad idea um but I think I'm going to roll forward with it anyway um so instead of this maybe instead of this being add new task we can call it return task right and in this modal like what this modal does is it handles the state of a task whether that's making a task out of nothing or editing a task that exists and then sends that task back to whatever called it so that it can be handled appropriately right so instead of add new task we should call this return task all right so if you only have a spot that I've we'll push it up there return task and we'll adjust that so now in board View instead of this being add new task we'll call this return task equals in this case the add new task function right so let's just make sure I didn't mess anything up we'll once again go back here comment this out save all the stuff and we'll give this a quick refresh even though it should be fine make sure we can add the test task with whatever I don't know why I'm even bothering typing anything um and that works fine all right so we've got our test task here with our subtask that we can do all our adjustments with so that works all right so now we've got a little bit better of a naming convention if I'm rethinking this model in a different way that modifies a task object um so we've got set show modal whatever is going to control to actually show that modal column names which will be passing in and return task right so um which if we come back here you know same thing I've got some functions in here that I haven't split out but I'm going to leave that for now maybe we do that in the future so edit modals set edit modal we're going to pass that in as our first set show modal so set show modal equals set edit modal so we've got that in there and then we need column names which we have column names here as well right which is just being passed in from parent components whatever columns we have in that board so we can just make that nice and easy call names equals call names and then the last thing we now is our return task but we don't have anything for yet but we're going to call this um I don't know we're going to make a function for this called edit task I guess right Maybe how are we working this in board view a new task um it's just a function where we call back that task right and we send that task over to ammo so we're going to do the same kind of thing let's just copy what we've got here and we'll go back to our test view card and we will put this over here um do this as edit task we'll receive a new task we're going to call in an unnamed dimmer function all right adjust to use a currently and uh named Mr function and we'll say edit and ask because they don't want to name let's say you know apparently non-existent function that's going to do the same kind of stuff um not sure yet how all this is going to work out but we know we're going to handle this the same kind of way so now edit tasks exists and it's going to work the same kind of way cool I'll save all nothing should freak out nothing should break I'm wrong what does this say is breaking here oh I didn't finish my ternary operator um basically we're going to have this uh or no right that's that's that okay no did I somehow it looks like I messed up a bracket somewhere and there we go that happens sometimes I don't really know where I messed that up maybe when I oh yeah I see when I copied this over I didn't copy that bracket so that makes a lot more sense okay so this is what's going on this all works still um now if I open this let me click the edit button we should have our pop-up which is cool and the issue we have now is that I'm not getting any data in here right we didn't set that part up yet and again this is the part where I'm struggling with this where I'm you know I probably shouldn't be doing this the way I'm doing it I probably should handle this separately um but I'm going to continue on and I'm gonna uh make this work on both for the time being and what we can do here is from the task view card we've got a task object here right and this task object contains everything um that exists here in in this task it's got our title it's got you know let's look the one that has a description it's got our title it's got our description it's got our subtasks it's got you know everything in here so we could just pass that over to our task model and we should be able to display that information right we would have to um pass this over actually to the the hook that we created so this might get a little bit funky but let's go let's go look at that cloak right because again like this Hook's not going to do anything different let's look at this make task code let's put it over here this hook isn't going to do anything different than the logic we've already set up so there's no point in me doing this again right like instead of just only passing in column names here if I also pass in the task then instead of saying start with this title description uh title description and call names default of blank blank and common zero we can just say like if task exists you know do it as task dot title do it as task dot description do it as task.status so let's let's give that a shot um and let's let's see how this works out for us so we're uh we're going to have to make this a prop here right where we're going to send in um we're going to send in task which is a type tasks and we'll need to bring that in as our prompts whatever our task is right and once we have that and instead of just sending this over to column names over here we're going to have to send to our Hughes make task book we'll send over that task all right right now over here that's not accepting anything you can see I'm getting an error it's just saying it doesn't even expect it expects one argument but got two so let's put in our task here right which is going to be our pipe tasks I've got my type up top so that's cool and in this area now here rather than just being title equals this we can say title would be task Dot title or blank right so in this effect this is just going to say like if test.title exists at all use it otherwise use a blank title right so the only thing of course I'm missing now is actually sending a task in here which this is the optional thing right I'm not always going to have a task in this because I'm calling this particular component in different ways so if we use that plus button up top that's not going to send a task over if we use this plus button that's not going to send a task over so that's optional this is where I'm kind of breaking that single responsibility principle and I'm aware of that I just feel like maybe it makes sense to do that here um I don't know so I'm gonna just go with it and we're going to let it ride um so from the task view card this now is where I'm going to be sending in um let's expand this out again now we're going to send in the task all right task which was optional is the task that we have all right let me show it yeah go away it's just a little bit of laggy for me um so let's save all I think I've got that all worked out so far so now what should happen for us is let's click out of this um I make a new task oh I'm getting them a blank there which isn't great right so why is that happening so that's erroring out so we'll take another look there does it work for me if I go into the edit well that's that's working so it is importing the title but it's not using the blank and I guess is it because I haven't made that optional does that matter this should be optional right see maybe this is a bad idea still see now I'm okay right now that it's optional um you know it doesn't need to have that task in there so it's giving me that blank description here and if I load this from the edit now I've got my title right that was in this field UI onboarding flow so I can do the same thing with description and column names and again like I'm struggling with the single responsibility principle here thing thing here because it's just if I'm thinking that this modal handles the state of a task object then that's what it's doing whether that's a new task object or an existing task object so let's let's throw in the other stuff we've got here we've got uh task another question mark right dot description or blank and then we should also um test.status I think should work right status or column names um which I don't actually test out status isn't going to work immediately I don't think let's see what's going on with um well let's see let's see what's okay one that's in doing so we know the status is doing I'm going to hit edit task still says to do and what was our work here how did we do this so we are we have logic to update the task status but I don't think we're actually using task status to display in a task mobile right so what what are we doing here on status select is just getting column names right so that's a problem too um because that component is only getting the column names where are we status select this component is only getting the column names right now but I also have this set up to receive a task right so we know we can pass task in here this this is uh I already had this set up previously which is great because I do have if we're sending in a task use the status of the task right and make that the the selected option um so we can now from our task view card also send in task empty status alike which does exist there and the edit edit card we want to cast modal right okay so the test modal now is data select isn't using task let's have it use that task prop and send in the task and that's fine so now we can see this updated the doing let's close out and let's let's look at another one here so this one's going to say to do if we click edit which is fine we know that um but this one in the doing column here you know this compo it's the same component right this current status component with the drop down select is the same component as if I go into my edit model it's the same thing now it says doing right which is correct that's what we wanted it's using the task status when before this didn't have it because I just made this as making a new task now it's handling editing or current task um so that was already set up so we know it's going to either have task data or not this was set up to receive task data now it's working the way we want it to work right and still the logic that exists in this drop down allows it to change whatever status is there all that stuff's going to work um we're just building off of all the stuff that we had existed we're not repeating any code we're not duplicating any code this is all working well don't have a description here let's find one that has this one has a description right we know that and edit the description there shows as well subtasks we don't have yet right we're going to have to work on that so let's let's make that work for us um we've got in our use make task uh we're sending in the task we know within that task we have subtask information right so the same kind of thing we just did where instead of starting the subtask array as a blank array we should be able to make this like I think this should work out the same way for us if a task exists test dot subtasks right or a blank array and now if we go back and we look at you know this has two subtests to it that we go and we click on edit and there we go now our subtasks show up right so it's just changing the initial state of how this modal is managing state and that's what it's doing it's managing State going to just continue to convince myself that that's appropriate here um and all that's working right so we've got that set up we're already at the 30 minute Mark um or I'd like to do my best to make these videos shorter and a little more digestible so we'll we'll call it at this stage we've adjusted our task modal to now handle editing a current task um almost right almost we're just sending in all the data the next thing we actually need to do the next time we're going to handle this thing is none of this logic in the U State Hook is going to change it all and we'll prove that to ourselves now before we actually end this because um we've got our create task logic here in the in the task model which again I left that in there just for the time being I might just leave it in general but all this is doing is it's taking our um final task data and subtask data from this hook combining it into a which I don't think I need to spread these I could have just left that alone but whatever um it's it's making it into a final task and um sending that task back to the parent that called this modal and then it's closing itself all right that's kind of it so if we go into our task view card which this is the function right let's that we were close this for a second I'm gonna go ahead and close this and if you want to review you know any of the information that was in that hook we um I believe I had reviewed that one and we also set the same methods thing up together in the um the task modal creation uh video but you know we know we're going to receive a new task here so I should be able to console.log new task which in this case technically isn't well I guess we'll call it new task right we can call it edited task that's fine right we want to stick with the edited task if we want to make our terminology a little bit more appropriate here instead of task we get an edited task back um so let's bring out my console here all right and I'll once let's close this let's kind of start fresh let's look at the console bring this up a little bit higher and you know let's look at this this one that has title description subtasks and is in the current status of to do you have to go click on edit task if we just say you know edited title and let's completely scrap this description and just do brand new description and you know we can add a new sub task I still have I have something console logging I guess I have something on the add subtask console well I think I'll go get rid of that in a bit in task we can get rid of external testing and let's leave status for now and if I do create task here we go we've console.logged or edited task and brand new descriptions status is still to do we've got only the two things we've left here this didn't change right we didn't actually make this change in state but we can see we've got our updated task correctly and we didn't really do anything new logic wise we just kind of sent the data into our already existing logic that handles managing state of a task here's our edited title so that's working um let's try this once more you see my edits went away right like I said it didn't actually change the state we didn't actually do anything with that let's just change this to doing let's do create task let's see if that okay status has do in there right so we know all that's going to work for us next time around we'll take this task which might be super quick we'll take this task we'll go send it over to Amer we'll write an MR function to edit the task in question we'll talk about thought process and logic of what we're going to do there this is what we've got for this video hopefully you enjoyed following along with a slightly shorter session we'll see you next time

Channel: EricWinkDev

Views: 41

Keywords: javascript, typescript, kanban, react, reactjs, code with me, code along, codealong, props, modal

Id: omTsfJQiatU

Length: 36min 38sec (2198 seconds)

Published: Thu Dec 15 2022