???????????? Visit Chris @ Coding in Public for more of his tutorials:
https://www.youtube.com/c/codinginpublic
????????????Get early access to his entire course now on Net Ninja Pro:
https://netninja.dev/p/budgeting-app-with-react-router
???????????? Access the course files on GitHub:
https://github.com/coding-in-public/react-router-budget-app
???????????? Live demo of the finished app:
https://codinginpublic.dev/projects/react-router-budget-app/
???????????? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –
???????????? React Router docs –
???????????? VS Code –
Welcome to lesson 15. in this video We're going to set up a page so that When we click on this budget route it Actually shows us the budget itself now To start with we've already got it Linked up here we need to add this over In our route kind of kind of browser Router list and we've done this inside Of an object you can see that for each Of them we simply have a path and then An element loader all this kind of stuff So these are all children under the main Route let's go ahead and just add Another one and inside here we're going To say budget except in this case what I Want is a budget and then I want some Kind of like Dynamic variable so this is Called a route parameter and as long as You prefix it with a colon it Understands that whatever you're passing In here should be dynamic so you can Pass in budget slash whatever and it Will pass it in as that param of ID and For now let's go ahead and comment out All of these right here and I want to Add in a budget page this doesn't yet Exist so let's come over here and inside Pages we're going to add budget page.jsx Then once again we're going to just Return out here this budget page and now Let's backspace and see if it'll import For us and it does I'm not seeing here Though so let's go ahead and just copy This one down and change this out to
Budget page All right close that down and now if I Click over here it should actually go to A route you can see how it does it just Says budget page now notice it says Budget and then right here it has its Uuid so whatever its unique identifier Is that's what the kind of custom route Is for this I did that in part because I'm not checking if they've named the Budgets the exact same way which is Probably something you'd want to do then You could list it like that like budget Slash groceries or whatever but in this Case I'm just using the uuid of course We want this to be dynamic and we can Make it Dynamic based on this route Parameter that's been passed in so let Me open back up this budget page and Over here we're going to add a loader And this loader is going to kind of have Some superpowers where it's going to Look at that route parameter so here This is going to be an async function And we'll call it budget loader and in This case what it's going to do is take In params so it'll take in any primes That are passed to this page now we've Written a helper function that can help Us get all matching items in this case It should just be one that matches this Bram but I'm just going to say constant Budget and that one was await get all Matching items that pulls them from the
Helpers up top and if I look in here the Intellisense is telling me I've got a Category a key and a value well I always Know that this category should be Budgets right because it's going to be a Budget the key I want to look at is the ID of the budget and I want to know if It matches this value in this case I'm Going to look at the params dot and what Should I call this thing well if I go Back to my app you'll notice that I Added in the param here as an ID so I Need to name it whatever I've named it There so if I named it pizza I got to Name it pizza here alright so route.id Or params.id is what I'm going to name It since I called it colon ID now in This case remember this gives me an Array back so I just want to get the First thing off of the array so I'll do The zero index and next I want to come Down here and return here my budget All right so there we go and now how do I get this in from the loader well Remember I can say const and I'm going To destructure the budget from this Custom hook use loader data this should Pull on up top here and it does let's Make this a little cleaner so react Router Dom Imports and helpers Now even though we've written this here We have yet to add it to our app so Let's go ahead and do that and here I'll Say budget
Loader that should have pulled that in Up top here let's just double check that It did budget page and budget letter Okay cool so I've got this set now if I Come over here and I click on this it'll Still just say budget page but I Actually have access to the budget right Here so why don't we go ahead and update This to be something like budget.name so If I save it here there we go the Budget.name is showing now there's one Thing we need to think about and that is What happens if I pass in something that Does not exist well right now it just Gives this ugly error wouldn't it be Nice if I actually said something more Specific here well I can do that so Let's go and do that right here so I can Check and say if there is no budget so If I get undefined or a null then I can Throw a new error so throw new Error and the custom message I want to Send along is the budget You're trying to find doesn't Exist So now it tells me the budget I'm trying To find doesn't exist Now if you remember how this error Element works you'll see that we've got One on the dashboard itself and then We've also got one let's see up top here However if I want this to be for kind of Embedded in this section where this Belongs I need to also add it down below
Here so I'm going to add it in right Here which also means I should probably Add it in for the expenses as well so I Can just use this all throughout now This I don't actually have an element Showing so it shouldn't be a problem Here but now you can see it's actually Inside of kind of the frame of Everything so the budget you're trying To find doesn't exist now I know I can Go back and now it says we've still got A problem okay here we go all right so Now we're set so if I come back in here And click on this now I should see Groceries if for some reason I go to a Budget that doesn't exist now I'm Getting this here now let's go ahead and Build out this budget page a little bit More because we wanted to say more than Just the name of the budget So the first thing I'm going to do is Add a class on the kind of surrounding Div called Grid at Large Then inside here I'm going to have an H1 And this will actually have a class of H2 so it'll be a little bit smaller than A normal H1 but semantically still in H1 I have a spin in here with a class of Accent and this will now read budget dot Name And just overview So like groceries overview Now below this H1 I'm going to have Another container and this will be a
Flex container so Flex large and here I Want two things first of all I want my Budget item that's something we created Before and showed on the home page This takes in one thing and that is a Budget And this should be my budget So there I get the overview and now I Also want to show the expense form so Add expense form and here's the benefit Of building out all those components is Now we get access to them now you might Remember this expense form takes in some Budgets Now normally this would be an array of All of my budgets in this case if I pass In just one budget like this inside of An array which is the actual Budget on This page remember if I do that it Limits it to whatever the current budget Is so if there's only one budget it only Shows for one budget it kind of Scopes It to that so that's why I set it up That way so that on these individual Pages I don't have to select a different Budget than the one I'm looking at now Down below here I actually want to list Out all of the expenses for this budget But I don't yet have access to them so I Need to get them up here in my loader Function so I'm actually going to copy All this down right here we're going to Also grab expenses now in this case I'm Going to look under the category of
Expenses And what I want to do is look at the Budget ID on all of those expenses that Come back and I want to say do they Match the prams.id which would be Whatever this random string is that Would mean their expenses that belong to This budget then I can come down here And just export this as well so expenses In this case it would be expenses that Are basically scoped to the budget I Passed in let's now get access to these Down here and we'll come down below and Down here assuming that I have some Expenses And that the expenses dot length Are greater than zero Then I want to Output this jsx so a div With a class of grid medium will kind of Be the container that holds everything And H2 this will say whatever the Expenses are we might as well just add a Span in here with a class of accent and This can say with the budget dot name is And then finally I'll add in my table Component that we've already created and Hear what my expenses to be here And I'll just pass in my expenses And close this off now assuming that That pulled in up top here let's just Double check yeah so let's go ahead and Separate these out we'll call these Components Now I need to actually add an expense
Because I don't think I have any yet oh It's not allowed yet okay so let's let's Double check to make sure I'm not Getting any errors no it does look like I have some expenses let's just double Check down here yeah I do but it's not Showing down here so let's just double Check that we've done this all correctly So when I'm first loading all of this Right here I should get my budget and my Expenses I'm waiting getting all matched Items that have this category and we've Got a budget ID and here's the problem All right since I copied this down we're Grabbing the first item and really what I want is all of the items and then Looping through all of those so now You've got an array that I'm passing in Down here that's what I can pass down to This table that should then display down This way Now there's a couple things I want to Think about here first of all if I click Delete here this method is not allowed Yet so we have to actually create an Action for this page like we did just a Moment ago in the last video for the Expenses page however I also don't Really need to see the budget because The budget's already here also it'd be Nice if this whole page was themed to Whatever the color of the budget was Well not this page this page all right So some of it is and some of it of It
Isn't So let's go ahead and just do the Whole thing so what I'm going to do is Come inside of here and I've set this up So that if I again set the style so I Can say style and then we're going to Set the variable of accent we'll set This to budget dot color now if I do That everything on the page including All this text even the forms themselves They'll all take on that styling so I Like that even these tables Take On The Styling so I kind of pass that down in The CSS now the other thing I want to do Is on a lot of things on most of the Other pages I actually want to show this Budget but here I don't so I want to Control that inside of the table Expenses so I'm going to pass in an Option here called show budget and I'm Going to set this to false and then Inside the table let's go and come in Here I should now get a second prop here A show budget and then by default I'll Set this to true that way I don't have To go back and refactor my other things I can just basically pass in false when I don't want that to be the case now Where do I want to show that well it Would be right here right and here I Want to replace this with a ternary that Says show budget if that's true then go Ahead and show the budget otherwise just Pass along an empty string so you can See already that this header disappeared
Because now I'm passing along an empty String since I've now said show budget Should be false just on these Pages However if I come back over here since The default is true it should still show On there and on the expenses page now I Also want to pass this down to my Expense item so show budget This should just be the show budget that I've already passed in so I'm kind of Prop drilling a little bit here come Into these expense item and here we can Do the same thing right here on this Table data so we'll just surround this And say that if show budget is true then Go ahead and I'll wrap this in a Parenthesis here show all this stuff And let's see I think I added this a Little early there we go okay so now if I save that and I pull in show budget up Here Show budget Now on this one it doesn't show and the Whole column is gone because I've got an Empty header row and then nothing in That column but if I come back over this Way I get the budget and I get the Actual button that shows up now the Other thing we need to handle is this Right here so how do we delete items Well remember it's going to submit to This page by default that's how we set Up this expense item right down here you Can see there's no action so it should
Just submit to whatever page it's on Which means I need to handle it over in This page now we've got an expenses page Right over here or we just had to do the Exact same thing so let's go ahead and Just copy this out and we'll use this Action over on the budget page so I'll Come up top here I don't yet have an Action I just have my loader so let's go Ahead and come below the loader and We'll add an action we'll call this Budget action we're good with all of This we don't yet have delete item in so Let's make sure we grab that the other Way by the way besides deleting and Going forward is you can just hit the Control and spacebar and it should show You any autocomplete things as well same Thing with toast I need to do the same Thing pull that in as well I think all The rest of these should work should Still say expense deleted so that should Work just fine let me come up top and Just make sure we've got everything Organized here helpers are here let's Just add this in as a library And we should be set now I still need to Add this to my app So let's do that And here we'll simply say budget loader And that should pull in when I hit enter Let's just double check budget loader Right there good and then I also need Nope I already had that so budget action
Budget action And now let's double check budget action Okay so now if I come over here on the Actual groceries overview page budget Forward slash whatever the ID is I Should be able to click here and now it Deletes it perfect and it keeps me on That same page all right if I come back Over here let's add another something We'll add it here maybe we'll add a Couple things just to make sure that all Of our pages are still working properly And then what I can do is delete one Right here Maybe I'll go to the expenses page Manually expenses like this delete Another one right here then I'll go into My groceries overview right here and We'll delete another one right here Now we also haven't have not handled This either so if I came in here and I Started to try to add something you're Going to see we've got a problem so Let's go ahead and do the same thing There so let me come up to the dashboard Because I think that's where we already Had that right Not a new user we're not creating a Budget we're creating an expense so I'm Going to grab all this out and we can Kind of duplicate this this is where you Might want to start extracting some of These because we're kind of duplicating Some of this code but I prefer to kind
Of keep all the action for a given route On that route so I'm not looking around For it constantly so whether you're Importing it or however you want to Handle that that's kind of how I tend to Do it so we've got this action here Where you can delete the expense the Other thing we can do is create an Expense in this case the new budget Amount even though it's hidden should Still be set to this value all this Should still work so let's see if this Works so if I come over here let's go Inside of this oh we don't have a way to Get to it yet so let's come in here We've got to add that next I'll come in Here and click groceries now I should be Able to add another one like this and it Says it was a problem creating your Expense 10 bucks says I never imported This create expense function so let's Try that I'll create expense pull that In just to make sure yeah there we go Create expense pulled in now so let's Come back down here coffee something now It adds it perfect all right so Everything is working as expected we can Delete them here as well we've got two Different actions going on on this page Like this and like this perfect all Right now if I come over here and I Click delete user And I say delete all data that should Still work come in here add this
Person's name Perfect groceries so we're getting Really far along the only thing we need To do is now have some kind of way to Click into the groceries budget directly Here so that's another thing we need to Worry about when I click into here if I Go to the kind of final page with this View details button now I want this to Change to a delete budget because I also Want to be able to delete a budget only From the budget overview page so once I'm viewing an entire budget that's when I can delete it but once again I should Get a scary message like this you're Going to permanently delete this budget All right and then I can click OK or Cancel it and jump out of that now here I'm not actually checking on these I'm Just deleting them as soon as I want to You could do the same kind of check that We've done up top here and the same kind Of check we'll do on this delete if You'd like to but I didn't do that Because I figured you might want to Quickly delete these and it was a nice Way to kind of vary the different forms On here so in the next video We'll add These buttons where we can jump in and Out of the different budgets delete them And handle all that logic
