???????????? 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 –
In the last couple of videos we've set Up this table and then made it to where We can go and view all of our expenses But either way they use the same table Component and they've got just three Columns right now if I go to the Finished code however you can see we've Got five different columns that's what I Want to add this time around a link to Whatever budget happens to be connected To that expense and then a way to delete That individual expense so all that is Done in this table component right here So if I command and click it should open It right up now the very first thing I Want to do is add another column in the Header area so that would be right here We'll say budget and then I want to add One more that's just going to be empty So we'll have five items and each of These will be part of the table headers So if I save this and come over here you Can see I've got that and eventually We'll have one more one there's actual Data to show below it now the other Thing I need to do is then come into my Expense item so I'll command click into That and actually show one more thing as Well so let's go and just copy this down For now now you can see it says budget Where it really should be listing out a Link to the actual budget itself now we Don't actually have access to this right Now we just have the expense but the
Expense does have a property called Budget ID we can use that to look up the Actual budget now if we were just Linking to it that would actually be Enough because eventually we are going To create a route for each of the budget IDs that's a dynamic route in this case I actually also want to show the color Of whatever happens to be again if I Come over to the finished code I come Over here and let's add first of all Another budget so something for uh Whatever all right like that now I can Come in here and let's add another one Whatever this happens to be and whatever This happens to be and now you can see I Actually get a different color because It is a different budget it's nice to Kind of be able to see that so if I want To get that I actually have to go fetch The budget itself then look on the Budget and figure out what its color Property happens to be so we're going to Do that right over here and I need to Write a helper function that will allow Me to get whatever the budget is so We'll eventually do that and it's going To be called get all matching items Because we're going to use this on Several different things and we want it To be able to take in Three things a category this category For us in this case will always be Budgets but we'll use this uh this
Function somewhere else as well so this Should work the key which is the actual Thing we should be looking at which is We want the budget's ID and what I want To find is any budget that has the same ID as the value of expense dot budget ID Now this shouldn't make a lot of sense Yet but hopefully it will as we get Going so let me go ahead and write this Function then I'll walk you through it So I'll come over here let's open up our Helpers and maybe let's just come right Here so let's write a little note here That says get all items from local Storage something like that and let's Export this and here I want to take in Up to three things here a category key And a value those are the things we just Passed in a moment ago and what I want To do is first of all fetch all my data So const data equals fetch data and what I want to fetch is whatever category I've passed in so if there's nothing There once again I'm just going to get Back an empty array that's what I want So this is either null or undefined it Should just pass along an empty array Then what I want to do is return my data Dot filter and I want to look at each of The items so that I can use that key Dynamically here I can use this Bracketed syntax to look at the key and Just say does it equal the value so let Me save this and let me jump over here
And then I'll talk you through this so I'll do the little backspace trick and It should pull that in right there so Let's see get all matching items so what I'm doing is I'm taking the expense That's been passed into this item which Should be anything basically in this row So all the things in this Row one of the Items that comes with an expense is the Budget ID that's connected let's go back To our actual one right here it's Connected whenever I create a new Expense now in this case I only have one So once again let's just I don't know do Something and then add something so now I can see it's connected to this right Here so this will actually assign it That value of whatever the budget is so I should have access to that what I'm Doing then is calling this function and Telling it hey I want you to look Underneath the budgets so look at all Those local storage items and the key I Want you to look at in that collection Is the ID and I want to see whichever One matches my budget ID so in other Words that's the budget I want pass that Whole thing back to me now because we Get all matching items if I come back Over this way you're going to see that This is going to be a filter which means I'll get everything back in in an array Now this will be important for some Other times where we use this so in this
One case what I'm going to do is just on The end of this since I only should have One comeback that should match that Budget I should only have the first Thing in here that I actually want so This will actually give me access to That budget all that to say now I should Have access to this budget and if I Console log this and come over this way And let's open up the console I should get all of these written back Here as objects and you can see I'm Actually getting the budgets themselves As they're listed Out Below okay so That's what I'm actually getting now What I want to do is create a link to The budget page that we will eventually Create in a future video I'm going to come inside here and I want This to be a link so react router Dom Just like that the actual value of this Should be the budget that I'm currently Looking at dot name and then once again I need to pass 2 to this and this is Going to be dynamic depending on what The budget is so this will be my budget And eventually this will be my budget Dot ID So in other words it should read out Budget forward slash like two two three Four whatever dash dash you know the the Uuid that we created for this so first Of all let me make sure that this link Pulled in up top and it did so that's
Perfect let me just separate this out a Bit Now if I save it you see here I get all Of these showing up now once again it's Actually showing this by the accent Color so I can style it the same we we Did earlier so let's space this out just A bit and here I'll stay say style in This case I decided to set it up as Accent and here we'll say style for some Reason this in this case I did not set Up a separate variable that scoped to This I just changed the accent which is Probably what I should have done on both Of those but either way I can pass in The budget dot color and it should take That on so if I save it there you go it Takes on these colors that means if I Were to add another one so let's come up Here and add a one for this one Something something add the expense Should show up right here and you see It's picking up that color which is Exactly what I want so we've got one of The columns set and ready to go next I Need to add one more table data row Where I have that form so table data Where I have that form so table data Like this and inside here even though This might be a little bit odd because It's just a single button but I'm I'm Going to actually submit a form through This that will then take some kind of Action now we've got two options once
Again we can use a form from react Router Dom or we can also use a fetcher Now you might remember one of the Benefits of a fetcher.form is that I can Submit multiples at the same time so if There's a delay like accessing your Database and perhaps you send one Request the person clicks down this list Multiple times and just deletes a bunch In a row maybe they come back out of Order and then your data can be out of Sync so it's helpful to use the fetcher Because it can submit multiples at the Same time and we'll bundle them together And basically send out one request and On top of that it can handle them Whereas a form can only handle one at a Time so let's go ahead and do that I'm Actually going to come up top here and We'll just say const fetcher From use fetcher so let's grab this Fetcher right here I'll say this needs To be fetcher.form and once again I need To pass it a method and this is just Going to be post and we're really just Going to have one visible thing which is Our button but remember on all of these I want to make sure that I have an input With a type of hidden the name once Again will be underscore action the Value here will be delete expense now The trouble here is I'm going to delete The expense but I have yet to actually Pass in a value anywhere so there's kind
Of two ways you can handle this first of All you can create another hidden input That has the name of like I don't know Expense ID or something like that and Then change the name here to be Expense.id so in other words I'm going To get two things that get passed on This form one tells me what to do with It the other one gives me the actual Data ID that I need to delete so that's One way to do it but this might seem a Little bit weird but you know that on Buttons they can actually have names Themselves so I could actually add the Expense ID directly on here as well I Think just to make it a little bit Clearer I won't do that but just so you Know you've got that as an option as Well so let me come down here and we'll Say type equals submit And I'll do class name here and say Button and button warning and finally Because this is just a button it's Important to say what this does so we'll Add an aria label here that says Something like delete and then let's go Ahead and pass it the expense.name for This individual row expense so we know Exactly what we're deleting All right so if I save that we should be Set to go I need to actually add some Text inside of here well not some text I Need to add an icon for that we're going To use the trash icon from react or from
Hero icon so if I do that we'll say the Width is 20. once again like we've been Doing all along and I just want to make Sure that that pulled in up top it Should have because I see it over here Yeah there we go okay so let's go ahead And identify this as a library import And now we've got this displaying like We want so we've got this button and it Should have an aria label that says Exactly which expense we're deleting We've also got these right here and if I Click into here you'll see we've got Budget and then whatever the ID of the Budget is so right now obviously this Isn't working yet because we haven't set Up that route but it is linking to it Properly now if I click on this I don't Actually have a way to handle this so It's basically saying hey you know you Haven't handled this so let's go ahead And take care of that as well so for Right now we're going to leave this Budget link alone we don't have to worry About that let me go back to the home Page right here though we should be able To click down here and view all expenses And notice uh when I come to my expense Item down here in the form we haven't Actually submitted this anywhere because Whether it's on this page or whether It's on the expenses page or frankly Whether it's on an individual budgets Page I want it just to submit to that
Page then I can handle the action on That page of course it should be the Same for all of those but just so we're Clear that's how we would do this so Let's go ahead and start with the Dashboard page since we've already got An action for that so over here to the Dashboard page come up here to my Actions and here we go let's add another One So in this case I need to look for a Different kind of action this would be Oh is it delete expense I think delete Expense Let's just double check so if I come Over here delete expense yeah all right And then I actually need to get the Expense ID and use that to delete it so I'll come back over to the dashboard And here I'm going to say expense Whatever it happens to be deleted here I'm going to say expense and in this Case I'm not going to say what the name Is we'll just say expense deleted All right and maybe we'll straighten These quotes out like that okay so we've Got that otherwise we'll say there was a Problem deleting your expense now we Need to actually do something besides Creating expense we want to delete an Expense so let's open back up our Helpers file over here and we've created A budget we've done all this stuff let's Go ahead and delete an item
I'll leave a note for ourselves here This is delete item from local storage And then let's go ahead and Export a new Function called delete item now we could Compress some of these functions a Little bit more but I'm trying to make Them more readable than I am like super Compressed so if you want to do that go For it all right you can let me know What you did First thing I want to do is go ahead and Grab any existing data for whatever key I've passed in so we'll say existing Data equals we'll look at our fetch data Function and we'll pass in our key then What we'll say is if the ID that we've Passed in as the second argument here if That exists so in other words if we pass That in then we can go ahead and say Let's grab our new data is the existing Data We're going to filter out then looking At each item anything that says item.id Does not equal the ID so I guess it's Not filtering out it's more like Filtering in so what we're doing is Saying as long as it doesn't have the ID We passed in keep it all right in an Array then I will return local storage Dot set item We'll set it to the key and that will be Json.stringify The new data now if there is no ID That's come in I simply want to return
The local storage dot remove item and I'm just going to remove the entire key It looks like it's saying here I've Already declared this so let's look Delete Item yeah look at that there I have Alright so all I have to do is update That sorry I didn't see that at first so Where's all the stuff we just did All right so we should be able to just Take all of this right here and Basically well actually this should Still work because all we did before was Just return remove item so let's go Ahead and come down here To this one and just get get out of here All right so now this should still work The same I think that what we're using This for was deleting stuff when we Deleted the user but all that would do Since we're just passing in a key in That instance Is it should just remove that directly So let's go ahead and test that theory And see if that's how we did it yeah it Looks like it all right so if I come Back in here actually let's just double Check Right inside here yep it's all gone okay So that was working now all we have to Do is recreate everything we just did so Not the smartest move I've ever done so Groceries I don't know something like That and let's create something so that
We've got an item here okay cool so now If we click on this what we want to do Is actually trigger this dashboard item Right here so in this case we're not Going to create an expense we want to Delete an item so if I enter on that it Should pull it in up top let's just Double check that that's what it's done Delete item okay perfect Now you've got a couple things I can Pass in one would be a key that I need To do so in this case key is always Going to be expenses now if I don't want To delete the entire array I need to Make sure I pass an ID like this do Values dot expense expense ID now where Am I getting that expense ID from well You might remember over here that in Addition to the button and this action We had this other thing here this other Hidden input with expense ID on it again You could add that to the button instead If you want to add the name and the Value down here but some people don't Like to do that so while we've already Got a hidden type let's add another one Okay so it should actually grab this Grab the expense ID and that will be the ID it passes in when it tries to delete Something right here All right so let's try it and see if it Works if I click here There we go expense deleted now let me Add a couple of these just one right
After the other we'll go as fast as we Can with that delay and that way you can See something else which is each of These are going to take a little bit of Delay because of that fake delay we set Up earlier but now that I'm using the Fetcher I can just click these multiple Times and they'll be fine they'll just Get removed when they want to and it can Handle all that because I'm using the Fetcher dot form All right so we've got that set up and Ready to go that's great but if I add Some more in here and I eventually go Over to the expenses page you can see if I click on here it's going to submit it To this page but I don't yet have Anything set up so it says it says hey You know this is not allowed so we need To actually set up the exact same thing Over there so let me go ahead and grab This right here and in this case it's The only action we're going to do but I Might as well set it up in the same kind Of way so we'll go to our expenses page Right here and I need to create an Action so we've got a loader let's now Create an action here we'll export a Function called expenses action we Should be able to use the same basic Thing I'll need to import a toast and This delete item but the first thing I Need to do is actually to get the data From the form so if I jump back over
Here to the dashboard you might remember A long time ago we did that by actually Looking at the request and grabbing all The data right here so let's go and do The same thing here jump over here let's Destructure the request oh that's the Loader right here the request and in Order to await the this we need to async This which also is the same thing we Probably should be doing here because Usually you'd be hitting some kind of Database so just to remind you that if You wanted to do that you'd have to do Something like that now in this case It's local storage so it shouldn't Really matter too much here we go we're Going to grab the action that's what We're going to Loop over and look at and Then all the rest of the values are Going to come along with it now we do Need to import this delete item so let's Go ahead and do that I'll backspace and Enter that and then I need to make sure This toast comes in as well from react Toastify so let me make sure I got all That correct looks like I've got my Delete item that's good let's go ahead And add this as a library import And now this should work if I did all my Homework correctly so let's go back to Our expenses now I can submit here wait Can you think of a problem that's going To happen yes I created this action but I've yet to actually pull this into the
App so before we mess that up let's come Over here to the app and now let's see Right here we also need an action and This will just be expenses action so now This should work and if I come back up Top here that should have pulled this in Expenses action okay so if I click here It should go ahead and delete it and now Just say no expenses to show because We've deleted all of them which was that Little turn area we set up right here Where it'll say no expenses to show if There are no expenses okay so we come Back here we've handled that on both of Those different individual routes let me Go and add one more expense in just so I Can show you what else we have to do so We've created this delete button now What we need to do is create the route So that when I click on this it actually Shows something for each individual Budget that's what we'll work on in the Next video
