In the last section we went ahead and added a check to make sure that we had a loaded video before we 2
tried to show the video detail. 3
And you could see I'm refreshing here. 4
You can see the loading text on the top left. 5
Very briefly we cut that case because we check for the existence of a video property before rendering 6
the component. 7
If the video wasn't provided then we just showed a quick Ajax spinner. 8
Now this isn't really a check. 9
We want to add to every single component. 10
Just we really need it. 11
I mean imagine if someone was loading a page and they saw like 10 spinners pop up right. 12
Something you want to do very rarely. 13
In general it's safest to locate an AJAX spinner on a fairly high level or you know parent level component 14
. 15
So we can show a single video but we really want to give the user the ability to click on another video 16
and see it pop up on the screen. 17
So here's the plan. 18
We'll add the concept of a selected video to the app components state. 19
So I'm inside of an here and I want to add the concept of a selected video the selected video will be 20
a video object and it will be always passed into video detail. 21
So instead of passing in this state video is at zero we can just pass in this state that selected video 22
to update the selected video will pass a callback from app into video list. 23
And then from video list into video list item whenever the video list item is clicked it will run the 24
callback with a video that belongs to it. 25
So that's pretty confusing just to say you know even think about. 26
Let's go ahead and give us a shot and see how we do. 27
The first thing they will do is add the concept of the selected video. 28
So inside of indexed. 29
Yes. 30
Inside of our app component. 31
I'm going to add another initialiser to our state. 32
So since we're doing a multi line here we'll add another property the comma and we're going to call 33
it a selected video and it's going to start off as null because we don't have a selected video to start 34
with. 35
So the next thing we need to do is pass this selected video into the video detail. 36
So here's our video detail. 37
And we don't want to pass you know the starting of or the first of you anymore. 38
Want to pass a very specific one. 39
We're going to pass in the selected video. 40
So instead we'll do this selected video. 41
Oops. 42
This state does selective video by mistake. 43
There we go. 44
OK. 45
So let's save this and refresh our browser and see where we're at. 46
So going refresh and we're stuck on loading. 47
All right. 48
Well you know that kind of makes sense. 49
We're not changing the state of selected video yet. 50
It's always set to No. 51
So in video detail we always catch the loading case and always says oh you know I wasn't given a video 52
video. 53
No. 54
So I'm just going to show loading right now. 55
So inside of our search call back in our constructor instead of instead of only setting the list of 56
videos. 57
Now also set an initial video. 58
So we're going to break this back out into the long form syntax instead of doing the shortened form 59
here. 60
So do videos videos. 61
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
know initial search takes off and it returns and comes back we want these selected video to be videos 63
at zero. 64
So at the end of the day yes we're going to play the first video and the search result. 65
So let's go through the flow again at boot up videos is an empty array in our selected video is null 66
. 67
We go into video detail video detail isn't provided a video so it's going to show the loading spinner 68
or you know not a spinner but the loading message at the same time we kick off our requests to go grab 69
a list of videos. 70
When that request is completed we'll pass the list of videos onto this state of videos. 71
And the first video on that list will be set to the selected video. 72
Since we're setting state here it causes our component to re render which means video detail is going 73
to be rendered again with this dot state DOT selected video which is now equal to the first video which 74
means it's going to actually end up with a valid real video. 75
So let's go ahead and save this and give it a shot in the browser. 76
So I'm back over here. 77
Let's refresh it and all right we're back to getting our first video in here. 78
Looks good. 79
OK this is good. 80
Let's move on to Step Two So Step two is to implement our callback so this callback is going to be a 81
function that we're going to pass from app to video list. 82
And finally into video list item. 83
OK. 84
So this is going to be a little bit confusing to run through the first time. 85
Bear with me. 86
We're going to go through the process make sure that's nice and clear. 87
OK. 88
So here's what we're going to do. 89
We're going to pass another function to video list. 90
And we're going to call it on video select this function is going to take 91
just a video and it's going to set this set straight. 92
Let's actually do let's call this argument right here. 93
Selected video. 94
And then we can use the abbreviated syntax selected video like so. 95
All right. 96
So we just to find the function and all it does is it takes a video and it defines it on apps state 97
it updates app state with the new video. 98
So if video list calls this function with a video the selected video an app is going to update. 99
So this is kind of like a real jump in logic here. 100
Right. 101
We're kind of passing a function that manipulates another component. 102
Kind of confusing. 103
And I totally agree with you. 104
Let's keep passing this function all the way through. 105
Let's watch it. 106
You know inmotion Let's see it actually work and then we can do an entire run through. 107
And I think they'll start to make a little bit more sense. 108
So remember we're passing this as a property to video list. 109
So that means that video list now has a property on prop's called prop's dots on video select. 110
So we're going to pass another property to video list item. 111
Let's break this into a multi-line statement here 112
like so. 113
OK. 114
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
a video list item. 116
Each one of them. 117
So it's going to be on video. 118
Click equals prop's dot on video click see me on video select my mistake. 119
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
list item. 121
So now video this item has access to a property called on video select. 122
And this is a nice Another little trick from iOS. 123
You know if you want to pull multiple properties off of the prop's object we can just use the curly 124
braces and separated with a comma. 125
This is totally identical to saying Konst video equals Propst out video. 126
And Konst on videos select equals props on video select. 127
OK so now we've got our callback all the way down here all the way down inside a video list item. 128
So we need to actually make use of this thing make use of this callback. 129
So whenever a user clicks on this entire element in this entire lie we're going to treat that as a video 130
selection. 131
So I will say whenever a user clicks on the fly that means you know we need an event here. 132
So we'll do all unclick and we'll pass it a function. 133
So whenever a user clicks on the fly we'll call on video select and we'll pass it. 134
This particular video list items video. 135
OK. 136
So again probably so kind of confusing. 137
Let's save this. 138
Give it a shot. 139
I'm going to try clicking on this one. 140
And hot dog it updated. 141
So I got Joel Fitzgerald. 142
Let's click on the science of surfboards and we get the science of surfboards. 143
So looks like we're correctly getting all of our updates in here. 144
Top five electric surfboards this one actually looks cool I might watch this one. 145
OK. 146
So it looks like it's working but how in the world is it working. 147
Let's do another run through here. 148
I'm back up in at our top level component. 149
We defined a function here that has one purpose. 150
It just updates at state. 151
It takes a video and it updates the selected video. 152
We pass this as a property into video list video list takes that property and it passes it into video 153
list item video that item takes that property and says whenever I get clicked call that function with 154
the video that I was passed and since each video list item has a different video. 155
Well you get the idea. 156
It ends up with the correct video. 157
OK. 158
Doing callbacks like this you know passing callbacks down from some parent component to some more child 159
component is kind of a rare thing to go more than two levels deep. 160
So let me take that back it's not a rare thing. 161
It's rare to have it go more than two levels deep. 162
As you can see here he went from app to video list to video list item passing callbacks like this is 163
a great way to do you know small communication between a parent component and a child component passing 164
it all the way from index to video list item. 165
We're kind of right there on the border of where it starts to get a little bit confusing to someone 166
who comes into this project later on. 167
You know they might see on video select here and they're thinking themselves like why wait a minute 168
what's this function do. 169
What happens when it gets called and they really have to do kind of a treasure hunt to figure out where 170
that function is coming from. 171
Right. 172
They have to first find video list item and then they say OK index's rendering video list item and oh 173
ok here's the function. 174
So in general any more than kind of you know these two jumps that we're doing right here is a little 175
bit of a stretch. 176
You might want to think about a different approach for this example. 177
I really want to give you an example where you kind of push the limit. 178
You know do a little bit of a stretch on passing down callbacks So I think this is a pretty appropriate 179
example here. 180
OK. 181
So we can now select a video. 182
Let's continue on in the next section.