Code With Me (mini) - Custom Hooks - Kanban Task Tracker

hello I'm Eric I'm a software engineer welcome back to my kanban task tracker video series this will be a code wish me video today um I will link to a playlist of all the kanban tracker videos that I have made so far in case you're interested in going back and checking out some of the previous updates whether they were code reviews or just other follow along videos um the first thing that I want to do today is I'm taking a look at some of my files here and we've got my create edit section I've got a board modal that makes a new board and I've got a task modal that makes a new task right that is this little pop-up where we can add more columns and this pop-up when we can do the same thing add more subtasks they're working in the same kind of way but these files are pretty large and I'm trying to keep in mind some of the solid principles in application development primarily the S which is the the single responsibility principle which um if you're unfamiliar with the solid principles look them up you know it's it's some good information to know primarily they are derived from object oriented programming which is not what we're doing in react see the way I plug that in um we're doing functional programming in react but everything is a component so we can kind of treat our components like objects or similar um but really you know I've got a lot going on here in this particular component this task modal where right now all the code lives here that is responsible for when we open this form you know updating all of these fields and keeping track of the state of all these fields and the subtask count and each individual subtask all that stuff lives here with all of our functions so I think what I'm going to do is I'm just going to break most of this out I think I'd love to hear probably this whole chunk of code I'm like well I'm going to leave this for now um I'm gonna break it out into its own hook just to kind of clean this code up a little bit and make this mainly responsible just for rendering the component and then we can have the functionality live in another file similar to what I have going on with these Ember functions I have them in a utility folder over here where over here I've you know this is the only file that has imported Amer and anything that you know we're updating our large State here um all lives in this particular file so this shouldn't be too complicated we'll just move this stuff over first make sure everything works and then maybe we'll make some additional updates so first things first I should I guess you know looking at the way I have this whole thing structured I've got you know my components folder with the create and edit so things that can create or or edit which is the intention these two things which that even thinking about single responsibility principle is like it can create and edit which means it's two different things but if I uh consider it just manage the state of a single task or a single board I don't know that's I guess up for interpretation but also thinking of um the dry methodology right like don't repeat yourself if I make another task modal file that is basically exactly this again but just just to hit it just to handle editing I don't know it seems repetitive to me so um when we do edit stuff I'll probably just reuse this anyway once my guests make a folder that's specifically for hooks that should be fine so we'll make a hooks folder and in our hooks folder we'll make a new file and we're going to call this views uh make task I guess we'll call it and I'm gonna expand this out so we've got a lot more room to work with that's the lag that's the screen recorder lag wonderful all right so we've got use make task which we're going to put over here which right now has nothing in it and then our task model over here um so basically there's a couple things I want to do I need to pull in this this you use make task which we put use in front like that's the convention so react knows that this is a hook um we're gonna hold State and vat right our and here we have our new task and set task State we've got our same thing for our subtask data so I'm going to just copy this whole line of code and pull this over here once I move everything over we'll see what we don't need in this file on the left anymore you know let me actually completely full screen this thing while it chugs along oh this is bad all right so let's start pulling some of this stuff over I know I'm going to need my task and subtask definitions as well at least task we'll see about the other so we know we want to take over our state that holds our uh actually before I even paste this in we will do um let use make task equal a function and that's where all this is going to live all right and that's our state first um I'm already getting yelled at by typescript I need to pass column names uh into this function so we're going to throw this up here call names all right which is if we look back over here in our props it's a string it's an array of strings so we'll type that out here string array okay and I you know I should be able to just pull all of this stuff in we'll do this one section at a time I guess so these are all of our functions that handle updating the form and making the title description and status of our new task and then we've got the edit subtask information and we'll kind of we'll cut all this stuff over down to here and that's going to be what handles our subtest so you know this isn't a huge file now I guess I could also break this down into two individual files of like use make task and make some tasks but I don't I don't know I don't really think that's super necessary to do um and then of course at the end we're gonna have to export um uh use make task I guess export default right okay and then what I'm gonna do here is at the very bottom of this we'll do a return and we'll return all these individual things that we are using in our file in our now it's primarily the render file right that renders the component with all of our main HTML stuff um so let's take a run down here and look at the things we're going to need that you know now I'm getting those errors that I don't have here anymore so um we're going to return and we're going to destructure a bunch of this stuff we're going to return new task that we need we see up here we're going to need new subtask um we've got edit new task over here we've got edit new test again new task new subtask is here you've got edit and remove subtasks and we'll have those and then remove subtask we've got add subtask and we've also got change task status add subtask and this one's in here too right change task status okay so now oh I've got a well I have this in here twice for some reason oops um what am I missing then well we'll we'll see what I'm still missing after I pull this stuff over so we're gonna need to apparently I don't need subtask in here anymore I'm not managing state in this file anymore so I don't need to use State and I'm not handling that event anymore so I can get rid of that we do still have context in here so we'll leave that um and now we're going to need to import our file support use make task and then down here we can destructure all that stuff we just did and we'll do the use make task function because this is going to return all the stuff for us and I'll just copy all those things we just typed out okay what am I getting an error here for oh we need to include our column names right because we know we pass that in as a requirement and there we go um everything looks good over here we're not using use context over here so we'll get rid of that and are we missing anything in our file do we have any more error messages over here it doesn't look like it so that's great and let's make sure we saved everything save all looks good we'll shrink this back down and let's see if our board is still working correctly so we did the ugh that white we did the add task functionality so so far so good we've got our pop-up and no errors and no blank screens we'll do a boy that lag we'll do a test title here we'll do whatever this description is gonna be we'll add some subtasks so we see we've got one two and three and we know if we click on two that goes away that's still working correctly we'll put this in doing we see a default to do which is fine as intended and there we go that's still working out for us we've made our custom hook we moved our functionality over into an individual file and we took a lot of the bulk out of that task modal file so that's looking a lot better we might make this a short one so this is a this lag is killing me so we've got that which is looking fine and let's go do the same exact thing we just did to I guess the board modal right because that's doing the same thing and we can do a make board hook um so let's go ahead and do that we'll do another file here we'll do use make board dot TSX and we'll do the exact same stuff so we'll copy this first line over our use context and use state which we know we're not going to need to use context in here so we'll get rid of that right away we'll copy our types in there we'll see what's needed and we'll set up our hook let use make board as a function and at the end of course we're going to do export defaults use make board great and then we can start filling some of the stuff in so here's our context here's the state stuff and same thing I'm going to leave that send forward function over here since these you know these are props that we're sending in from the parents so let's cut all that stuff let's just go ahead and drop that right in here and we don't need board over here which is fine so we can get rid of that and at the end we're going to do the exact same thing we did and we'll return our individual items here so uh we know we need a lot of things to come back we need board name of course we need columns or two or two pieces of State so we've got board name we've got columns we're going to need all the actual functions uh which would be oh yeah I have set board name we need so we'll do these after that set forward name columns uh do we use set columns in this we use remove I think set columns is just within our hook now which is nice so we shouldn't need to pull that over but we do have columns we have update call name we have remove this column and we have ADD column so we can do exactly what we just did copy this entire thing save that file we'll come back over here we no longer need columns in here so that's a nice we don't need you state in here anymore of course we're not managing state in this file we can import our use make board thank you Auto Import and then we can do our let's destructured stuff equal use make board function and that should work for us all my errors go away there which is great let's do a quick check down below here to see I guess I can word wrap this a little bit more are we missing anything no visible errors here right so let's go ahead and pop this down and make sure everything is saved in my code save all is good create new board this is we'll call it test board lots of columns three of them four of them why not with one two three four we'll remove three that still works correctly create board there's our new test board awesome with one two and four that we set up over here and we can still add a task to this thing as well and we've got subtasks here and we'll make that desk all right cool easy enough um I'm gonna cut this as a short video right now which is just a little uh introduction to I guess making hooks um or just cutting down this file size I would like to take a look at what's going on with the this awful awful lag and see if we can't make that a little bit better for our next recording session um which will tackle uh editing these tasks right now we've got the ability to delete but I don't have the ability to edit so we'll take that next time

Channel: EricWinkDev

Views: 32

Keywords: javascript, typescript, react, reactjs, custom, hooks, customhooks, custom hooks, useState, kangan, kanban, task, tracdker, tracker

Id: 4ACkwoOSOcE

Length: 17min 28sec (1048 seconds)

Published: Wed Dec 14 2022