1 00:00:01,620 --> 00:00:06,990 In the last section where you've successfully executed a youtube search by using our API key and the 2 00:00:06,990 --> 00:00:09,120 search term surfboards. 3 00:00:09,720 --> 00:00:15,810 So let's continue in this section by doing a pretty close examination of our app component right. 4 00:00:16,030 --> 00:00:17,540 Here we go any farther. 5 00:00:17,580 --> 00:00:21,150 I'm going to clean up the components in here just to clean things up a little bit. 6 00:00:21,150 --> 00:00:23,980 You can certainly leave the comments if you want to. 7 00:00:24,000 --> 00:00:27,770 Animals are going to condense everything in here. 8 00:00:27,890 --> 00:00:28,280 OK. 9 00:00:28,320 --> 00:00:30,010 Looks a little bit better now. 10 00:00:30,740 --> 00:00:31,220 OK. 11 00:00:31,230 --> 00:00:37,440 In this section we're going to start by refactoring the app component from a functional component to 12 00:00:37,440 --> 00:00:39,330 a class based component. 13 00:00:39,360 --> 00:00:45,370 We're going to do this to make sure that the app can keep track of the list of videos where it's going 14 00:00:45,370 --> 00:00:48,800 to keep track of the list of videos by recording them on its state. 15 00:00:48,900 --> 00:00:53,370 So remember whenever we start to use state we want to be able to where we need to have a class based 16 00:00:53,370 --> 00:00:58,440 component and we want to state here because this is some amount of data that's going to change over 17 00:00:58,440 --> 00:01:02,050 time and we want it to persist throughout the application. 18 00:01:02,170 --> 00:01:03,920 You know it's lifecycle. 19 00:01:04,570 --> 00:01:05,000 OK. 20 00:01:05,010 --> 00:01:10,530 So we'll go ahead and get started and this refactoring process is going to probably very quickly you're 21 00:01:10,530 --> 00:01:11,810 gonna get used to it very quickly. 22 00:01:11,820 --> 00:01:17,970 So at the very top we first need to import the component object so we can extend from it. 23 00:01:18,030 --> 00:01:23,350 So we'll add component like so next. 24 00:01:23,370 --> 00:01:35,640 Instead of defining a concept we'll define a class and it's going to extend component and then we're 25 00:01:35,640 --> 00:01:39,570 going to add a render method. 26 00:01:41,910 --> 00:01:46,960 So we'll do it in there and close the curly braces like so. 27 00:01:47,500 --> 00:01:48,050 OK. 28 00:01:48,360 --> 00:01:50,720 So this is looking pretty good. 29 00:01:50,790 --> 00:01:55,080 This shouldn't break going from a functional component to class based components can break anything 30 00:01:55,080 --> 00:01:55,110 . 31 00:01:55,110 --> 00:02:01,550 So I want to save this and let's do a quick refresh and it looks like I did make a mistake. 32 00:02:02,310 --> 00:02:05,200 Let's see if we can't find what it is. 33 00:02:05,280 --> 00:02:08,120 Looks like I used extend instead of extents. 34 00:02:08,220 --> 00:02:12,930 If you ever make a syntax error by the way you can check the NPM start process and they'll give you 35 00:02:12,930 --> 00:02:18,230 a very you know nicely formatted indication of exactly what went wrong. 36 00:02:18,600 --> 00:02:21,070 So all right extends like so 37 00:02:24,150 --> 00:02:25,390 and we're good to go. 38 00:02:25,530 --> 00:02:28,960 Here's my input and I solved my counsel log for the videos. 39 00:02:29,310 --> 00:02:30,520 OK. 40 00:02:31,290 --> 00:02:32,730 So it looks good. 41 00:02:33,270 --> 00:02:36,710 So our list of videos is going to be changing over time. 42 00:02:36,900 --> 00:02:38,990 You know right now it's a list of five videos. 43 00:02:39,000 --> 00:02:41,080 But as people search for data. 44 00:02:41,290 --> 00:02:45,990 Or you know as the user type stuff in the search you want to update it with the new list of five videos 45 00:02:46,000 --> 00:02:46,190 . 46 00:02:46,350 --> 00:02:48,410 So data changing over time. 47 00:02:48,450 --> 00:02:50,420 Well sounds like a great use for state. 48 00:02:50,520 --> 00:02:52,250 Right. 49 00:02:52,350 --> 00:02:58,620 So whenever a user enters some new search input we need to conduct a new search and set the results 50 00:02:58,620 --> 00:03:01,430 of that search on state. 51 00:03:02,610 --> 00:03:09,300 So that means that we're going need to set up our constructor function blad new line in here is call 52 00:03:09,310 --> 00:03:13,710 a constructor constructor always gets called with props. 53 00:03:13,710 --> 00:03:20,300 And we'll talk more about props here very shortly and then we'll call super with props like so and then 54 00:03:20,300 --> 00:03:22,490 we're going to default our state here. 55 00:03:22,680 --> 00:03:26,540 So we'll say this state equals an empty object. 56 00:03:26,940 --> 00:03:32,480 So less time the way you state it was in the search bar and the property we used the name was turn. 57 00:03:33,010 --> 00:03:38,280 That really you know was supposed to represent search term the property name of state here you know 58 00:03:38,280 --> 00:03:40,890 whatever property name we use here is totally up to us. 59 00:03:40,910 --> 00:03:45,950 But in general we want to have it you know be something that really makes sense in this case. 60 00:03:46,020 --> 00:03:51,540 I think that calling it videos will probably make sense and it's going to be an array because it's going 61 00:03:51,540 --> 00:03:55,370 to contain a list of videos a list of objects. 62 00:03:56,340 --> 00:04:03,070 So now whenever our first pops up we don't really want to have a toy into list here right. 63 00:04:03,090 --> 00:04:08,790 It'd be great if the user could really see some data pop up right away. 64 00:04:10,080 --> 00:04:14,700 So to do that we're going to move this search function right here into the constructor 65 00:04:20,970 --> 00:04:25,220 and then we're going to kill some new lines there like so. 66 00:04:26,010 --> 00:04:26,730 OK. 67 00:04:26,730 --> 00:04:33,030 So now whenever the app first boots up and we get an instance of app on the screen the constructor will 68 00:04:33,030 --> 00:04:39,090 run right away you know because we make a new instance of app and that will immediately kick off a search 69 00:04:41,830 --> 00:04:49,380 with the term surfboards then the function the callback function data will be called with the list of 70 00:04:49,380 --> 00:04:50,610 videos. 71 00:04:50,610 --> 00:04:54,960 So this right here is the opportunity that we're going to have you this callback function the success 72 00:04:54,960 --> 00:05:00,460 rate here is our opportunity to update this state with the new list of videos. 73 00:05:00,630 --> 00:05:12,430 So we'll call this set States videos as data cool. 74 00:05:12,630 --> 00:05:13,860 This is looking pretty good right now. 75 00:05:13,890 --> 00:05:18,460 But let's make one more small refactor instead of using the function key word here. 76 00:05:18,460 --> 00:05:24,540 And you know flip it out to a fat arrow function instead song and delete the function key word and we'll 77 00:05:24,540 --> 00:05:26,810 just use the fat arrow instead. 78 00:05:27,600 --> 00:05:30,320 Besides that no other change. 79 00:05:30,330 --> 00:05:30,780 All right. 80 00:05:30,840 --> 00:05:38,370 So now notice that the object that we're passing to the object is the object we're passing to this starts 81 00:05:38,360 --> 00:05:43,070 set state has a key of videos and the value is data. 82 00:05:43,110 --> 00:05:47,000 And you know we've really got control over the name of that data argument. 83 00:05:47,010 --> 00:05:48,510 You know this doesn't need to be data. 84 00:05:48,510 --> 00:05:53,100 It can also be like foo or oranges. 85 00:05:53,280 --> 00:05:55,480 Right. 86 00:05:55,500 --> 00:06:02,340 We could also make it videos which really makes a lot of sense because it is an array of videos right 87 00:06:02,340 --> 00:06:03,110 . 88 00:06:03,120 --> 00:06:11,250 So when we have a objects like this where the key and the value are identical terms we can make use 89 00:06:11,250 --> 00:06:18,730 of a nice little bit of six syntax to compact this line even more whenever we have a key and a value 90 00:06:19,320 --> 00:06:22,100 where it's the same exact string. 91 00:06:22,110 --> 00:06:26,590 We can actually condense this to just be curly braces. 92 00:06:26,760 --> 00:06:35,010 And then the name of the variable when we're using ES6 this will get resolved as this Dotts set state 93 00:06:37,720 --> 00:06:39,870 videos videos. 94 00:06:40,200 --> 00:06:44,880 Again this is just something that we do a little bit of syntactic sugar just to clean up our code a 95 00:06:44,880 --> 00:06:53,830 little bit and it only works when the key in the property are the same variable name. 96 00:06:54,090 --> 00:06:58,940 You'll see this advanced syntax like this very frequently an example re-act apps. 97 00:06:58,950 --> 00:07:02,730 You'll see stuff like this all the time so you know in general it might seem kind of confusing right 98 00:07:02,730 --> 00:07:04,620 now but I highly recommend you start. 99 00:07:04,650 --> 00:07:07,640 You know you try to at least give it a chance try to get used to it a little bit. 100 00:07:07,680 --> 00:07:09,780 You'll really clean up your code in the long run. 101 00:07:10,350 --> 00:07:11,110 OK. 102 00:07:11,400 --> 00:07:13,310 So our app is looking pretty good now. 103 00:07:13,500 --> 00:07:15,820 It's now a class based component. 104 00:07:15,930 --> 00:07:18,630 We define the constructor function. 105 00:07:18,630 --> 00:07:22,780 The list of videos on state sets starts as an empty array. 106 00:07:23,070 --> 00:07:27,870 But the instant that the component is rendered it kicks off a search and when the search is complete 107 00:07:27,930 --> 00:07:30,600 it will update the value of videos. 108 00:07:30,850 --> 00:07:33,870 Does not state that videos with a new list of videos. 109 00:07:34,360 --> 00:07:37,600 OK so we now have access to the videos on state. 110 00:07:37,890 --> 00:07:43,560 Let's continue flushing out the app inside of video detail inside the next section.