1 00:00:00,570 --> 00:00:03,020 Our navigation is coming along pretty well so far. 2 00:00:03,250 --> 00:00:07,510 We are able to navigate from the log and form over to the employee list. 3 00:00:07,510 --> 00:00:12,380 I would now love to start working on the employee list itself and start showing employees to our users. 4 00:00:12,460 --> 00:00:17,030 But you'll keep in mind that we don't actually have the ability to add any employees yet. 5 00:00:17,230 --> 00:00:19,030 So what would we really be showing here. 6 00:00:19,030 --> 00:00:19,680 Right. 7 00:00:19,690 --> 00:00:24,550 So I think that the first thing we really have to work on is give our users the ability to create a 8 00:00:24,550 --> 00:00:28,210 new employee and save it to our back end database. 9 00:00:28,210 --> 00:00:32,170 Now I want to give you a quick reminder on what that component is going to look like. 10 00:00:32,170 --> 00:00:37,450 So inside of our employee list we should have some buttoned up in the header up here that will take 11 00:00:37,450 --> 00:00:42,390 the user over to a new form where the user should be able to create a new employee. 12 00:00:42,640 --> 00:00:47,110 They should build clicks save and then go back over to the employee list automatically. 13 00:00:47,110 --> 00:00:49,450 So that's what we really want to have happen here. 14 00:00:49,450 --> 00:00:55,570 Step number one is to somehow get a out of button to appear in the header of our employee list component 15 00:00:56,380 --> 00:00:57,100 to do so. 16 00:00:57,160 --> 00:01:02,530 We're going to add a couple of props to our scene responsible for showing the employee list inside of 17 00:01:02,530 --> 00:01:04,000 our rodder file. 18 00:01:04,000 --> 00:01:10,360 So here's the scene right here that's showing our employee list in order to customize the header that 19 00:01:10,360 --> 00:01:12,380 shows up whenever we see the scene. 20 00:01:12,460 --> 00:01:17,800 We're going to pass some additional props to the scene itself so I can get myself a little bit of space 21 00:01:17,800 --> 00:01:20,830 to type by noon lining some of the props here. 22 00:01:22,200 --> 00:01:26,170 Like so and then we're going to add on to additional props to this thing. 23 00:01:26,490 --> 00:01:31,710 The first thing that we're going out on is a prop called right title right. 24 00:01:31,710 --> 00:01:37,200 Title is going to be a string that will be displayed on the right hand side of our Hetter any time we 25 00:01:37,200 --> 00:01:40,320 are looking at the employee list component. 26 00:01:40,320 --> 00:01:42,940 I'm going to give this the text app like so. 27 00:01:43,050 --> 00:01:44,160 So pretty straightforward. 28 00:01:44,190 --> 00:01:48,000 The user is going to see something and says add and I think they're going to recognize that this is 29 00:01:48,000 --> 00:01:51,660 going to be used to add a new employee. 30 00:01:51,660 --> 00:01:57,440 Then right underneath it we're going to add one other prop as well just specifying right. 31 00:01:57,450 --> 00:02:02,710 Title right here doesn't really do anything and doesn't really link up the different screens or application. 32 00:02:02,730 --> 00:02:07,580 So in order to make sure that we actually have the ability to navigate between different scenes we're 33 00:02:07,590 --> 00:02:10,710 going to add on a callback function to this thing. 34 00:02:11,160 --> 00:02:16,930 So we're going to out on a callback by specifying another product called on right. 35 00:02:17,250 --> 00:02:18,840 This will be a callback function. 36 00:02:18,870 --> 00:02:24,230 They'll be executed any time the user taps on the right hand side button. 37 00:02:24,240 --> 00:02:29,360 Now we will eventually add some code inside of here to navigate over to the employee create form. 38 00:02:29,550 --> 00:02:36,660 But right now let's just do a console log that says right like so I will test this out inside the browser 39 00:02:36,870 --> 00:02:41,130 and make sure that the console log or the test out in the simulator can make sure that the console log 40 00:02:41,130 --> 00:02:46,520 appears inside of our browser console that is hooked up in debugger mode. 41 00:02:46,590 --> 00:02:49,280 So I've already got my debugger handy right here. 42 00:02:49,660 --> 00:02:50,960 Here is my simulator. 43 00:02:50,970 --> 00:02:53,130 I'm going to refresh and log back in 44 00:02:58,260 --> 00:03:03,160 so a log in and now I should see the text ad appear on here on the right and I definitely do. 45 00:03:03,350 --> 00:03:08,250 And if I tap it I see the console log right appear in my console in the browser. 46 00:03:08,250 --> 00:03:08,990 Awesome. 47 00:03:09,270 --> 00:03:10,120 Just what we need. 48 00:03:10,230 --> 00:03:14,580 So let's continue on the next section and we're going to get started on our employee forum and hook 49 00:03:14,580 --> 00:03:16,540 it up to this ad button.