All right my friends we are able to make a request.
So let's make sure that we handle both outcomes appropriately.
We're going to first handle the heir case.
So in order to handle an heir we're going to add in an additional property to our state object.
We're going to call it something like air message or something like that.
If we ever then run into an error we're going to dispatch an action that updates that error message
property on our state object and then inside of our sign up screen if we see an error message on our
state object we're going to print that up on the screen and it should appear to the user immediately.
OK.
Let's give this a shot back inside of my.
Off contact Scott J.S. file.
I'm gonna first go down to the very bottom of the file where we defined our initial state object.
So I want to say that my state object is now going to have a new initial property called error message
and by default it'll be an empty string so if we ever run into an error during signing up signing in
or whatever else we're gonna put the error message to show to the user inside of that property gate.
So we'll now go back up to our sign up action.
So inside of our catch case right here rather than doing that console log if we run into any kind of
error I'm going to dispatch a new action.
Remember we always call dispatch anytime we want to update our state.
So I'm going to give this a type.
Remember we're just kind of making up the types off the top of our head.
I'm going to call it like add air and we'll give it a payload of just some generic error message.
All right now just say something like something went
wrong with sign up like so.
So that right there is going to be a message that I want to show to my user.
Now once again this message right here.
Not the best message to show to a user because it doesn't really tell the user what went wrong.
It doesn't tell them that hey maybe we have an e-mail that is already in use or something like that.
So this definitely could be something that we could come back and improve in the future but for right
now it'll do just to get something to appear on the screen OK.
So now we can go up to our reducer.
We can make sure that we watch for an action of type ad air and if we see that we're going to update
our state object with this payload so we'll go up to my producer.
Here it is right here.
I'll add in a new case of ad underscore air then inside of there.
We want to update our state object.
Remember the rules around updating object inside of reducer.
We always have to return a brand new object and we will never modify that state value right there.
So any time that we want to modify a property on object we're almost always going to use the same exact
syntax will say something like return a new object.
Dot dot dot states.
So that means take all the properties out of that state object and added them to this new one.
And then we will overwrite the property that we want to update.
So in this case we want to override the error message property with whatever came in from action dot
payload and that's it and remember what happens whenever we call dispatch react is going to automatically
call that reducer function.
It's gonna get back some new state object and then it's going to re render all the different components
inside of our application with this new state object.
So that means that back inside of our sign up screen the state object right here will now have an error
message property tied to it and that error message property will tell her our user something just went
wrong or something like that.
It's just to verify that inside of my sign up screen allowed in a quick console log here.
I know the console logs are a little bit annoying to do them so repetitively but I just really want
to make sure that you understand the data that's flowing around our application so I'll put in that
console log really quickly.
I'm going to save both these files so they're both saved right now and I'm going to once again try to
create an error inside of my app during the sign up process.
So once again on the sign up screen I'm going to sign up with that same email once again I'll sign up.
That should trigger the console log because that should have resulted in an error.
So now if I go back over to my terminal
here we go.
So I see all these previous objects right here.
Those are from previous renders of our screen and now the one you see right here.
That's where we get our error message after we attempt to sign up.
So we see something went wrong with sign up.
So clearly we want to print out that error message to the user probably with some red text or something
like that and just let them know that hey it's something did not quite go as expected go back inside
of sign up screen.
I'm going to delete the console log and then we'll try putting in that error message.
How about right above our button.
So here's the spacer for the button right above it.
I'm going to put it in a text element with state DOT error message like so now just one issue here.
If we save this right now you're going to notice that there is a little slight increase in width right
there or spacing between the input and sign up.
And that's because a text element is being created right there even though there's nothing inside of
it.
So chances are that we don't want to show this text element until we actually have some something or
an error to show inside of it.
So to handle that we can wrap this thing with a little either Turner expression to decide whether or
not to show the text element or alternatively we can use some other little trick.
So going to wrap that entire line with a set of curly braces and I'm going to say
oh let's just use a turn area.
Let's keep it simple.
State error message.
Now we'll say if that thing has a value then we'll show that text element.
Otherwise don't show anything.
So return null.
Like so it's now if we save this we won't have that little gap there anymore which is a little bit better.
And now finally we probably wanna make sure that this text element right here shows up with some red
text or something like that.
It's going to go down to my style sheets.
Allowed in a new section down here called error message and I'll give it a slightly larger font size.
How about like 16 and a color of red.
Now we can apply that style to that text element.
So go back up find the text element I'll say style is styles dot error message and I'll save it.
And I think we're ready for a test.
So I'll save it flip back over I'll use the same e-mails like in raisin air once again sign up and there
we go.
Something went wrong.
Now once again just got a message here or MSA here.
This is look a little bit ugly.
It's on the far left hand side.
It's right up against that input right there.
So I'm going to add in a little bit of margin very quickly so back down here on error message.
I'll add in some margin left of I'm going to say like 15 I'll put in some margin top of about 15 as
well and I'll try one more time.
There we go.
That looks pretty reasonable.
So I think that we can say that the user will understand that something went wrong with the sign up
process.
Once again it would be ideal if we told them what went wrong but that would be a good amount of additional
code to kind of inspect that error message.
And right now I really just want to push through this application because we're kind of taking a long
time to get through it gets this looks good.
We're handling the air case.
Let's now take a quick pause when we come back the next video we're going to add in some additional
code to our sign up action function right here and make sure that we handle the success case as well.
So a quick pause.
I'll see you in just a minute.