At the end of last video I was having some trouble around signing in so this is like double embarrassing
but pretty much.
I was just typing in the wrong password when I was trying to sign in.
So let me show you the working flow here.
I'm going to once again go over to the sign and screen.
Put in test 10.
That's when my test accounts and the correct password and I can sign and successfully.
So once again I was just making a typo on the password.
That's why I got that error message.
Well at least we know that we can't sign with a bad password right.
OK.
Well now that we got that fixed the next thing I want to point out here is just one or two quick things
around our sign up flow.
So first off I'm going to go back over to my sign and screen really quickly.
Then on the sign and screen I'm going to enter in an invalid email and password and attempt to sign
it.
Now of course I get the error message right there which is very good.
But here's the issue.
If I now go back over to these sign up screen I still see the same error message.
The reason for that remember are two forms right here share the same piece of error message state that
is inside of our off context.
So that error message is essentially being shared between both these different screens.
So chances are we want to clear out that error message anytime that we change navigation or change which
screen we are actually looking at.
So let's figure out how to do that.
In this video all right we'll first start off inside of our off contact Scott J.S. file.
The first thing we definitely need to do is have some way to clear out the error message.
So we need an action function that's when to modify our state and set the error message back to an empty
string so I'm going to create a new action function right underneath my auth reducer inside of context
dot J.S. and I'm going to call this function something like clear error message I'm going to use the
shortened syntax here for defining the error arrow function.
So I've got dispatch and then that's going to return an arrow function all in one line than inside of
here.
We don't need any async await.
Nothing like that.
Very simple.
All we have to do is dispatch some action that's going to cause our state object to be updated.
So I'll dispatch an action object with a type of something like clear error message then up inside of
my auth reducer.
I'll add in a new state that we'll watch for that action type so that in a case of clear error message
and then whenever we see that action type I'm going to return a new state object.
I'm going to take all the properties out of the existing state object and add them in but I'll update
error message and set it to an empty string.
OK.
So now that we've got this put together we've got some way to modify our state object.
Let's make sure that we export this action function right here so we can then use it inside of one of
our different components.
So I'll go back down to the very bottom the file I'll find my action object and I'll add it into the
variant
OK.
Now we can go over to one of our two off screens.
We really need to make sure that we clear the error message whenever we navigate between either of them.
So either sign up or sign in whichever one we are leaving.
That's when we want to clear the error message.
Let's first take care of these sign in screen and make sure that we can clear that error message.
We navigate away from here now.
How are we going to somehow detect any tunnel we navigate away from the screen.
Remember by default with react navigation.
Anytime that we toggle between two screens like this neither of these components is actually being removed
off the screen truly.
Both of these different screens are technically still kind of visible.
They're just off the edge of the screen so we don't get any kind of like Clean Up event naturally through
react when we toggle between these two different screens.
Now we've actually kind of ran into an issue like this previously.
Back on our blog post application I'm going to pull my code editor on the screen from that project.
So really quick here as a quick reminder here's our code from the index screen.
Remember that on the index screen for the blog post project we wanted to make sure that we attempted
to get a list of all of our different blog posts and any time that we navigated to the index screen.
So to do so we made use of navigation.
Add listener did focus that made sure that we ran some function some function and each time we navigated
to index screen so navigation not add listener is a reference to react navigation so we can essentially
do something very similar to this inside of both our sign in screen and our sign up screen as well.
We could either wire up something very similar to this or alternatively there's a slightly more compact
way of writing out some logic very similar to this right here.
Let me show you how.
So inside of my sign in screen notice some inside of sign in at the very top.
I'm going to import a little something from react navigation called navigation events
navigation events is actually a react component that essentially does the exact same thing as the code
that we added back here inside of our blog post project.
We can show navigation events inside of our component.
Some of the words right here underneath my view element going to place navigation events navigation
events doesn't actually display anything on the screen whatsoever.
Instead we can optionally choose to pass it a couple of different callback functions as props when we
pass in these different callback functions.
Navigation events is going to call them automatically anytime we render or navigate to our sign and
screen or navigate away from it.
So again just about identical to what we did back inside the blog post project but inside of a react
component form so that props so we can make use of inside of here are on will focus so we could pass
that an arrow function and it will be called anytime that we are about to navigate to to this screen.
In this case sign in we can also add in on did focus.
This will be any time called anytime that we successfully complete the navigation over to the screen.
We've also got on will blur
and on did blur.
So what are these all about.
Well I just described the first two.
Essentially on will focus and did focus are describing when we are about to navigate to our sign and
screen on we'll focus is called when we're just pressing that button right there to go over to our sign
and screen.
So the instant I press that it starts up the animation to transition over to sign and screen as soon
as we are about to start that transition on will focus is called instantly.
So when I tap that like boom right there on will focus gets called as soon as I actually land on the
screen.
That's when on did focus gets called on will blur is called anytime we're about to navigate away from
the screen so as soon as we're about to navigate away from sign in so like the instant I tap that link
right there on will blur gets called.
And then on did blur is as soon as the transition completes.
Now to be honest with you it seems as though in my testing on did blur is kind of buggy right now and
doesn't actually get called when we start to navigate away and actually a line up or end up back at
say sign up nonetheless like regardless of that the action or the callback that we really care about
is on will blur as the instant that we know that we are about to navigate away from the sign and screen.
That's when we want to clear our air message so out of all these different callbacks.
Right now the only one we really care about is on will blur.
So going to delete all the others
and then I'll update on will blur.
I'm going to first update my use context call right here.
I'm going to pull in our clear error message action function.
So then as soon as we know that we're about to navigate away from the sign and screen I want to call
clear air message.
Now as usual we've got a function right here that's just calling another function so it's not really
useful to create the extra arrow function we can instead just pass in clear error message directly and
just make sure that we don't have any parentheses after it OK.
So let's save this.
Now the instant that we are about to navigate away from sign and screen clear error message should be
invoked and we should see the error message go away.
It's a back over here.
I'm going to go over to my sign and screen.
I'm going to get a error message to appear by putting in some garbage credentials and on tap on.
Don't have an account.
And as soon as I do that error message goes away.
Perfect.
Okay.
So now we can repeat the same process inside of sign up as well.
Remember if we tried to sign up with an email that already exists
I'm gonna get that error message and if I go over to sign in air still persists.
So we have to do the same thing for sign up as well.
So over on my sign up screen here it is right here.
I'm going to import navigation events from react navigation and then right above my off form over here
I'll do navigation events.
I'll define the on will blur function.
I'll make sure that I pull in the clear error message.
Action and throw it in like so.
Let's save this and now if I show an error message on sign ups I'll do tests or I'll use a existing
email here on the sign up screen so there's my error message.
And now as soon as I'm about to navigate away your message goes away.
Okay.
So I think that looks pretty good all right now.
The last thing on I mentioned here very quickly I know this is another very long video.
Another option we could have used here was to put it in this cleanup logic inside of our art form so
we could have essentially called the same thing just earn it and set inside of art form instead.
That probably would have worked out just fine.
And do our cleanup inside of auth form because hey think about it.
Either way we are showing or not showing the art form on both screens so we could have essentially put
some cleanup logic inside there.
However if we started to throw that inside of art form Oh it's an art form starts become kind of UN
reusable.
It's very unlikely that we're going to reuse art form on any other screen inside this application.
However as soon as art form starts out any reference whatsoever to our off context it no longer really
becomes reusable.
It's only reusable so long as we have it tied in very directly and very closely with our off context.
So maybe that's not the worst thing for this project.
Nonetheless that's just one of the things that goes through my head when I think about possibly putting
that cleanup code inside of here as opposed to putting inside of both sign up and sign it okay.
So long video.
I apologize for that but now that we've got all this stuff patched up let's take another pause right
here and start working on our track list in the next video.