And before we do anything, let me just add this job location to my state because I'll definitely forget
that, and then I might run around like a headless chicken.
So let me go and take a look at my context and context more specifically.
And then in the state, I want to go with that job location.
So let's go here with job location and for the time being, is just going to be an empty string.
We save this one.
Let's keep on scrolling.
And now it's set up that a registered user functionality.
So first, like I said, right from the get go, I want to go with type.
I'm a registered user, registered user begin more specifically, and we might as well handle that right
away in the reducer as well.
First, let me open up the reducer and here I want to set up the condition.
So we're going to go.
If action and type is equal to register user begin, then we want to return the current state so that
the Dot states print out the values.
And then we also want to go with is loading and we want to set it equal to your true right.
So we start with our HTP request one in the registered user.
Now let's set up our try catch, and I probably need to import Axios.
So let me go above, man, let's go with Axios and then from an Axios library, violence, scroll down
in the tri block.
We want to go with Konst, and like I said, this is our first one, so I'm going to go with the response
now.
Typically, I do the structure it right away.
So eventually that's coming up when we want to go with a weight.
So this returns a promise.
And as you can see, already set it up as I think awesome.
And where you want to set up Axios about post post request.
Why?
Because that is what we need to do when we want to add data to the server and what is going to be our
URL.
Well, we'll go forward slash API version one and then off and register.
Now the second argument is going to be what we're actually sending and what are we're sending while
we're sending the user after the current user?
Now let me right away log over your response.
Just so you can see how everything works.
And then we want to go with concert and let's pull out user token and location.
So those are the three things that I want to pull out from my data.
And let me reiterate something if there is an error.
Well, right away, go to this catch block.
So if there's some kind of error response from our server van, we'll handle that in a catch.
So when it comes to pulling out user token location, I'm doing that if everything is correct.
I know that those properties are going to be there.
If there's some kind of error, then we'll handle that with our registered user and error.
So once I pull out user token on location.
Now let's go with dispatch and whether we want on dispatch.
Well, we're going to go with type here and then let's set up registered user success and let's pass
in that payload.
So payload object and in there when a user token and then a location.
And then I guess let's right away go to a producer.
Now, as you can see, I have a tiny bug because in my complete code hours, destruction right over
there, but I decided to showcase what we get back from response and fixes following where I want to
go with the response and then data.
Like I said, that's going to be the giant object that I know is already there.
So let me refresh and we should be good to go.
So introducer, what do we want to do if we have registered users success?
Well, for starters, we can copy this code and we just want to change it around the begin part where
this is going to be a success.
State is still the same, meaning I'm returning the current state and know it's not changing around
those values.
Where is loading will be false?
And remember, we can access pretty much everything in the payload, correct?
So one by one, let's set up those values.
Token is equal to what?
It's equal to action payload.
And then that token and the same is going to be for user user location and job location.
So let's set up user is equal to action, payload and then user.
And of course, if you want to structure them, you might guess them because it's just going to type
them like so.
And then we also have user location is equal to action, payload and location.
And the same thing we want to set up right now for job locations or job creation.
One is equal to action, payload and location.
Let's save this for now, and then let's remember that we also on the alert and not to do that what
we need to go with, Charlotte said it equal to true and then come up with those values correct for
a lower type as well as the text.
So let's try it out.
We're going to go here with show alert and I will be equal to true then where we want to go with alert
type.
And in this case, it's going to be success.
And then lastly, with me also and alert text, and that will be equal to user created, and I'm going
to go with the redirecting you directing or hear that or not.
And then we're pretty much good to go.
So that should handle register user success.
And what is the last thing that we want to do over here?
Well, we want to handle the error, correct?
So if we performed your request and yes, the Senate local storage will be later.
So for I forget, let me also add here local storage storage and then later brought back to our immediate
task where we have the catch.
Now, first, I want to log it just so I can see what we're getting back.
So log and that one will be equal to error and then doc response.
And now it's this page, the log in user error.
So let's say here this patch, then we want to pass in the pipe and then that one will be equal to a
registered user.
And now in this case, I'm not looking for success.
I'm actually looking for the error.
And then also, I want to pass in that payload and I'm there.
I'm going to have a message properly, which is going to be equal to error dot.
And then I'm looking for a response dot and then data and then the message.
Now don't worry about the error right now.
The reason for this error is because we're not handling that in the producer.
Now, before we go to Air New Zealand, actually set everything up.
Let me just back up a little bit to my read me and then let me showcase something where in both cases,
whether that is a success or an error, what you'll notice is that we are displaying alert, correct?
Now here's the key thing.
Once I'm done displaying the alert, what do I want to do?
I want to hide it in 30 seconds, correct?
And what was the functionality for that?
Well, we have clear alert.
So right after the try catch, regardless of which of these actions is dispatched.
I also want to go with clear alert because just like I said in the reducer with both actions, we are
setting shoulder to true and it is my preference to hide that.
So let's add here in the app context, right after we try catch, let's say, clear alert and then let's
invoke it.
So now the last thing that we need to do is go to our producer and just handle this logic over here.
And the way we do that, we just navigate to the producer.
Let me close everything and think I'm going to copy and paste this one, and then let's set it up the
arrow one.
So our over here and then we're still turning a state.
You know, that is true, but we don't care about these ones.
And as far as the show alert that one will be equal to true, but the type will be different, correct?
Now go danger.
And remember, when it comes to text, it is sitting where it is sitting in the action that a payload.
And then I set up my message one.
So let's say it, everything should work, so it may refresh.
There is no error.
And now let's try it out.
And if everything is correct, we should see the giant object back from the actuals, as well as correctly
updated values in the state.
And if not, then we'll see a proper error response.
So let me in this case, navigate to the big screen.
We're going to go with my localhost three thousand.
Now I'm not looking for this one.
I'm going for register in this case and I want to go here.
I want to provide values.
And yes, in between the video, I remove John Sorgen there that I'm going to go with John at Gmail
dot com and then I want to provide my password.
And you know what?
Let me open up the DevTools because this is going to be very, very useful.
So when I go to counsel or I'm going to go with secret and let's submit and check it out, like I said,
or this is that giant object that we're getting back.
So in here, we see everything, you know, the headers we have request status, blah blah blah.
Now where is the data located?
It is located in the data property where I can find the location token as well as the user.
So those are the things that we're passing on to the state.
And if I take a look at my components right now, notice in the app provider that everything is awesome.
I have my user, I have my token as well as the user location and job location.
So those are the values that we're setting up in our state.
Now, if there is an error.
What happens?
Well, then we should see the error response.
So now let's try it out.
I'm going to try to register one more time with John without changing the email.
And what we should see is, first of all, the alert, and that's something that I wouldn't show with
any success.
But if the on works, that means that also the success one is going to work.
And I notice now I have the arrow here 400 and now check it out in here.
I have data.
And what is in the data?
I have a message email already in years, and that's the one that we set up back on our server.
So hopefully this makes sense that when it comes to Axios, we're going to be getting these giant objects.
The only difference is that we are going to be in the airport response.
But what we are looking for is the data, because when it comes to error, it's going to be handled
in the cache block anyway.
And with this in place now, it can take a look how we can navigate the user programmatically away from
the register to the dashboard page.