1

00:00:00,930  -->  00:00:06,270
In the last section we went ahead and added a check to make sure that we had a loaded video before we

2

00:00:06,270  -->  00:00:08,100
tried to show the video detail.

3

00:00:08,100  -->  00:00:09,890
And you could see I'm refreshing here.

4

00:00:09,990  -->  00:00:11,940
You can see the loading text on the top left.

5

00:00:11,940  -->  00:00:18,000
Very briefly we cut that case because we check for the existence of a video property before rendering

6

00:00:18,000  -->  00:00:19,000
the component.

7

00:00:19,320  -->  00:00:23,730
If the video wasn't provided then we just showed a quick Ajax spinner.

8

00:00:23,730  -->  00:00:24,800
Now this isn't really a check.

9

00:00:24,810  -->  00:00:26,740
We want to add to every single component.

10

00:00:26,760  -->  00:00:28,020
Just we really need it.

11

00:00:28,020  -->  00:00:32,440
I mean imagine if someone was loading a page and they saw like 10 spinners pop up right.

12

00:00:32,580  -->  00:00:34,650
Something you want to do very rarely.

13

00:00:34,650  -->  00:00:41,340
In general it's safest to locate an AJAX spinner on a fairly high level or you know parent level component

14

00:00:41,340  -->  00:00:42,900
.

15

00:00:42,900  -->  00:00:48,930
So we can show a single video but we really want to give the user the ability to click on another video

16

00:00:50,100  -->  00:00:53,330
and see it pop up on the screen.

17

00:00:53,370  -->  00:00:54,760
So here's the plan.

18

00:00:54,980  -->  00:01:00,830
We'll add the concept of a selected video to the app components state.

19

00:01:01,020  -->  00:01:07,890
So I'm inside of an here and I want to add the concept of a selected video the selected video will be

20

00:01:07,890  -->  00:01:12,640
a video object and it will be always passed into video detail.

21

00:01:13,140  -->  00:01:19,470
So instead of passing in this state video is at zero we can just pass in this state that selected video

22

00:01:21,300  -->  00:01:26,880
to update the selected video will pass a callback from app into video list.

23

00:01:27,120  -->  00:01:34,980
And then from video list into video list item whenever the video list item is clicked it will run the

24

00:01:35,000  -->  00:01:37,500
callback with a video that belongs to it.

25

00:01:37,800  -->  00:01:41,810
So that's pretty confusing just to say you know even think about.

26

00:01:41,940  -->  00:01:44,910
Let's go ahead and give us a shot and see how we do.

27

00:01:44,910  -->  00:01:48,840
The first thing they will do is add the concept of the selected video.

28

00:01:48,840  -->  00:01:50,190
So inside of indexed.

29

00:01:50,330  -->  00:01:50,870
Yes.

30

00:01:50,910  -->  00:01:52,520
Inside of our app component.

31

00:01:52,620  -->  00:01:55,480
I'm going to add another initialiser to our state.

32

00:01:55,860  -->  00:02:01,980
So since we're doing a multi line here we'll add another property the comma and we're going to call

33

00:02:01,980  -->  00:02:07,380
it a selected video and it's going to start off as null because we don't have a selected video to start

34

00:02:07,380  -->  00:02:09,600
with.

35

00:02:09,630  -->  00:02:15,840
So the next thing we need to do is pass this selected video into the video detail.

36

00:02:15,840  -->  00:02:17,370
So here's our video detail.

37

00:02:17,430  -->  00:02:21,440
And we don't want to pass you know the starting of or the first of you anymore.

38

00:02:21,510  -->  00:02:23,070
Want to pass a very specific one.

39

00:02:23,070  -->  00:02:25,530
We're going to pass in the selected video.

40

00:02:26,070  -->  00:02:29,860
So instead we'll do this selected video.

41

00:02:30,360  -->  00:02:31,030
Oops.

42

00:02:31,320  -->  00:02:34,000
This state does selective video by mistake.

43

00:02:34,080  -->  00:02:35,110
There we go.

44

00:02:35,700  -->  00:02:36,570
OK.

45

00:02:36,570  -->  00:02:40,160
So let's save this and refresh our browser and see where we're at.

46

00:02:40,470  -->  00:02:44,400
So going refresh and we're stuck on loading.

47

00:02:44,670  -->  00:02:44,940
All right.

48

00:02:44,940  -->  00:02:46,740
Well you know that kind of makes sense.

49

00:02:46,950  -->  00:02:49,220
We're not changing the state of selected video yet.

50

00:02:49,230  -->  00:02:50,700
It's always set to No.

51

00:02:50,880  -->  00:02:56,900
So in video detail we always catch the loading case and always says oh you know I wasn't given a video

52

00:02:56,900  -->  00:02:57,300
video.

53

00:02:57,300  -->  00:02:57,780
No.

54

00:02:57,930  -->  00:03:01,540
So I'm just going to show loading right now.

55

00:03:03,450  -->  00:03:10,800
So inside of our search call back in our constructor instead of instead of only setting the list of

56

00:03:10,800  -->  00:03:11,840
videos.

57

00:03:11,970  -->  00:03:15,860
Now also set an initial video.

58

00:03:16,110  -->  00:03:21,510
So we're going to break this back out into the long form syntax instead of doing the shortened form

59

00:03:21,510  -->  00:03:21,710
here.

60

00:03:21,720  -->  00:03:24,670
So do videos videos.

61

00:03:24,780  -->  00:03:33,120
Let's also do this on a new line like so we'll add a comma and we'll say that when this very first you

62

00:03:33,120  -->  00:03:40,080
know initial search takes off and it returns and comes back we want these selected video to be videos

63

00:03:40,140  -->  00:03:41,210
at zero.

64

00:03:41,670  -->  00:03:45,990
So at the end of the day yes we're going to play the first video and the search result.

65

00:03:45,990  -->  00:03:53,630
So let's go through the flow again at boot up videos is an empty array in our selected video is null

66

00:03:53,650  -->  00:03:54,280
.

67

00:03:55,140  -->  00:04:03,900
We go into video detail video detail isn't provided a video so it's going to show the loading spinner

68

00:04:03,990  -->  00:04:10,830
or you know not a spinner but the loading message at the same time we kick off our requests to go grab

69

00:04:10,860  -->  00:04:12,450
a list of videos.

70

00:04:12,990  -->  00:04:19,850
When that request is completed we'll pass the list of videos onto this state of videos.

71

00:04:19,950  -->  00:04:25,480
And the first video on that list will be set to the selected video.

72

00:04:26,220  -->  00:04:32,910
Since we're setting state here it causes our component to re render which means video detail is going

73

00:04:32,910  -->  00:04:39,150
to be rendered again with this dot state DOT selected video which is now equal to the first video which

74

00:04:39,150  -->  00:04:42,880
means it's going to actually end up with a valid real video.

75

00:04:42,900  -->  00:04:47,010
So let's go ahead and save this and give it a shot in the browser.

76

00:04:47,550  -->  00:04:48,680
So I'm back over here.

77

00:04:48,690  -->  00:04:53,290
Let's refresh it and all right we're back to getting our first video in here.

78

00:04:53,310  -->  00:04:55,010
Looks good.

79

00:04:56,140  -->  00:04:58,460
OK this is good.

80

00:04:58,620  -->  00:05:06,080
Let's move on to Step Two So Step two is to implement our callback so this callback is going to be a

81

00:05:06,080  -->  00:05:14,290
function that we're going to pass from app to video list.

82

00:05:14,810  -->  00:05:17,700
And finally into video list item.

83

00:05:18,080  -->  00:05:18,580
OK.

84

00:05:18,710  -->  00:05:23,000
So this is going to be a little bit confusing to run through the first time.

85

00:05:23,000  -->  00:05:23,900
Bear with me.

86

00:05:23,900  -->  00:05:26,490
We're going to go through the process make sure that's nice and clear.

87

00:05:26,480  -->  00:05:27,420
OK.

88

00:05:28,310  -->  00:05:30,670
So here's what we're going to do.

89

00:05:30,710  -->  00:05:36,290
We're going to pass another function to video list.

90

00:05:37,400  -->  00:05:44,480
And we're going to call it on video select this function is going to take

91

00:05:47,390  -->  00:05:53,760
just a video and it's going to set this set straight.

92

00:05:54,920  -->  00:05:56,810
Let's actually do let's call this argument right here.

93

00:05:56,810  -->  00:05:58,200
Selected video.

94

00:05:58,310  -->  00:06:04,220
And then we can use the abbreviated syntax selected video like so.

95

00:06:04,580  -->  00:06:06,110
All right.

96

00:06:06,120  -->  00:06:13,790
So we just to find the function and all it does is it takes a video and it defines it on apps state

97

00:06:14,060  -->  00:06:16,220
it updates app state with the new video.

98

00:06:16,460  -->  00:06:23,130
So if video list calls this function with a video the selected video an app is going to update.

99

00:06:23,300  -->  00:06:25,930
So this is kind of like a real jump in logic here.

100

00:06:25,940  -->  00:06:26,230
Right.

101

00:06:26,250  -->  00:06:30,360
We're kind of passing a function that manipulates another component.

102

00:06:30,410  -->  00:06:31,730
Kind of confusing.

103

00:06:31,740  -->  00:06:33,610
And I totally agree with you.

104

00:06:34,040  -->  00:06:36,780
Let's keep passing this function all the way through.

105

00:06:36,950  -->  00:06:37,550
Let's watch it.

106

00:06:37,550  -->  00:06:41,590
You know inmotion Let's see it actually work and then we can do an entire run through.

107

00:06:41,660  -->  00:06:44,810
And I think they'll start to make a little bit more sense.

108

00:06:44,880  -->  00:06:48,870
So remember we're passing this as a property to video list.

109

00:06:48,990  -->  00:07:00,750
So that means that video list now has a property on prop's called prop's dots on video select.

110

00:07:00,750  -->  00:07:05,430
So we're going to pass another property to video list item.

111

00:07:05,460  -->  00:07:09,510
Let's break this into a multi-line statement here

112

00:07:14,780  -->  00:07:15,820
like so.

113

00:07:16,160  -->  00:07:17,080
OK.

114

00:07:18,000  -->  00:07:22,830
So now we're going to pass this call the callback that's inside of prop's we're going to pass into now

115

00:07:22,830  -->  00:07:23,820
a video list item.

116

00:07:23,840  -->  00:07:24,950
Each one of them.

117

00:07:24,990  -->  00:07:28,250
So it's going to be on video.

118

00:07:28,400  -->  00:07:41,350
Click equals prop's dot on video click see me on video select my mistake.

119

00:07:41,570  -->  00:07:47,180
So all we're doing is we're taking the prop that's coming from app and we're passing it down into video

120

00:07:47,180  -->  00:07:48,680
list item.

121

00:07:49,340  -->  00:08:00,510
So now video this item has access to a property called on video select.

122

00:08:00,830  -->  00:08:03,370
And this is a nice Another little trick from iOS.

123

00:08:03,380  -->  00:08:07,970
You know if you want to pull multiple properties off of the prop's object we can just use the curly

124

00:08:07,970  -->  00:08:10,120
braces and separated with a comma.

125

00:08:10,340  -->  00:08:16,480
This is totally identical to saying Konst video equals Propst out video.

126

00:08:16,580  -->  00:08:23,410
And Konst on videos select equals props on video select.

127

00:08:23,650  -->  00:08:30,240
OK so now we've got our callback all the way down here all the way down inside a video list item.

128

00:08:30,360  -->  00:08:34,470
So we need to actually make use of this thing make use of this callback.

129

00:08:34,550  -->  00:08:39,330
So whenever a user clicks on this entire element in this entire lie we're going to treat that as a video

130

00:08:39,330  -->  00:08:40,220
selection.

131

00:08:40,520  -->  00:08:45,160
So I will say whenever a user clicks on the fly that means you know we need an event here.

132

00:08:45,170  -->  00:08:49,740
So we'll do all unclick and we'll pass it a function.

133

00:08:50,490  -->  00:09:00,680
So whenever a user clicks on the fly we'll call on video select and we'll pass it.

134

00:09:01,130  -->  00:09:04,510
This particular video list items video.

135

00:09:05,380  -->  00:09:06,010
OK.

136

00:09:06,090  -->  00:09:08,070
So again probably so kind of confusing.

137

00:09:08,210  -->  00:09:09,190
Let's save this.

138

00:09:09,240  -->  00:09:11,800
Give it a shot.

139

00:09:13,500  -->  00:09:15,910
I'm going to try clicking on this one.

140

00:09:16,040  -->  00:09:18,080
And hot dog it updated.

141

00:09:18,260  -->  00:09:20,170
So I got Joel Fitzgerald.

142

00:09:20,580  -->  00:09:25,630
Let's click on the science of surfboards and we get the science of surfboards.

143

00:09:25,860  -->  00:09:28,840
So looks like we're correctly getting all of our updates in here.

144

00:09:29,030  -->  00:09:32,560
Top five electric surfboards this one actually looks cool I might watch this one.

145

00:09:33,140  -->  00:09:34,080
OK.

146

00:09:34,250  -->  00:09:36,560
So it looks like it's working but how in the world is it working.

147

00:09:36,570  -->  00:09:39,350
Let's do another run through here.

148

00:09:39,530  -->  00:09:43,220
I'm back up in at our top level component.

149

00:09:43,280  -->  00:09:46,040
We defined a function here that has one purpose.

150

00:09:46,040  -->  00:09:48,680
It just updates at state.

151

00:09:48,810  -->  00:09:52,560
It takes a video and it updates the selected video.

152

00:09:52,790  -->  00:10:01,700
We pass this as a property into video list video list takes that property and it passes it into video

153

00:10:01,700  -->  00:10:10,940
list item video that item takes that property and says whenever I get clicked call that function with

154

00:10:10,940  -->  00:10:15,340
the video that I was passed and since each video list item has a different video.

155

00:10:15,530  -->  00:10:16,940
Well you get the idea.

156

00:10:16,940  -->  00:10:18,770
It ends up with the correct video.

157

00:10:19,340  -->  00:10:20,670
OK.

158

00:10:21,250  -->  00:10:26,270
Doing callbacks like this you know passing callbacks down from some parent component to some more child

159

00:10:26,270  -->  00:10:31,750
component is kind of a rare thing to go more than two levels deep.

160

00:10:31,750  -->  00:10:33,590
So let me take that back it's not a rare thing.

161

00:10:33,710  -->  00:10:35,870
It's rare to have it go more than two levels deep.

162

00:10:36,200  -->  00:10:41,490
As you can see here he went from app to video list to video list item passing callbacks like this is

163

00:10:41,480  -->  00:10:47,610
a great way to do you know small communication between a parent component and a child component passing

164

00:10:47,610  -->  00:10:49,930
it all the way from index to video list item.

165

00:10:49,940  -->  00:10:54,110
We're kind of right there on the border of where it starts to get a little bit confusing to someone

166

00:10:54,120  -->  00:10:56,240
who comes into this project later on.

167

00:10:56,420  -->  00:11:02,130
You know they might see on video select here and they're thinking themselves like why wait a minute

168

00:11:02,120  -->  00:11:03,050
what's this function do.

169

00:11:03,070  -->  00:11:07,650
What happens when it gets called and they really have to do kind of a treasure hunt to figure out where

170

00:11:07,640  -->  00:11:08,690
that function is coming from.

171

00:11:08,690  -->  00:11:08,930
Right.

172

00:11:08,930  -->  00:11:16,220
They have to first find video list item and then they say OK index's rendering video list item and oh

173

00:11:16,280  -->  00:11:17,730
ok here's the function.

174

00:11:18,000  -->  00:11:21,890
So in general any more than kind of you know these two jumps that we're doing right here is a little

175

00:11:21,890  -->  00:11:22,640
bit of a stretch.

176

00:11:22,640  -->  00:11:26,620
You might want to think about a different approach for this example.

177

00:11:26,720  -->  00:11:30,160
I really want to give you an example where you kind of push the limit.

178

00:11:30,170  -->  00:11:34,010
You know do a little bit of a stretch on passing down callbacks So I think this is a pretty appropriate

179

00:11:34,010  -->  00:11:35,060
example here.

180

00:11:35,370  -->  00:11:35,800
OK.

181

00:11:35,820  -->  00:11:37,210
So we can now select a video.

182

00:11:37,320  -->  00:11:39,400
Let's continue on in the next section.