1
00:00:00,880 --> 00:00:05,520
In the last section we got our employee list working so we can see all the different employees we've

2
00:00:05,520 --> 00:00:07,160
created for our app.

3
00:00:07,320 --> 00:00:13,260
We should of course be able to handle or excuse me be able to tap on any given user and navigate to

4
00:00:13,260 --> 00:00:15,960
that screen so we can see more details about them.

5
00:00:15,960 --> 00:00:17,520
So let's work on the next.

6
00:00:17,820 --> 00:00:20,110
We've handled navigation several times in a row now.

7
00:00:20,130 --> 00:00:23,690
So I bet you've got a pretty good idea of what to expect.

8
00:00:23,700 --> 00:00:30,320
We want to call our actions helper from the router whenever a user taps on an individual row.

9
00:00:30,670 --> 00:00:32,920
Now of course we've done something like this before.

10
00:00:32,940 --> 00:00:35,220
Back when we're building lists previously.

11
00:00:35,220 --> 00:00:46,950
So in my list item component I'm going to import the touchable without feedback and the view tags and

12
00:00:46,950 --> 00:00:55,980
then inside of my render method I'll add on the touchable without feedback a view tag and then I'm going

13
00:00:55,980 --> 00:00:57,450
to close both those off.

14
00:00:57,450 --> 00:01:08,300
So there's the card section close off the view and close off the touchable without feedback looks good.

15
00:01:08,700 --> 00:01:12,660
And now we need to add in on press handler to touchable without feedback.

16
00:01:12,810 --> 00:01:16,370
So whenever we touch tap this thing we're going to do some work right.

17
00:01:16,380 --> 00:01:21,920
We got a callback in here somewhere so I'll pass this in on press handler.

18
00:01:22,380 --> 00:01:31,080
I'm not going to call it about on road press I'll blind it to this next level to find the method on

19
00:01:31,080 --> 00:01:31,860
the class.

20
00:01:31,860 --> 00:01:38,060
So on road press and then presumably in here we're going to want to do our actual navigation.

21
00:01:38,160 --> 00:01:41,510
So we haven't imported actions yet but we will in just a second.

22
00:01:41,760 --> 00:01:43,320
So I'm going to show.

23
00:01:43,550 --> 00:01:47,780
Let's see it let's double check the amount that key was for that form that we're using.

24
00:01:47,820 --> 00:01:53,040
So I can open up the router whenever we are on the employee list.

25
00:01:53,040 --> 00:01:55,610
We are on a key of an employee list.

26
00:01:55,710 --> 00:02:00,130
And then when we want to go over to that form we're going to go to employee create.

27
00:02:00,360 --> 00:02:05,950
So we're going to go to actions dot employee create.

28
00:02:06,450 --> 00:02:15,260
Lastly I need to imports the actions object from our favorite unnamed library out there.

29
00:02:15,310 --> 00:02:18,290
Re-act native router flux.

30
00:02:18,510 --> 00:02:19,730
Ah God.

31
00:02:19,750 --> 00:02:20,400
The first time.

32
00:02:20,400 --> 00:02:21,490
Fantastic.

33
00:02:21,840 --> 00:02:27,750
OK let's do a little bit of testing and you know to see you know I'm kind of driving towards a point

34
00:02:27,750 --> 00:02:32,370
here this is going to be a little bit more challenging a little bit more interesting than than what

35
00:02:32,440 --> 00:02:37,850
you might think it was mean of the last big challenges we have to confront in this application.

36
00:02:37,980 --> 00:02:38,220
OK.

37
00:02:38,220 --> 00:02:40,450
So I just signed in here's my list of employees.

38
00:02:40,560 --> 00:02:47,910
Now I'm going to tap on an employee and I go to the employee create form when we get here however the

39
00:02:47,910 --> 00:02:51,740
form doesn't seem to have any details related to the employee I just tapped on.

40
00:02:51,750 --> 00:02:56,320
Remember we're like we're using this form as kind of a show.

41
00:02:56,700 --> 00:02:57,460
And at it.

42
00:02:57,480 --> 00:03:02,620
So we don't really specifically have like a show route or a show screen words going to show an employee.

43
00:03:02,670 --> 00:03:08,010
We've only got the concept of like editing our employee and that's just because that's how I designed

44
00:03:08,010 --> 00:03:08,780
the app right.

45
00:03:08,790 --> 00:03:16,080
Like I want to show the edit form here and then like a save changes a fire and a text button down the

46
00:03:16,080 --> 00:03:16,680
bottom as well.

47
00:03:16,680 --> 00:03:18,020
That was the idea here.

48
00:03:18,510 --> 00:03:25,420
So I click on the employee and you know we get the form but there's no details related to that employee.

49
00:03:25,530 --> 00:03:27,210
And of course there's no details.

50
00:03:27,210 --> 00:03:28,550
Why would there be right.

51
00:03:28,560 --> 00:03:34,290
We've got our employee form reduce our debt is 100 percent in control this form right here and we have

52
00:03:34,290 --> 00:03:39,180
done nothing whatsoever to tell that reduce or hey please make use of this employee.

53
00:03:39,180 --> 00:03:43,610
You know I just tapped on the employee make sure that the form reflects that employees attributes the

54
00:03:43,610 --> 00:03:46,430
right kind of stuff we have done nothing around that.

55
00:03:46,980 --> 00:03:52,380
All we did was tell the navigator to show this form so we can have any expectation that you know anything

56
00:03:52,380 --> 00:03:54,830
is just going to magically happen here for us.

57
00:03:54,840 --> 00:04:00,780
So what we really want to have happen is we want to somehow instruct the employee form that whenever

58
00:04:00,780 --> 00:04:07,800
it loads up and when I say employee form I'm talking about employee create of course want to tell employees

59
00:04:07,800 --> 00:04:09,700
create that whenever it loads up.

60
00:04:09,750 --> 00:04:12,660
It should be showing a very particular employee.

61
00:04:12,690 --> 00:04:19,420
So we kind of want to like bootstrap the form so to speak we want to pre-load the data that it shows.

62
00:04:19,560 --> 00:04:24,630
Now we could use an action creator to set a you know like selected employee or something like that.

63
00:04:24,630 --> 00:04:29,820
Maybe we could select a particular employee and say hey the former do search should always show either

64
00:04:29,820 --> 00:04:36,080
the stuff in the form or the selected employee that does just getting like a little bit weird.

65
00:04:36,180 --> 00:04:42,270
So let's go with the route of kind of like what I want to say hijack but no bootstrap.

66
00:04:42,270 --> 00:04:42,690
There we go.

67
00:04:42,690 --> 00:04:44,150
We're trying to bootstrap this form.

68
00:04:44,150 --> 00:04:47,100
I want to kind of inject my employee into it

69
00:04:50,380 --> 00:04:56,920
so inside of my actions doc employee create method right here I need to somehow communicate to the form

70
00:04:57,100 --> 00:04:58,690
which employee I want to show.

71
00:04:58,690 --> 00:04:59,810
Right that's like the whole idea.

72
00:04:59,820 --> 00:05:07,450
I want to somehow tell it hey for me need to be showing this very particular employee right to do so.

73
00:05:07,450 --> 00:05:14,080
We are going to pass some props over to the employee create form with this navigation help right here

74
00:05:14,710 --> 00:05:18,200
so we can pass any object we want in here.

75
00:05:18,610 --> 00:05:24,910
I'm going to pass an object with the key of employee and the value of this dot dot employee.

76
00:05:24,910 --> 00:05:32,830
Now whenever this navigation method is called the Employee create form will be rendered and it will

77
00:05:32,830 --> 00:05:36,900
be given an additional Propp of employee.

78
00:05:37,330 --> 00:05:42,850
We are in the list item right now and each list item is called with one employee which is provided as

79
00:05:42,870 --> 00:05:44,240
this Propst employee.

80
00:05:44,320 --> 00:05:47,760
So that's where this value is coming from right here.

81
00:05:47,830 --> 00:05:49,210
So let's test this out a little bit.

82
00:05:49,210 --> 00:05:55,240
I want to flip over to the employee create for now so I can go to employee create and inside the render

83
00:05:55,240 --> 00:05:55,960
method.

84
00:05:56,110 --> 00:06:04,190
I'm just going to console log this doc Propst not employed like so.

85
00:06:04,230 --> 00:06:06,730
So let's do a quick refresh.

86
00:06:06,770 --> 00:06:13,970
I'll pull up my a log in Hoopes

87
00:06:17,960 --> 00:06:21,230
And now if I just go ahead and hit add up I'm on top right.

88
00:06:21,270 --> 00:06:26,810
You see undefined because we went to the form and we did not pass any like configuration directly to

89
00:06:26,810 --> 00:06:31,640
the form only when we navigate to this form by tapping on an item.

90
00:06:31,640 --> 00:06:33,660
Our repassing this extra prop to it.

91
00:06:33,750 --> 00:06:36,390
It's not going to click on Samantha to go to the form.

92
00:06:36,470 --> 00:06:40,670
And then this time around I get the very particular employee in here as well.

93
00:06:40,850 --> 00:06:45,870
So now we are loading up our form and we know which employee we want to show in it and you know we know

94
00:06:45,870 --> 00:06:50,620
which employee we want to kind of pre-filled these different fields with.

95
00:06:51,380 --> 00:06:53,740
So let's figure out how to do that how to do that.

96
00:06:53,740 --> 00:06:55,430
Pre-filing in the next section