1 00:00:00,840 --> 00:00:05,910 At the end of last video I was having some trouble around signing in so this is like double embarrassing 2 00:00:05,940 --> 00:00:06,680 but pretty much. 3 00:00:06,710 --> 00:00:09,960 I was just typing in the wrong password when I was trying to sign in. 4 00:00:10,050 --> 00:00:11,910 So let me show you the working flow here. 5 00:00:11,970 --> 00:00:14,480 I'm going to once again go over to the sign and screen. 6 00:00:14,550 --> 00:00:16,350 Put in test 10. 7 00:00:16,350 --> 00:00:22,540 That's when my test accounts and the correct password and I can sign and successfully. 8 00:00:22,570 --> 00:00:25,140 So once again I was just making a typo on the password. 9 00:00:25,140 --> 00:00:27,110 That's why I got that error message. 10 00:00:27,120 --> 00:00:30,010 Well at least we know that we can't sign with a bad password right. 11 00:00:30,580 --> 00:00:31,060 OK. 12 00:00:31,110 --> 00:00:35,370 Well now that we got that fixed the next thing I want to point out here is just one or two quick things 13 00:00:35,430 --> 00:00:37,110 around our sign up flow. 14 00:00:37,110 --> 00:00:40,440 So first off I'm going to go back over to my sign and screen really quickly. 15 00:00:40,500 --> 00:00:45,810 Then on the sign and screen I'm going to enter in an invalid email and password and attempt to sign 16 00:00:45,810 --> 00:00:47,130 it. 17 00:00:47,140 --> 00:00:49,660 Now of course I get the error message right there which is very good. 18 00:00:49,720 --> 00:00:50,990 But here's the issue. 19 00:00:51,070 --> 00:00:55,870 If I now go back over to these sign up screen I still see the same error message. 20 00:00:55,870 --> 00:01:01,780 The reason for that remember are two forms right here share the same piece of error message state that 21 00:01:01,780 --> 00:01:03,700 is inside of our off context. 22 00:01:03,880 --> 00:01:07,840 So that error message is essentially being shared between both these different screens. 23 00:01:08,440 --> 00:01:13,630 So chances are we want to clear out that error message anytime that we change navigation or change which 24 00:01:13,630 --> 00:01:15,770 screen we are actually looking at. 25 00:01:15,790 --> 00:01:17,050 So let's figure out how to do that. 26 00:01:17,050 --> 00:01:22,820 In this video all right we'll first start off inside of our off contact Scott J.S. file. 27 00:01:22,820 --> 00:01:26,940 The first thing we definitely need to do is have some way to clear out the error message. 28 00:01:27,020 --> 00:01:32,570 So we need an action function that's when to modify our state and set the error message back to an empty 29 00:01:32,570 --> 00:01:38,340 string so I'm going to create a new action function right underneath my auth reducer inside of context 30 00:01:38,360 --> 00:01:47,130 dot J.S. and I'm going to call this function something like clear error message I'm going to use the 31 00:01:47,220 --> 00:01:50,310 shortened syntax here for defining the error arrow function. 32 00:01:50,330 --> 00:01:56,900 So I've got dispatch and then that's going to return an arrow function all in one line than inside of 33 00:01:56,900 --> 00:01:57,080 here. 34 00:01:57,080 --> 00:01:58,880 We don't need any async await. 35 00:01:58,880 --> 00:01:59,840 Nothing like that. 36 00:01:59,840 --> 00:02:00,530 Very simple. 37 00:02:00,530 --> 00:02:05,670 All we have to do is dispatch some action that's going to cause our state object to be updated. 38 00:02:05,960 --> 00:02:15,150 So I'll dispatch an action object with a type of something like clear error message then up inside of 39 00:02:15,150 --> 00:02:16,440 my auth reducer. 40 00:02:16,620 --> 00:02:23,670 I'll add in a new state that we'll watch for that action type so that in a case of clear error message 41 00:02:25,330 --> 00:02:30,980 and then whenever we see that action type I'm going to return a new state object. 42 00:02:31,270 --> 00:02:36,730 I'm going to take all the properties out of the existing state object and add them in but I'll update 43 00:02:36,940 --> 00:02:39,660 error message and set it to an empty string. 44 00:02:41,670 --> 00:02:41,970 OK. 45 00:02:41,980 --> 00:02:46,320 So now that we've got this put together we've got some way to modify our state object. 46 00:02:46,510 --> 00:02:50,710 Let's make sure that we export this action function right here so we can then use it inside of one of 47 00:02:50,710 --> 00:02:52,450 our different components. 48 00:02:52,480 --> 00:02:58,180 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 49 00:02:58,250 --> 00:02:58,840 variant 50 00:03:01,830 --> 00:03:02,110 OK. 51 00:03:02,150 --> 00:03:05,240 Now we can go over to one of our two off screens. 52 00:03:05,360 --> 00:03:09,980 We really need to make sure that we clear the error message whenever we navigate between either of them. 53 00:03:09,980 --> 00:03:13,390 So either sign up or sign in whichever one we are leaving. 54 00:03:13,460 --> 00:03:15,920 That's when we want to clear the error message. 55 00:03:15,920 --> 00:03:19,400 Let's first take care of these sign in screen and make sure that we can clear that error message. 56 00:03:19,400 --> 00:03:21,760 We navigate away from here now. 57 00:03:21,770 --> 00:03:25,490 How are we going to somehow detect any tunnel we navigate away from the screen. 58 00:03:25,610 --> 00:03:28,130 Remember by default with react navigation. 59 00:03:28,170 --> 00:03:33,080 Anytime that we toggle between two screens like this neither of these components is actually being removed 60 00:03:33,140 --> 00:03:34,700 off the screen truly. 61 00:03:34,760 --> 00:03:37,610 Both of these different screens are technically still kind of visible. 62 00:03:37,610 --> 00:03:43,310 They're just off the edge of the screen so we don't get any kind of like Clean Up event naturally through 63 00:03:43,310 --> 00:03:47,020 react when we toggle between these two different screens. 64 00:03:47,100 --> 00:03:49,370 Now we've actually kind of ran into an issue like this previously. 65 00:03:49,370 --> 00:03:54,890 Back on our blog post application I'm going to pull my code editor on the screen from that project. 66 00:03:55,100 --> 00:03:59,470 So really quick here as a quick reminder here's our code from the index screen. 67 00:03:59,570 --> 00:04:04,400 Remember that on the index screen for the blog post project we wanted to make sure that we attempted 68 00:04:04,400 --> 00:04:09,710 to get a list of all of our different blog posts and any time that we navigated to the index screen. 69 00:04:09,980 --> 00:04:12,380 So to do so we made use of navigation. 70 00:04:12,400 --> 00:04:18,410 Add listener did focus that made sure that we ran some function some function and each time we navigated 71 00:04:18,410 --> 00:04:24,980 to index screen so navigation not add listener is a reference to react navigation so we can essentially 72 00:04:24,980 --> 00:04:30,650 do something very similar to this inside of both our sign in screen and our sign up screen as well. 73 00:04:32,010 --> 00:04:36,930 We could either wire up something very similar to this or alternatively there's a slightly more compact 74 00:04:36,930 --> 00:04:40,710 way of writing out some logic very similar to this right here. 75 00:04:40,770 --> 00:04:42,090 Let me show you how. 76 00:04:42,240 --> 00:04:47,050 So inside of my sign in screen notice some inside of sign in at the very top. 77 00:04:47,070 --> 00:04:53,400 I'm going to import a little something from react navigation called navigation events 78 00:04:56,990 --> 00:05:02,540 navigation events is actually a react component that essentially does the exact same thing as the code 79 00:05:02,540 --> 00:05:06,020 that we added back here inside of our blog post project. 80 00:05:06,020 --> 00:05:10,810 We can show navigation events inside of our component. 81 00:05:10,940 --> 00:05:17,570 Some of the words right here underneath my view element going to place navigation events navigation 82 00:05:17,570 --> 00:05:21,080 events doesn't actually display anything on the screen whatsoever. 83 00:05:21,080 --> 00:05:26,720 Instead we can optionally choose to pass it a couple of different callback functions as props when we 84 00:05:26,720 --> 00:05:28,700 pass in these different callback functions. 85 00:05:28,700 --> 00:05:34,370 Navigation events is going to call them automatically anytime we render or navigate to our sign and 86 00:05:34,370 --> 00:05:36,940 screen or navigate away from it. 87 00:05:36,950 --> 00:05:41,960 So again just about identical to what we did back inside the blog post project but inside of a react 88 00:05:41,960 --> 00:05:53,230 component form so that props so we can make use of inside of here are on will focus so we could pass 89 00:05:53,230 --> 00:05:58,300 that an arrow function and it will be called anytime that we are about to navigate to to this screen. 90 00:05:58,300 --> 00:06:03,850 In this case sign in we can also add in on did focus. 91 00:06:04,020 --> 00:06:09,490 This will be any time called anytime that we successfully complete the navigation over to the screen. 92 00:06:09,540 --> 00:06:12,630 We've also got on will blur 93 00:06:15,530 --> 00:06:20,310 and on did blur. 94 00:06:20,450 --> 00:06:21,800 So what are these all about. 95 00:06:21,800 --> 00:06:23,260 Well I just described the first two. 96 00:06:23,420 --> 00:06:28,670 Essentially on will focus and did focus are describing when we are about to navigate to our sign and 97 00:06:28,670 --> 00:06:34,730 screen on we'll focus is called when we're just pressing that button right there to go over to our sign 98 00:06:34,730 --> 00:06:35,180 and screen. 99 00:06:35,180 --> 00:06:40,580 So the instant I press that it starts up the animation to transition over to sign and screen as soon 100 00:06:40,580 --> 00:06:45,020 as we are about to start that transition on will focus is called instantly. 101 00:06:45,020 --> 00:06:50,660 So when I tap that like boom right there on will focus gets called as soon as I actually land on the 102 00:06:50,660 --> 00:06:51,080 screen. 103 00:06:51,110 --> 00:06:57,260 That's when on did focus gets called on will blur is called anytime we're about to navigate away from 104 00:06:57,260 --> 00:07:02,540 the screen so as soon as we're about to navigate away from sign in so like the instant I tap that link 105 00:07:02,540 --> 00:07:05,130 right there on will blur gets called. 106 00:07:05,360 --> 00:07:09,300 And then on did blur is as soon as the transition completes. 107 00:07:09,350 --> 00:07:15,170 Now to be honest with you it seems as though in my testing on did blur is kind of buggy right now and 108 00:07:15,170 --> 00:07:20,510 doesn't actually get called when we start to navigate away and actually a line up or end up back at 109 00:07:20,510 --> 00:07:26,630 say sign up nonetheless like regardless of that the action or the callback that we really care about 110 00:07:26,660 --> 00:07:32,550 is on will blur as the instant that we know that we are about to navigate away from the sign and screen. 111 00:07:32,570 --> 00:07:36,590 That's when we want to clear our air message so out of all these different callbacks. 112 00:07:36,590 --> 00:07:39,880 Right now the only one we really care about is on will blur. 113 00:07:40,160 --> 00:07:41,390 So going to delete all the others 114 00:07:45,230 --> 00:07:48,300 and then I'll update on will blur. 115 00:07:48,300 --> 00:07:51,410 I'm going to first update my use context call right here. 116 00:07:51,410 --> 00:07:57,200 I'm going to pull in our clear error message action function. 117 00:07:57,460 --> 00:08:01,690 So then as soon as we know that we're about to navigate away from the sign and screen I want to call 118 00:08:01,900 --> 00:08:04,990 clear air message. 119 00:08:04,990 --> 00:08:09,970 Now as usual we've got a function right here that's just calling another function so it's not really 120 00:08:09,970 --> 00:08:16,930 useful to create the extra arrow function we can instead just pass in clear error message directly and 121 00:08:16,930 --> 00:08:20,430 just make sure that we don't have any parentheses after it OK. 122 00:08:20,440 --> 00:08:21,840 So let's save this. 123 00:08:22,000 --> 00:08:26,440 Now the instant that we are about to navigate away from sign and screen clear error message should be 124 00:08:26,440 --> 00:08:28,910 invoked and we should see the error message go away. 125 00:08:29,810 --> 00:08:30,800 It's a back over here. 126 00:08:30,800 --> 00:08:32,680 I'm going to go over to my sign and screen. 127 00:08:32,750 --> 00:08:37,250 I'm going to get a error message to appear by putting in some garbage credentials and on tap on. 128 00:08:37,250 --> 00:08:38,410 Don't have an account. 129 00:08:38,510 --> 00:08:41,070 And as soon as I do that error message goes away. 130 00:08:41,150 --> 00:08:42,400 Perfect. 131 00:08:42,440 --> 00:08:42,630 Okay. 132 00:08:42,650 --> 00:08:45,690 So now we can repeat the same process inside of sign up as well. 133 00:08:45,770 --> 00:08:48,500 Remember if we tried to sign up with an email that already exists 134 00:08:53,190 --> 00:08:56,910 I'm gonna get that error message and if I go over to sign in air still persists. 135 00:08:56,910 --> 00:08:59,690 So we have to do the same thing for sign up as well. 136 00:08:59,700 --> 00:09:04,360 So over on my sign up screen here it is right here. 137 00:09:04,600 --> 00:09:15,750 I'm going to import navigation events from react navigation and then right above my off form over here 138 00:09:15,780 --> 00:09:18,020 I'll do navigation events. 139 00:09:18,290 --> 00:09:21,910 I'll define the on will blur function. 140 00:09:22,170 --> 00:09:26,240 I'll make sure that I pull in the clear error message. 141 00:09:26,370 --> 00:09:31,100 Action and throw it in like so. 142 00:09:31,190 --> 00:09:38,530 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 143 00:09:38,530 --> 00:09:42,930 email here on the sign up screen so there's my error message. 144 00:09:42,930 --> 00:09:46,600 And now as soon as I'm about to navigate away your message goes away. 145 00:09:46,650 --> 00:09:46,880 Okay. 146 00:09:46,920 --> 00:09:49,970 So I think that looks pretty good all right now. 147 00:09:50,030 --> 00:09:53,610 The last thing on I mentioned here very quickly I know this is another very long video. 148 00:09:53,630 --> 00:10:00,130 Another option we could have used here was to put it in this cleanup logic inside of our art form so 149 00:10:00,130 --> 00:10:04,940 we could have essentially called the same thing just earn it and set inside of art form instead. 150 00:10:04,960 --> 00:10:07,000 That probably would have worked out just fine. 151 00:10:07,000 --> 00:10:10,420 And do our cleanup inside of auth form because hey think about it. 152 00:10:10,450 --> 00:10:15,850 Either way we are showing or not showing the art form on both screens so we could have essentially put 153 00:10:15,850 --> 00:10:17,620 some cleanup logic inside there. 154 00:10:17,620 --> 00:10:23,130 However if we started to throw that inside of art form Oh it's an art form starts become kind of UN 155 00:10:23,140 --> 00:10:24,370 reusable. 156 00:10:24,370 --> 00:10:29,130 It's very unlikely that we're going to reuse art form on any other screen inside this application. 157 00:10:29,140 --> 00:10:35,950 However as soon as art form starts out any reference whatsoever to our off context it no longer really 158 00:10:35,950 --> 00:10:36,900 becomes reusable. 159 00:10:36,910 --> 00:10:43,510 It's only reusable so long as we have it tied in very directly and very closely with our off context. 160 00:10:43,510 --> 00:10:45,950 So maybe that's not the worst thing for this project. 161 00:10:46,000 --> 00:10:49,570 Nonetheless that's just one of the things that goes through my head when I think about possibly putting 162 00:10:49,570 --> 00:10:55,500 that cleanup code inside of here as opposed to putting inside of both sign up and sign it okay. 163 00:10:55,530 --> 00:10:56,460 So long video. 164 00:10:56,520 --> 00:11:00,360 I apologize for that but now that we've got all this stuff patched up let's take another pause right 165 00:11:00,360 --> 00:11:03,420 here and start working on our track list in the next video.