1 00:00:02,370 --> 00:00:07,800 So we're making good progress, we migrated all our navigators or almost all. 2 00:00:08,130 --> 00:00:12,270 Now what about the switch navigator, NTR off navigator here? 3 00:00:12,870 --> 00:00:15,060 Well, we deti off Navigator for sure. 4 00:00:15,150 --> 00:00:19,290 It's a stack navigator which is responsible for the off screen. 5 00:00:20,040 --> 00:00:21,240 And we. 6 00:00:21,480 --> 00:00:23,130 Well, what about the switch navigator. 7 00:00:23,550 --> 00:00:26,410 Well we won't need to switch Navigator anymore. 8 00:00:26,460 --> 00:00:33,390 There is no at risk navigation switch package or anything like that, but I'll come back to that when 9 00:00:33,390 --> 00:00:33,820 we need it. 10 00:00:33,900 --> 00:00:41,040 So for now, let's create our off navigator or our off stack navigator here by calling. 11 00:00:42,000 --> 00:00:44,310 Navigator by calling create. 12 00:00:45,170 --> 00:00:53,360 Stack Navigator and export our constant off navigator here, which again is a react component, just 13 00:00:53,360 --> 00:01:01,790 as before we return off Stack Navigator, Dot Navigator, and in there we have our off Stack Navigator 14 00:01:02,060 --> 00:01:06,680 dot screen and the name of the screen is off as we have it here. 15 00:01:07,040 --> 00:01:10,400 And the component we need is off screen. 16 00:01:11,470 --> 00:01:17,200 So that's that now we got the devil nap options here, so the screen options on the navigator should 17 00:01:17,200 --> 00:01:18,640 be the default knap options. 18 00:01:19,150 --> 00:01:24,610 And for these screen specific options, let's have a look at the off screen. 19 00:01:25,060 --> 00:01:30,060 And if we scroll to the bottom, we have some options here as well. 20 00:01:30,130 --> 00:01:35,770 So let's export our screen options here just as we did it before. 21 00:01:36,190 --> 00:01:40,330 Let's export it and then go to the Shop Navigator here. 22 00:01:41,360 --> 00:01:49,070 And on that screen, let's set options two of the screen options, which we now all have to add as an 23 00:01:49,070 --> 00:01:58,970 import at the very top from off screen, we import screen options as off screen options. 24 00:02:00,010 --> 00:02:05,740 So let's start now, we also got the Start-Up screen, but if we have a closer look in the past, we 25 00:02:05,740 --> 00:02:13,140 just pointed at that directly from inside our Switch Navigator, which leaves us with just one question. 26 00:02:13,690 --> 00:02:16,500 What about this switch navigator? 27 00:02:17,230 --> 00:02:20,410 Now, in the past, this would have been the first screen. 28 00:02:20,410 --> 00:02:25,690 You see one you loaded because it's the top, most first screen in this configuration. 29 00:02:26,290 --> 00:02:33,610 And then we had logic in that old navigation container we built earlier where we checked whether we 30 00:02:33,610 --> 00:02:34,540 are authenticated. 31 00:02:34,720 --> 00:02:40,880 And if that was not true, if we were not authenticated, we would redirect a user to that off screen. 32 00:02:41,320 --> 00:02:43,990 Now, when would we reach the shop's screen? 33 00:02:44,410 --> 00:02:46,660 Well, for that, let's have a look at the Start-Up screen. 34 00:02:47,050 --> 00:02:54,370 There we see that we tried authenticating and here we would go to the shop screen eventually when automatically 35 00:02:54,370 --> 00:02:55,790 logging us in succeeded. 36 00:02:55,900 --> 00:02:57,950 That was the logic we wrote there. 37 00:02:58,330 --> 00:03:00,310 Now, that's still some logic. 38 00:03:00,310 --> 00:03:02,130 That makes a lot of sense. 39 00:03:03,360 --> 00:03:06,570 We just need to adjust that for the new navigation package. 40 00:03:07,820 --> 00:03:16,250 In the end, what we can see here is that any Start-Up screen we're trying to lock the user in, and 41 00:03:16,610 --> 00:03:20,600 if we can't find user data stored on the device, we go to the off page. 42 00:03:20,810 --> 00:03:24,140 If you find data, but the token is expired, we're not there. 43 00:03:24,380 --> 00:03:25,600 We go to the off page. 44 00:03:26,150 --> 00:03:34,340 If we do succeed with everything, though, and we have a valid token, then we instead go to the shop 45 00:03:34,340 --> 00:03:40,580 page and we dispatch an action where we authenticate the user, which changes data and our redux store, 46 00:03:40,880 --> 00:03:42,350 which sets the token and so on. 47 00:03:42,770 --> 00:03:46,130 Initially, that token in our store is null. 48 00:03:47,380 --> 00:03:47,860 Now. 49 00:03:48,830 --> 00:03:53,540 We can use that what if we get rid of all these navigate calls here? 50 00:03:54,960 --> 00:04:02,250 So we can delete them or just comment them out as I'm doing it here, so we get rid of all these navigation 51 00:04:02,250 --> 00:04:06,150 actions instead, what happens if we return here? 52 00:04:06,810 --> 00:04:11,070 Well, if we return here, then dysfunction execution stops. 53 00:04:11,080 --> 00:04:11,770 Indiana, right? 54 00:04:11,820 --> 00:04:12,750 It stops. 55 00:04:12,750 --> 00:04:17,250 And what we definitely don't do is we definitely don't dispatch does action. 56 00:04:17,250 --> 00:04:19,950 So we definitely don't set the token to anything. 57 00:04:20,130 --> 00:04:21,720 It's still null. 58 00:04:22,560 --> 00:04:27,690 That's always happening here unless we make it to the bottom, in which case we do have a token. 59 00:04:27,840 --> 00:04:32,160 We dispatched us and to token is not null thereafter in our store. 60 00:04:32,790 --> 00:04:38,370 So that token which we manage with redacts is ever null or it holds a value. 61 00:04:38,760 --> 00:04:46,080 Now I want to adjust the redox store a bit the off part of it and your producer and I'll add a new piece 62 00:04:46,080 --> 00:04:49,290 of data to this state, and that is the. 63 00:04:50,970 --> 00:04:58,380 Did try the log in key, you can name it however you want and I'll set it to false initially here I 64 00:04:58,380 --> 00:05:01,300 want to store whether we tried logging the user in or not. 65 00:05:02,220 --> 00:05:09,420 Now, if we authenticate, so if we dispatch an action with that identifier, then I will set did try 66 00:05:09,600 --> 00:05:10,970 to log in to true. 67 00:05:11,760 --> 00:05:15,840 I will also add a new action here in actions of. 68 00:05:16,610 --> 00:05:25,570 And for that, I'll add a new identifier up here, which will name set did try or A-L for all the login 69 00:05:25,850 --> 00:05:31,880 set did try Al and create an action creator for that set. 70 00:05:31,880 --> 00:05:33,530 Did try a.l. 71 00:05:36,060 --> 00:05:44,370 Which takes no arguments and where I didn't return my action object, where the type is just set, did 72 00:05:44,370 --> 00:05:47,530 try Al you could all to put it at the bottom of the file. 73 00:05:47,550 --> 00:05:48,290 Doesn't matter. 74 00:05:48,960 --> 00:05:50,070 Now, why am I doing that? 75 00:05:50,340 --> 00:05:51,290 You'll see it in the second. 76 00:05:51,450 --> 00:05:58,800 Let's go back to the reducers you off reducer and handle this in case the case set did trial. 77 00:05:58,920 --> 00:06:01,980 Make sure you all to import this from actions off. 78 00:06:02,930 --> 00:06:09,410 Now, any year we return a new piece of state where I copied the old state and where I said Detroit 79 00:06:09,410 --> 00:06:10,750 ought to log into true. 80 00:06:11,240 --> 00:06:14,110 So the token might still be not just set this to true. 81 00:06:14,660 --> 00:06:21,290 Now, my idea is that I dispatched this action here in the Start-Up screen in all scenarios where we 82 00:06:21,290 --> 00:06:23,180 previously went to the off screen. 83 00:06:23,240 --> 00:06:26,660 So where we tried logging in, but where we didn't succeed. 84 00:06:27,320 --> 00:06:27,800 So you're. 85 00:06:27,800 --> 00:06:28,280 I will. 86 00:06:29,270 --> 00:06:30,200 Dispatch. 87 00:06:31,480 --> 00:06:40,540 Set did try Al, so make sure you access this on you all factions just like this and do it in these 88 00:06:40,540 --> 00:06:43,560 two cases where we previously navigated to the off screen. 89 00:06:44,290 --> 00:06:46,240 So now we have this new field and redux. 90 00:06:46,240 --> 00:06:48,150 And why am I doing that? 91 00:06:48,160 --> 00:06:49,210 Why is this helpful? 92 00:06:49,780 --> 00:06:54,940 Well, because with react navigation five, there is no switch navigator anymore because we don't need 93 00:06:54,940 --> 00:06:55,480 it anymore. 94 00:06:55,780 --> 00:07:04,210 Since we now manage our entire route, set up wire components, we can just dynamically render components 95 00:07:04,210 --> 00:07:10,120 to have them have an effect or not render them so in the App Navigator. 96 00:07:11,900 --> 00:07:18,350 Where I render my Products Navigator, it's now time to add all these navigators be configured and then 97 00:07:18,350 --> 00:07:21,200 decide which navigator should be rendered when. 98 00:07:22,410 --> 00:07:27,300 So from the Shop Navigator, I now actually want to import. 99 00:07:31,620 --> 00:07:36,690 This shop navigator here, which I'll export as a constant again. 100 00:07:38,140 --> 00:07:42,820 And then here, an App Navigator, I import Shop Navigator, that's our draw navigator. 101 00:07:42,850 --> 00:07:43,690 Keep that in mind. 102 00:07:43,930 --> 00:07:45,650 And that's what I want to render here. 103 00:07:46,030 --> 00:07:47,110 Shop Navigator. 104 00:07:48,180 --> 00:07:51,850 So this is basically what I want to render if we are locked in. 105 00:07:51,870 --> 00:07:53,520 That's our shop, right? 106 00:07:53,860 --> 00:07:58,860 Obviously, that is what we mapped to this shop key in a switch navigator. 107 00:07:59,010 --> 00:08:01,970 Now, we also need off Navigator and the Start-Up screen. 108 00:08:02,340 --> 00:08:03,780 So here, an app navigator. 109 00:08:04,200 --> 00:08:06,360 I'll import the off navigator. 110 00:08:06,390 --> 00:08:09,120 And these are the only two navigators I need to import here. 111 00:08:09,240 --> 00:08:14,640 Hence, you could remove the export statement on all the other navigators here in our Shop Navigator 112 00:08:14,640 --> 00:08:15,060 file. 113 00:08:16,080 --> 00:08:22,200 But what we also need to import into App Navigator is the Start-Up screen now, so let's import Start-Up 114 00:08:22,620 --> 00:08:23,880 screen from. 115 00:08:25,010 --> 00:08:26,780 Screens start up screen. 116 00:08:28,030 --> 00:08:35,020 And now here we have to shop navigator, we have the off navigator as an alternative and we also have 117 00:08:35,030 --> 00:08:37,270 the Start-Up screen. 118 00:08:38,870 --> 00:08:40,910 Now will only render one of the free. 119 00:08:42,060 --> 00:08:48,300 And and this is where we can now reuse redux, I'll copy use selector, because besides information 120 00:08:48,300 --> 00:08:56,010 about the token, I'm also interested in learning about the did try all and field, which I added to 121 00:08:56,010 --> 00:08:57,620 the off state here. 122 00:08:57,730 --> 00:09:05,400 This new field added, I now get access to this here in my App Navigator file and stored in a ditch. 123 00:09:05,400 --> 00:09:07,480 Try a log in constant. 124 00:09:08,190 --> 00:09:14,190 Now I know I want to render to shop if is all this true and this is how we can do that. 125 00:09:14,340 --> 00:09:15,630 If we are authenticated. 126 00:09:15,630 --> 00:09:17,040 I always render to shop. 127 00:09:17,040 --> 00:09:18,870 I don't care about anything else. 128 00:09:20,080 --> 00:09:28,060 Now, I want to render the off navigator if is all of its faults, and we did try to log in yet because 129 00:09:28,060 --> 00:09:34,360 if we haven't tried logging in automatically, then I actually want to render the Start-Up screen. 130 00:09:34,900 --> 00:09:40,000 So if we're not authenticated and we did not try. 131 00:09:40,910 --> 00:09:47,030 Our Autoblog, and yet, well, then we don't know whether the user might be authenticated or not. 132 00:09:47,120 --> 00:09:49,370 So in that case, I want to render the Start-Up screen. 133 00:09:50,770 --> 00:09:57,910 Now, I quickly want to pause there and make sure we're all on the same page and we all understand why 134 00:09:57,910 --> 00:10:00,610 we're now using this instead of the switch navigator. 135 00:10:00,730 --> 00:10:03,650 Now, first of all, there is no switch navigator anymore. 136 00:10:03,700 --> 00:10:05,280 In fact, navigation five. 137 00:10:05,710 --> 00:10:07,030 But why was it removed? 138 00:10:07,660 --> 00:10:15,010 Well, since we now configure everything with components, we can use regular react tools to ever render 139 00:10:15,010 --> 00:10:16,090 a component or not. 140 00:10:16,460 --> 00:10:21,520 If you're not thinking about navigation, but a normal screen where you maybe have a text which you 141 00:10:21,520 --> 00:10:25,810 only want to show conditionally, then you would use some state. 142 00:10:25,900 --> 00:10:31,810 And then in jazz X, you would only sometimes render the text with a ternary expression, for example. 143 00:10:31,990 --> 00:10:37,300 And we're doing the same here with our route configuration, with our screen configurations here, the 144 00:10:37,300 --> 00:10:41,050 screen configuration setup we have here, our different navigators. 145 00:10:41,050 --> 00:10:48,460 And to start up screen, these are indeed all just things that we should be aware of to bring something 146 00:10:48,460 --> 00:10:50,080 onto the screen and react. 147 00:10:50,080 --> 00:10:56,140 Navigation behind the scenes does the heavy lifting of interpreting our configuration and making sure 148 00:10:56,140 --> 00:10:58,720 that the correct component gets rendered on the screen. 149 00:10:59,380 --> 00:11:09,210 Now, if we use is off and did try to log in to control, which navigator is actually render able by 150 00:11:09,220 --> 00:11:16,840 react by using such a ternary expression, then we ensure that if for example, is off is not true, 151 00:11:17,020 --> 00:11:21,330 there is no way that Shop Navigator screens can be brought to the screen. 152 00:11:21,550 --> 00:11:22,060 Why? 153 00:11:22,210 --> 00:11:28,150 Because the Shop Navigator component, which holds our shop related route configuration, our screen 154 00:11:28,150 --> 00:11:32,650 configuration, that component is only rendered if it's office. 155 00:11:32,650 --> 00:11:33,190 True. 156 00:11:33,340 --> 00:11:40,450 So there's no way for a shop related screen to be rendered to the screen if if off is false, really 157 00:11:40,450 --> 00:11:47,260 make that comparison to normal text elements or normal boxes on a screen which you render conditionally. 158 00:11:47,500 --> 00:11:53,860 We're doing the same here, but not with boxes and text, but instead with our entire navigation stack. 159 00:11:54,010 --> 00:11:55,180 That's what we do here. 160 00:11:56,060 --> 00:12:00,170 And with all that, if we save this and we rerun this on Android. 161 00:12:04,150 --> 00:12:07,000 We end up on the off screen, and if I reload this. 162 00:12:08,060 --> 00:12:09,050 And the rebels. 163 00:12:11,030 --> 00:12:12,530 We again end up there. 164 00:12:13,570 --> 00:12:16,450 Now, if I do try to log in here. 165 00:12:21,650 --> 00:12:28,820 I now actually get a problem here, I get an error that navigate with a payload of shop was not handled. 166 00:12:29,940 --> 00:12:35,100 Well, this now makes sense, if you think about it, we got no switch navigator anymore. 167 00:12:35,430 --> 00:12:39,820 Instead, we just control which navigator we want to render, under which circumstances. 168 00:12:40,290 --> 00:12:42,360 So why are we getting this? 169 00:12:42,390 --> 00:12:44,250 Can you figure it out and fix it on your own? 170 00:12:44,470 --> 00:12:46,090 Otherwise, we'll do it together. 171 00:12:46,140 --> 00:12:48,330 We'll fix it together in the next lecture.