In this video.
Let's see how we are going to add a count right from the client side.
Well, one thing I like about programming is that if you know how to do something, the rest is like
repetition.
Copy and paste.
Have you seen the format now?
Just create a context handle for use it and that is it.
And here we already have the account context.
And let me look at the action type.
What I want is the account creation, success and account creation.
If we want to implement what is called account creation started, you can use this one.
But for the meantime, let's ignore this and let's focus on these two action types.
So now back to the account here and the action type.
Then this one going to be the fields.
Let me check the field.
Well, otherwise, you're going to have some beautiful errors.
Right.
So here as the field.
Great.
So now let's collapse it.
We are done with you.
So let's look at the end point.
At the back end for the accounts account, create first large account.
Right.
So let's get back to the context.
And that's why I added the account for that.
For this one, it can hold a single account that is account details and account creation.
So down here, we are going to copy one of the end points for getting account details.
So here, let's copy this one.
Let me collapse it and I can copy it.
And down here, let me paste it here and let me change this one to create account
action, remove the details.
And for this one, we are going to pass in the form data, right?
So here we need to pass in the token.
Supposed to be content type.
Yeah.
Sorry.
Going to be great.
Yeah, good.
And as a second I demand to this one, I'm going to pass in the entire form data.
And lastly, the config because this endpoint is a protected endpoint.
And here, let's change the action type to account creation success.
And here is going to be account creation fail and the same response as before.
So lastly is I need to export this function from here.
And there we go.
I can also export the error also.
Right.
So error.
Is equal to the states.
And then on that, we have the error rate.
So last thing is I need to handle the reducer function here.
So I'm going to copy this one and let me give this one very few comments as details.
And before the defaults, I'm going to paste this one for creation.
So here is going to be great.
The case here is going to be as action, as account creation X and here is going to be account creation
fail grade.
So for success, definitely I need to add the payload on the accounts and loading false error false
and for failure I want to empty.
Sorry supposed to be account, not action.
So I think we missed a mistake here.
Or supposed to be account.
I'm happy I've seen it.
Great.
So that is it.
That is it.
About the action, guys.
We are done with it.
The next step is that let's go ahead and then dispatch it and let's see if we can create, right?
So let's go ahead and then require this one inside the ADD account.
So it forms add account.
And here let me bring back the components and that is it.
And I also need the error.
All right, guys.
So let me bring back the action.
You see how easy it is.
Okay, so now I'm done.
I'm done.
Guys, you are done.
So inside the of context, let's try to display something to make sure that everything is correct.
So consider
the response.
Okay.
So now.
Oh, I got some beautiful arrow here of context is undefined.
So inside the add context here, let's bring in the of context.
The account context.
Sorry, going to be account context and then use context.
Yeah.
So now we are all set.
Again, ID is not defined.
Which is.
Account contest line number 990 999.
Oh, sorry.
It's supposed to be for a slash account.
That's a path from the back end, as I showed you.
Now it is happy.
So let's check the console and let's try our luck.
All right, so for this account, I will name this one as personal.
No, I have personal account.
Let me call this one as software.
And for initial deposit, let me say 2004, the account type.
I want to choose personal and nodes.
Let me say account.
All right, so let me hit add.
And down here, I got some message, but it seems I don't have the response.
Meaning that our dispatching is not working well.
Oh, sorry, guys.
This one is post request.
Great.
So let's try again for this one.
Let me enter anything here.
I want to make sure that is being called.
Anything here?
Let me hit send again.
We don't see the response, so let's try to handle the error here or console.log the error here.
And let's see.
So here we go.
Or I think the problem is the end point.
Let's look it.
The API account URL.
Oh, we have the account here first.
Last account.
So here we are going to ignore that.
So here, let's remove the account.
We have it inside the base.
You are error.
So that is it.
That is it.
I believe that.
Now let's scroll down here and let's enter software.
The initial deposit 2000 account type is going to be personal account and software hits ADD and let's
have a look.
Well, again, there is no feedback on that.
Well, this is strange, right?
So let's see if our action is being called.
All right, so what about constant logging, the error here, inside here?
Let's see.
They're going to be the error.
And anything here.
Oh, you can see the error.
It says that content type is not a valid HTTP header field.
It means we are making some mistake here.
Or is this one?
Oh, no.
So now I think we'd be good to go.
So let me enter the software again.
This account.
No one to be created.
Right?
So any value here.
Any value here.
Hit add.
And this time around, I got some beautiful error.
Let's have a look on the response.
Invalid token.
The problem is that we are not attaching the token to the header.
Look here we are using the user of which is token.
But in the state we don't have the token.
So here we want to what populate the token from the local storage.
So here I'm going to add a property called user off because I will need the token for that user off
and I'm going to use the JSON dot pass and here look at storage dot get item and I need the user of.
All right, that is it.
So now here we go.
So now everything is set.
Let's try and create the software account.
So let me collapse this one.
Let me fill up the software account.
Initial deposit, 4000 personal account and software.
Let me check the console and let's see.
Objects.
And this time around, it has been created.
You see, I have software with initial deposit and then the account type is personal.
Great.
So inside my dashboard, if I go to Dashboard and look at my account, I have one account and I click
on View Account.
You see that this account don't have any transaction, so I can go ahead and add transaction.
And for that one we are going to work on it in the next video.