1 00:00:00,670 --> 00:00:06,000 In the last section we were able to navigate between two scenes automatically whenever a user logged 2 00:00:06,000 --> 00:00:07,320 into our application. 3 00:00:07,320 --> 00:00:11,940 Now there's just one issue that we're running into now and that's whenever we navigate over to the employee 4 00:00:11,950 --> 00:00:16,710 list we get this automatically generated blue button here placed in the letter. 5 00:00:16,710 --> 00:00:22,090 Now of course maybe it will make sense to eventually allow a user to go back to the log in form. 6 00:00:22,170 --> 00:00:28,530 Whenever we start to implement the log out functionality but usually logging out of an app is an option 7 00:00:28,530 --> 00:00:34,380 that is buried in some type of menu at present if this actually logged our user out there would be a 8 00:00:34,380 --> 00:00:40,050 rather poor user experience because that's a rather large button on the screen that a user could very 9 00:00:40,080 --> 00:00:42,410 easily press accidentally. 10 00:00:42,450 --> 00:00:47,830 In general we don't really want to make it that easy for a user to log out as soon as they log out. 11 00:00:47,820 --> 00:00:52,740 Then they have to retype in their e-mail and their password which is always a real big hassle. 12 00:00:52,740 --> 00:00:57,430 So we need to figure out some way to disable this button right here to do so. 13 00:00:57,480 --> 00:01:03,140 We're going to make a little bit of a change to our scene set up inside of our router at present. 14 00:01:03,150 --> 00:01:05,690 You'll notice that we've got our two scenes in here. 15 00:01:05,760 --> 00:01:13,560 The logon screen and our employee list these two scenes form kind of two separate flows throughout our 16 00:01:13,560 --> 00:01:14,390 application. 17 00:01:14,520 --> 00:01:18,420 So let's take a look at a diagram that's going to expand on that a little bit. 18 00:01:18,420 --> 00:01:19,280 So if you're at the top. 19 00:01:19,280 --> 00:01:24,410 We've got the authentication flow in our app that has its own scene. 20 00:01:24,450 --> 00:01:29,300 Then on a totally separate flow we have our employee list down here. 21 00:01:29,490 --> 00:01:34,350 And eventually we want the user to be able to tap on a name on that employee list and then navigate 22 00:01:34,350 --> 00:01:40,570 over to the employee create whenever a user navigates from employee list to employee create. 23 00:01:40,570 --> 00:01:46,540 I think that in that sense or in that case it would make a lot of sense to have the back button be automatically 24 00:01:46,540 --> 00:01:48,100 generated in the header. 25 00:01:48,100 --> 00:01:54,730 So in other words if we go from this flow to this flow we don't want to see a back button but if we 26 00:01:54,730 --> 00:02:01,340 go from employee list to employee create we probably will want to see the back button. 27 00:02:01,440 --> 00:02:06,820 So to set up this type of navigation structure where in some cases we see a back button and in some 28 00:02:06,820 --> 00:02:08,070 cases we don't. 29 00:02:08,280 --> 00:02:14,590 We're going to create two new scenes in our application inside of our router file to be specific. 30 00:02:14,890 --> 00:02:20,120 And these two new scenes are going to grouped together specific child scenes. 31 00:02:20,290 --> 00:02:23,220 So this would be a child scene and this would be a child scene. 32 00:02:23,440 --> 00:02:28,780 So we want to group these two scenes together because we expect to be able to freely navigate between 33 00:02:28,780 --> 00:02:32,110 them using that automatically generated back button. 34 00:02:32,470 --> 00:02:38,770 But this scene right here is not going to have any other scene that has easy back and forth navigation 35 00:02:38,770 --> 00:02:40,290 through the use of a back button. 36 00:02:40,480 --> 00:02:44,680 So we're going to place it nested in its own separate scene. 37 00:02:44,710 --> 00:02:47,850 Now when I described this with words it's a little bit confusing. 38 00:02:47,950 --> 00:02:53,830 So let's add the code to kind of split these two scenes off into their own separate buckets of sorts. 39 00:02:53,980 --> 00:02:56,030 And then we'll get a better sense of what's going on. 40 00:02:56,370 --> 00:03:01,570 So inside of my router file I'm going to find my log in scene right here. 41 00:03:01,750 --> 00:03:06,460 And I'm going to wrap it with a new parent seem like so 42 00:03:10,620 --> 00:03:15,160 I can make sure I give this scene a key because all the scenes we create must have a key assigned to 43 00:03:15,160 --> 00:03:15,870 them. 44 00:03:16,150 --> 00:03:20,760 And I think that this scene right here kind of describes the Auth. flow inside of our application. 45 00:03:20,800 --> 00:03:28,780 So I'm going to decide to give it a key of off like so or then wrap the employee list inside of its 46 00:03:28,870 --> 00:03:30,550 own scene as well. 47 00:03:33,640 --> 00:03:38,400 And I'll give this one a key of main because I think this really describes the main flow throughout 48 00:03:38,400 --> 00:03:40,350 the application. 49 00:03:40,360 --> 00:03:40,590 All right. 50 00:03:40,600 --> 00:03:44,190 So now we've got two separate buckets of scenes. 51 00:03:44,290 --> 00:03:50,650 When we eventually create the employee detailed component we will replace that new scene inside of here 52 00:03:50,650 --> 00:03:51,070 as well. 53 00:03:51,070 --> 00:03:57,420 So would be something like employee detail and so this will tell Riak native router flux that we want 54 00:03:57,650 --> 00:04:03,520 to easily navigate between the employee list and the employee detail but navigation from the log in 55 00:04:03,700 --> 00:04:08,440 over to either the employee list or the detail right here should not be quite so easy. 56 00:04:08,620 --> 00:04:14,560 And as I'm seen easy to navigate or not easy to navigate what I'm really saying is whether or not we 57 00:04:14,560 --> 00:04:17,560 get that automatic back button generated. 58 00:04:17,590 --> 00:04:20,390 So let's save this right now and just see what happens. 59 00:04:20,470 --> 00:04:21,980 And it's let's save this file. 60 00:04:22,000 --> 00:04:24,920 I'm going to go back over to my simulator and refresh. 61 00:04:25,330 --> 00:04:30,030 Now when I do so you're going to immediately notice some really strange behavior. 62 00:04:30,100 --> 00:04:35,170 You take a look here and you'll see that we've got this extra gigantic header inside of our application. 63 00:04:35,410 --> 00:04:40,960 So this extra header right here has been generated simply because we added in these extra seam components 64 00:04:41,680 --> 00:04:46,440 to disable this extra head a head or in here we can find the roots seen. 65 00:04:46,450 --> 00:04:48,090 So here's the route seen right here. 66 00:04:48,310 --> 00:04:56,720 And we're going to add on a prop of hide nav bar to the route seen that will make sure that this extra 67 00:04:56,730 --> 00:05:02,250 nav bar is not automatically generated just because we are nesting in some extra scenes here. 68 00:05:02,570 --> 00:05:06,280 So let's now refresh and it's back to looking good. 69 00:05:06,290 --> 00:05:07,900 All right let's log in for real here. 70 00:05:07,930 --> 00:05:14,960 So I'll say test at Testim come and password and then I'll log in. 71 00:05:15,210 --> 00:05:19,390 Now when I log in you'll notice that I still have a blue button appearing up here. 72 00:05:19,410 --> 00:05:22,020 But this time it doesn't say Please log in. 73 00:05:22,080 --> 00:05:24,150 Now it says employees. 74 00:05:24,240 --> 00:05:25,410 Well that's kind of strange. 75 00:05:25,410 --> 00:05:27,180 Let's cook it and see what happens. 76 00:05:27,480 --> 00:05:33,240 Oh when I click it it takes me back so to speak to another employee list screen. 77 00:05:33,240 --> 00:05:35,670 So this is a little bit of weird functionality here. 78 00:05:35,700 --> 00:05:42,600 We can fix it up by finding our action creator file so I can open up my action creator file down here 79 00:05:42,600 --> 00:05:45,500 at the bottom we've got our log in users success callback. 80 00:05:45,630 --> 00:05:46,910 And you'll recall that we had said. 81 00:05:46,920 --> 00:05:53,010 Any time that we successfully log into our application we want to automatically go to the employee list 82 00:05:53,270 --> 00:05:54,630 seem. 83 00:05:54,810 --> 00:05:59,630 Now this is a little bit of an oddity of how re-act native outflux works. 84 00:05:59,640 --> 00:06:05,610 But essentially if we want to navigate now from let's go back to the router really quickly if you want 85 00:06:05,610 --> 00:06:11,460 to navigate from this flow right here or from this bucket of scenes rather than navigating directly 86 00:06:11,490 --> 00:06:16,160 into these child scenes we are going to first navigate to Maine. 87 00:06:16,170 --> 00:06:20,120 So rather than going directly to employee list we're going to navigate to Maine. 88 00:06:20,250 --> 00:06:25,560 And Maine is going to attempt to automatically show the first Siemon side of it which is the employee 89 00:06:25,560 --> 00:06:26,460 list. 90 00:06:26,460 --> 00:06:32,220 So long story short in our index start just file or in the actual creator file rather than navigating 91 00:06:32,220 --> 00:06:33,320 to employee list. 92 00:06:33,450 --> 00:06:39,780 We're now going to navigate to Maine now specifically saying Maine right here because that is the key 93 00:06:39,830 --> 00:06:43,110 that we just assigned to the new scene that we just created. 94 00:06:43,110 --> 00:06:47,250 So back inside the router Here's our scene with key main right here. 95 00:06:47,550 --> 00:06:52,740 So after we log in try to go to this flow this flow right here is going to attempt to show the first 96 00:06:52,740 --> 00:06:56,310 scene inside of it which in this case is the employee list. 97 00:06:56,340 --> 00:06:59,960 So it's now testis out again and see what happens. 98 00:07:00,000 --> 00:07:06,940 So I will put in my e-mail again and again. 99 00:07:07,240 --> 00:07:12,300 And now we navigate over to the employee list and we don't have any back button present perfect. 100 00:07:12,340 --> 00:07:13,820 So that's exactly what we wanted. 101 00:07:14,080 --> 00:07:14,470 OK. 102 00:07:14,470 --> 00:07:19,000 I think that our navigation is now in a fairly good spot so let's continue in the next video.