1
00:00:01,670 --> 00:00:06,080
In the next few videos, we're going to try to condense down some of the code inside of our app component.

2
00:00:06,480 --> 00:00:09,560
They're going to try to, well, just remove some variables if we can.

3
00:00:09,620 --> 00:00:13,310
We're going to try to extract a couple of variables in two separate helper functions and so on.

4
00:00:13,910 --> 00:00:17,540
The first change we're gonna make around our app component is going to very simple and straightforward

5
00:00:17,540 --> 00:00:18,050
in nature.

6
00:00:18,780 --> 00:00:22,280
I want you to take a look at the on video select function right here.

7
00:00:22,820 --> 00:00:24,230
This is a one line function.

8
00:00:24,410 --> 00:00:28,760
And anytime we have a one line function callback, usually a good sign that we should probably just

9
00:00:28,760 --> 00:00:32,720
try to provide that function in line to whatever prop it is going off to.

10
00:00:33,440 --> 00:00:38,930
In this case, on video, select is being provided to the video list component rather than making a

11
00:00:38,930 --> 00:00:40,880
separate on video select function.

12
00:00:41,240 --> 00:00:45,710
We can probably just define that function or provide it in line right here instead.

13
00:00:46,280 --> 00:00:51,020
And that hopefully will make our overall function component just a little bit easier to read and understand.

14
00:00:52,170 --> 00:00:56,710
I'm going to find video list going to temporarily give myself a little bit of space here.

15
00:00:56,740 --> 00:00:58,780
Just you can read this code very easily.

16
00:01:00,950 --> 00:01:06,210
Rather than providing a separate function, I'm going to provide an in-line function, though.

17
00:01:06,340 --> 00:01:11,420
Recall that on video Select is going to be given a video that the user just clicked on.

18
00:01:12,420 --> 00:01:17,020
And then inside there, we're going to update our set selected video or just selected video piece of

19
00:01:17,020 --> 00:01:17,320
state.

20
00:01:17,380 --> 00:01:21,640
So we will call set selected video and provide that video.

21
00:01:22,680 --> 00:01:25,800
So we can now remove the original function right here.

22
00:01:28,050 --> 00:01:29,060
Okay, that looks good.

23
00:01:30,160 --> 00:01:33,490
Now, when we look at this code right here, I want you to notice the pattern that we have.

24
00:01:34,100 --> 00:01:37,870
We are receiving some list of arguments in this case, just one argument.

25
00:01:38,530 --> 00:01:41,950
We then turn around and provide that exact list of arguments.

26
00:01:42,070 --> 00:01:46,120
Again, in this case, just one argument to the set selected video function.

27
00:01:47,030 --> 00:01:51,230
Anytime you see some code like this where you take one argument and just pass it directly through in

28
00:01:51,230 --> 00:01:57,290
the same order to some other function, that is a sign that we could do a little refactor so we can

29
00:01:57,290 --> 00:02:04,180
technically take this entire function, remove it and just replace it with set selected video.

30
00:02:04,250 --> 00:02:08,950
Like, so this is a hundred percent equivalent to the code we just had a moment ago.

31
00:02:10,170 --> 00:02:11,110
Well, we had a moment ago.

32
00:02:11,710 --> 00:02:16,780
We're just taking one function or one argument and passing it directly through the what is the purpose

33
00:02:16,780 --> 00:02:17,890
of making that erro function?

34
00:02:17,980 --> 00:02:19,300
There is no purpose to it.

35
00:02:19,330 --> 00:02:21,520
We can just provide that selected video.

36
00:02:21,820 --> 00:02:23,500
And it's 100 percent equivalent.

37
00:02:25,520 --> 00:02:29,440
We can out save this and then go back over and test it inside of our browser.

38
00:02:30,600 --> 00:02:31,460
The back over here.

39
00:02:32,000 --> 00:02:33,470
I still see everything up here.

40
00:02:33,500 --> 00:02:34,580
I can click on a video.

41
00:02:35,090 --> 00:02:36,830
It gets selected and I can play it.

42
00:02:37,650 --> 00:02:37,880
All right.

43
00:02:37,940 --> 00:02:39,120
Well, I'd say that looks pretty good.

44
00:02:40,370 --> 00:02:40,530
OK.

45
00:02:40,670 --> 00:02:42,160
That's one little change.

46
00:02:42,580 --> 00:02:45,220
Now, obviously not a big change, but whatever, it's enough.

47
00:02:45,700 --> 00:02:46,690
Let's take a pause here.

48
00:02:46,760 --> 00:02:47,120
Welcome back.

49
00:02:47,170 --> 00:02:52,480
Next video we're going to discuss making a much larger change or much larger refactor to our app components.