In this video, let's implement how we can add a transaction to a specific account.
So if you go to Dashboard and then I click on View Account and here I have ADD new transaction.
When I click on that, I have the form and we have implemented the context that is the action and then
the component already in the previous video.
But unluckily for this component, we are not handling the states.
So I'm going to replace with the one I have finished handling the form.
So inside the form here, we are going to cut this one from here and I'll provide that component for
you.
So I'm going to drop that component inside that.
And always the way we handle the form is the same concept but with different fields.
So for the transaction we are keeping track about a name, transaction type amount, category note,
color and end date.
And here is a handle for input change and this one is for the creation, right?
But for the meantime, let me comment this one.
I will talk about it and then let's look at the input field here.
I have used on handle, submit and for individual input we have name, value and change as before.
The difference here is about a transaction type because here we are using the select.
So we need to use the value and we change on the select but not on the options.
And for the options, the value we see here is going to be sent to the back end, but not this one.
All right.
So here you have a value income and then the expense and the amount.
Likewise, name, value and change.
And then the category the same as before.
And for the color, I also added a value and then the name and the change with some inline assets to
have something like circle and down here is for the date and down here is a note and that is a button
with a type submit.
So now we are going to go.
The next step is that I need to bring in the create transaction action.
So now let's go to the context and transaction and then transaction context and this what I want create
transaction.
So inside here add transaction, I think I see dash one then rename this 1 to 1.
Yeah.
Great.
Yeah.
So let's see if it's being rendered.
Yeah, it's being rendered good.
So what I are going to do is that I need to bring in the use context, use use context and I need the
transaction context also.
All right, as before.
So here use context then are pass in the transaction context.
And what I want from this one is going to be the create transaction, which is this one.
And I also want the error and equal to that.
Perfect.
So here I can remove this one.
And remember, for the creation of a transaction, we need the ID.
So here I need to grab the ID from the URL.
And as we did for fetching a single account, we are going to use what is called use params from react
root.
And here let's create a one as const params is equal to use, params is supposed to be params and we
can quickly restructure the account ID.
So I'll make it as ID because that's what I specify inside the app.
If you go to app, that's what I specified as ID.
So I have this structure that so now here I need to pass in the ID also.
So here I specify the account float because for the API that is what is asking us to provide, you see
to provide the account float.
That's why I add it as account and I use the ID.
So here is ID and now I sprayed all the input fields into that.
Now we are all set.
So now let's try our luck to make sure that everything is working fine.
So to make sure it's working, let's go ahead and then console that, log the response from the context.
So transaction context and for success, which is this one, let's go ahead and then console.log.
The response now moment of.
So the name of this transaction, of course, is one as transportation.
An IT type is expense and then amount is 300.
And then transportation.
And then the color choose this one, the date and then not let me say anything.
Any let me add transaction.
Let me check the console.
Where line number 54 let's see the data and I got a beautiful error that explains is not a valid enumerable
value.
So it means that I need to change that one to expenses because that's what we specify in the back end.
Let me show you the model for that.
If you go to model transaction and for the transaction type, I provided expenses but not expense.
So I need to match the same thing from the front end.
So here the value is going to be expenses and that is it.
Great.
So now let's try again and let me hit send.
Mr. Moran.
Oh, I go.
Success is correct.
Have a look inside the data.
I have success and I have the transaction details.
So now if I go to my dashboard, when I go to that's what he aimed.
And for this when I click on view account.
Now you can see that I have my expenses which is this one a great so next is when I click on add new
transaction here I want to render that form so the same step as we did.
So we inside the account details where we are looking through.
Let's locate that and that is the account details here.
Account details.
And we are looking through the table.
Let's scroll down.
Supposed to be all transactions.
Sorry.
Here, let's go to all transaction components, which is this one.
So here, how can we get the ID of the transaction?
Because this one is plural.
We have all transactions here.
Well, let's have a look inside the params.
So it means that I can grab it from here or I can pass as params from the account details to this component.
Right.
So here we go.
So I have the params here account ID, so I'm going to pass that one as a second prop to the transaction
because I have that component inside that.
So I need to provide another prop or account ID and is equal to account ID and for all transactions.
I'm going to grab from here and let me move this one from here, from the previous video and here I
will provide the account ID where account is not defined.
Which line?
Let me see a line of my 69.
It seems I'm using a wrong verbal line about 69.
So I need to use that transaction, rather.
Yeah.
So let's see how it's going to work.
All right.
Now everything is okay when I click on this one.
Well, I don't see that because the path is not transaction, but instead it's going to be a transaction
with some ID.
Let me find out, is our transaction this one?
So let's go to all transaction.
And for the table which is down here, add new transaction service or transaction rather.
And let's look at new transaction.
Yeah, the path is like this.
Yes at transaction.
So when I click on this one and now I can add a transaction.
How it is this time around, let me add let's say I got my salary and I'm going to add to my budget.
So here is going to be income and the amount is 7000.
Donors and it's going to be salary or other or on categories and the color also to be read.
Don't worry our fees are color issue and the dates.
And then let me say salary.
Act.
And now let me check my dashboard.
Go to software account.
And now I can see that it has been added automatically, meaning 300 plus over hundred is 1000.
Plus -1000.
That is 11,000, guys.
What has led is about deleting, updating and let's say validation.
Well, so you can improve this application, right?
So let's go rock.