1 00:00:01,620 --> 00:00:05,850 As we're just discussing right now whenever we refresh the application we see the sign up screen for 2 00:00:05,850 --> 00:00:09,220 a fraction of a second which is just not quite ideal. 3 00:00:09,270 --> 00:00:11,250 So here's how we're going to fix this. 4 00:00:11,250 --> 00:00:14,070 We're essentially going to go back to understanding this flow right here. 5 00:00:14,070 --> 00:00:18,960 So when our application first starts up we want to check to see if there is a token until we actually 6 00:00:18,960 --> 00:00:20,900 have an answer to that question. 7 00:00:20,910 --> 00:00:24,100 We really don't want to show anything to the user whatsoever. 8 00:00:24,150 --> 00:00:27,170 So in other words we don't want to show the sign up screen by default. 9 00:00:27,180 --> 00:00:32,220 Instead we want to show kind of a loading screen of sorts or even just an empty screen. 10 00:00:32,400 --> 00:00:37,800 And then once we have an actual answer to that question then we can decide to go to tracklist or over 11 00:00:37,800 --> 00:00:40,040 to sign up one of the other. 12 00:00:40,050 --> 00:00:41,940 So how are we going to show an empty screen. 13 00:00:41,940 --> 00:00:45,450 Will it really just comes back to our app dot J.S. file. 14 00:00:45,450 --> 00:00:52,240 So inside of app dot J.S. remember right now the first screen that shows up is the sign up screen and 15 00:00:52,240 --> 00:00:56,760 that's only because it's essentially listed out first in sight of all these different navigators. 16 00:00:56,920 --> 00:01:02,350 So we could instead just add in a new alternative screen to show by default right here and make that 17 00:01:02,350 --> 00:01:05,250 the default screen that appears whenever the application first starts up. 18 00:01:06,160 --> 00:01:11,800 Then inside of that screen component we can add in some code to do that try local sign in and inside 19 00:01:11,800 --> 00:01:14,320 there we can really just not return any J.S. sex at all. 20 00:01:14,320 --> 00:01:18,030 Or alternatively we could show a loading spinner or something like that. 21 00:01:18,190 --> 00:01:20,720 And so we can make sure that we just have some kind of loading screen. 22 00:01:20,770 --> 00:01:25,150 And until we understand whether or not we have a token we're not going to show the sign up screen or 23 00:01:25,150 --> 00:01:31,060 the track list for that matter so let's create a new screen component inside of our screens directory. 24 00:01:31,170 --> 00:01:36,750 The entire goal this thing is going to be to just answer that question and do not show anything until 25 00:01:36,750 --> 00:01:39,110 we have an answer to it. 26 00:01:39,170 --> 00:01:39,380 Okay. 27 00:01:39,410 --> 00:01:45,260 So inside my screens directory I'm gonna make a new file called Resolve off screen Dot. 28 00:01:45,270 --> 00:01:51,470 J.S. we could have just as easily called it something like loading screen or initial screen or something 29 00:01:51,470 --> 00:01:52,160 like that. 30 00:01:52,190 --> 00:01:56,690 I call that resolve off because essentially we're trying to resolve the user's current authentication 31 00:01:56,690 --> 00:01:57,680 status. 32 00:01:57,680 --> 00:02:00,930 So I think that this name makes a decent amount of sense at least to me. 33 00:02:01,730 --> 00:02:01,930 OK. 34 00:02:01,940 --> 00:02:06,800 So inside of here we'll show a react component but it's not going to really return any jazz sax or any 35 00:02:06,800 --> 00:02:07,720 content. 36 00:02:08,060 --> 00:02:10,340 So I'm going to first get some imports here. 37 00:02:10,340 --> 00:02:19,080 We're going to import react use effect and use context brim react. 38 00:02:19,130 --> 00:02:26,580 We're also going to get our context as off context from the context of context. 39 00:02:26,580 --> 00:02:35,410 File then I'll make my component resolve off screen inside of here. 40 00:02:35,420 --> 00:02:37,520 I don't only want to show any content whatsoever. 41 00:02:37,520 --> 00:02:43,810 So remember if we ever have a component and we don't want it to show anything we can't return no again 42 00:02:43,810 --> 00:02:47,620 if we wanted to we could alternatively return a spinner or something like that. 43 00:02:47,740 --> 00:02:52,000 But even showing a spinner would be a little bit disorienting to a user because at the end of the day 44 00:02:52,210 --> 00:02:56,120 we can resolve our authentication status in like a fraction of a second. 45 00:02:56,170 --> 00:03:01,960 So if we showed a spinner on the screen it would still be a little bit disorienting to the user because 46 00:03:01,960 --> 00:03:06,040 they would see that spinner for just like half a second and then it would go away. 47 00:03:06,040 --> 00:03:10,420 So honestly I think that not showing anything from the resolve off screen kind of makes a lot of sense 48 00:03:11,820 --> 00:03:12,080 OK. 49 00:03:12,130 --> 00:03:16,900 Then inside of here we're going to do exactly what we're just doing inside of these sign up screen so 50 00:03:16,900 --> 00:03:18,660 we're going to use use effect. 51 00:03:18,670 --> 00:03:22,690 We're going to try to sign in locally so in other words check to see if we've got a token inside of 52 00:03:22,720 --> 00:03:25,940 async storage when we call try local sign in. 53 00:03:25,960 --> 00:03:28,930 Remember we've got the navigate function called inside there. 54 00:03:29,050 --> 00:03:33,910 So as long as we just call try local sign in from this component it's going to essentially take care 55 00:03:33,910 --> 00:03:35,380 of everything for us. 56 00:03:35,390 --> 00:03:39,820 It'll put the token into our state object and then navigate to the appropriate screen. 57 00:03:39,820 --> 00:03:43,900 So all we have to do is from inside of here is call that action function. 58 00:03:43,900 --> 00:03:45,510 So we first have to get access to it. 59 00:03:45,520 --> 00:03:53,050 That's why we imported use context and off context so I'll get my tri local sign in action function 60 00:03:53,860 --> 00:04:03,840 room use context off context well then define use effect going to once again put in an empty array as 61 00:04:03,840 --> 00:04:10,480 a second argument and then inside of here we will call tri local sign in. 62 00:04:10,660 --> 00:04:15,460 And then finally let's do an export default resolve off screen 63 00:04:18,930 --> 00:04:19,200 okay. 64 00:04:19,230 --> 00:04:23,790 Let's save this now and then going to go back over to my sign up screen and clean up some of the code 65 00:04:23,850 --> 00:04:26,880 around checking our authentication status so we had inside of here. 66 00:04:27,330 --> 00:04:31,870 So it's no longer up to these sign up screen to figure out what the current authentication status is. 67 00:04:31,890 --> 00:04:34,790 Instead it's all up to the resolve of the screen. 68 00:04:34,910 --> 00:04:41,250 So inside of sign up screen I'm going to delete the U.S. fact I'm going to delete the try local sign 69 00:04:41,250 --> 00:04:49,230 in and we can also delete the use effect import at the top as well OK so we can then save that file 70 00:04:49,320 --> 00:04:54,020 and then finally we're going to make sure that by default whenever application first starts up we showed 71 00:04:54,020 --> 00:04:55,940 the resolve off screen. 72 00:04:56,130 --> 00:05:07,390 So to do so we can go back to app J.S. inside of here we can import resolve off screen from source screens 73 00:05:08,800 --> 00:05:15,840 resolve off screen and then to make sure that we showed that component will add it to the very top of 74 00:05:15,840 --> 00:05:21,460 our top level stack navigator so we could say resolve off is resolved. 75 00:05:21,630 --> 00:05:28,340 Off screen remember we can alternatively throw this property right here anywhere inside this navigator 76 00:05:28,620 --> 00:05:34,890 and then just throw in a second argument to our stack navigator with the defaults or initial root name 77 00:05:35,100 --> 00:05:35,550 option. 78 00:05:35,640 --> 00:05:38,520 That's another way we can approach this as well. 79 00:05:38,520 --> 00:05:42,920 Right now we're just really relying on the fact that resolve authors listed first and that's why it's 80 00:05:42,930 --> 00:05:47,670 can be shown up by default or display by default whenever the application first starts up. 81 00:05:47,760 --> 00:05:52,440 So it's entirely possible that we might one day kind of like change the order of keys inside of here 82 00:05:52,680 --> 00:05:56,100 and then we would back to you back to having the log inflow show by default. 83 00:05:56,100 --> 00:06:00,180 So maybe adding in that initial root named property would be the best way to handle this. 84 00:06:00,210 --> 00:06:03,190 Nonetheless let's just test it out like this for right now. 85 00:06:03,270 --> 00:06:03,550 OK. 86 00:06:03,610 --> 00:06:09,450 Let's save this and I can make sure that I can see my device so I can see the refresh and now we don't 87 00:06:09,450 --> 00:06:12,520 have a flash of the log in screen or the succeeding thing. 88 00:06:12,540 --> 00:06:17,580 This sign up screen anymore because by default in the application first starts up we're gonna show resolve 89 00:06:17,640 --> 00:06:19,620 off that's completely empty. 90 00:06:19,650 --> 00:06:24,750 So we see nothing until we very shortly later see the tracklist screen because that's what we're navigating 91 00:06:24,750 --> 00:06:25,710 to. 92 00:06:25,770 --> 00:06:28,110 So it looks like this is working out pretty well. 93 00:06:28,320 --> 00:06:36,180 I'll try it out on Android and over here looks like I'm not signed up. 94 00:06:36,200 --> 00:06:40,960 So let me authenticate really quickly I'll go to sign in and then use a real account very quickly 95 00:06:43,610 --> 00:06:44,100 whoops. 96 00:06:44,100 --> 00:06:45,510 Hit the wrong button there my mistake 97 00:06:48,870 --> 00:06:50,600 sign in. 98 00:06:50,740 --> 00:06:52,050 So now I'm authenticated. 99 00:06:52,050 --> 00:06:58,880 I've got my token inside of async storage so I'll do a quick refresh and now when I come back in I'm 100 00:06:58,880 --> 00:07:01,570 going to get kicked directly to the trackless screen. 101 00:07:01,580 --> 00:07:02,870 Perfect. 102 00:07:02,870 --> 00:07:03,110 All right. 103 00:07:03,110 --> 00:07:07,490 So now if we ever want to get back to our authentication screen we need the ability to actually at blog 104 00:07:07,490 --> 00:07:08,140 out. 105 00:07:08,360 --> 00:07:12,590 So let's make sure that we very quickly take care of that account screen and give ourselves the ability 106 00:07:12,590 --> 00:07:17,500 to log out of our application so we can still really test the entire full app case. 107 00:07:17,580 --> 00:07:21,290 Let's take a quick pause right here and tackle the account screen in the next video.