1
00:00:00,730 --> 00:00:04,240
In this section we're going to start to fix up a couple of loose ends or end our application.

2
00:00:04,360 --> 00:00:06,180
First things first inside of our terminal.

3
00:00:06,190 --> 00:00:11,030
We've got two distinct warnings and one error message that is displaying as a warning as well.

4
00:00:11,260 --> 00:00:15,480
So we need to make sure that our I-frame element has a title assigned to it.

5
00:00:15,520 --> 00:00:20,290
We need to make sure that our image elements for each of these thumbnails right here have an appropriate

6
00:00:20,350 --> 00:00:25,390
Allt property and we need to make sure that our list of records has a key prop assigned to each one

7
00:00:25,390 --> 00:00:25,970
as well.

8
00:00:26,080 --> 00:00:27,110
So let's get to it.

9
00:00:27,280 --> 00:00:30,740
Well first start off with our I-frame inside the video detail.

10
00:00:30,970 --> 00:00:35,710
So on my I-frame right here I'm going to make sure that this thing has a title and I'll give it a very

11
00:00:35,710 --> 00:00:40,680
simple title like video player by then flip back over.

12
00:00:40,680 --> 00:00:42,300
Looks like that warning went away.

13
00:00:42,300 --> 00:00:47,820
So next up I'll find my video item component I want to make sure that the images inside there have a

14
00:00:48,090 --> 00:00:57,240
property so inside of my video item I'll find the image property or the image tag and I'm going to make

15
00:00:57,240 --> 00:01:00,040
sure that it has an alt assigned to it.

16
00:01:00,060 --> 00:01:06,390
Now for the Allt we can just reuse the same title as the stand in for the image member.

17
00:01:06,390 --> 00:01:11,100
The altar is only going to be shown if the image fails to load up which is usually not going to happen

18
00:01:11,130 --> 00:01:12,030
on YouTube.

19
00:01:12,090 --> 00:01:16,650
The other use for it is anytime someone with disability issues is trying to use our application.

20
00:01:17,000 --> 00:01:23,430
So I'll put in a video snippet title and now and I saved this is going to be reformatted to a multi-line

21
00:01:23,520 --> 00:01:24,800
tag like so.

22
00:01:26,840 --> 00:01:30,060
So now if I flip back over cool both messages are now gone.

23
00:01:30,240 --> 00:01:36,390
Now I'll do a search for say buildings and we've now got that error or warning around the fact that

24
00:01:36,390 --> 00:01:38,920
we don't have a key prop inside of our list.

25
00:01:39,240 --> 00:01:45,440
So for that I'll go over to my video list as we render each individual video item.

26
00:01:45,470 --> 00:01:50,540
So these video Aitan components need to be given a key property that is going to be used internally

27
00:01:50,540 --> 00:01:54,470
by react to make sure that it efficiently renders our list over time.

28
00:01:55,320 --> 00:01:59,710
So inside of your all get this thing a key prop as a key.

29
00:01:59,730 --> 00:02:09,690
I'm going to give it each individual videos ID so I'll say video ID DOT video Id like so and remember

30
00:02:09,690 --> 00:02:10,890
it is a lower case D.

31
00:02:10,930 --> 00:02:13,670
It has not kept a lowercase like so.

32
00:02:14,010 --> 00:02:17,700
And then when I save it's going to again reformat it into a multi-line tag.

33
00:02:19,450 --> 00:02:20,140
All right.

34
00:02:20,140 --> 00:02:25,700
Let's try doing another search back over here and now I don't have any warnings going on whatsoever.

35
00:02:25,990 --> 00:02:30,910
Now if I click on one of those images I start to get the same ads I had before which is totally fine.

36
00:02:30,910 --> 00:02:37,880
Again these are probably because of running a ad blocker on your machine or something similar to that.

37
00:02:37,900 --> 00:02:38,140
All right.

38
00:02:38,170 --> 00:02:39,360
That's a pretty good improvement.

39
00:02:39,500 --> 00:02:44,770
So now the next we need to do is make sure that the video list down here shows up to the right hand

40
00:02:44,770 --> 00:02:49,560
side of our video if we're going to make sure that it matches our original mockup.

41
00:02:49,620 --> 00:02:54,070
So for that we're going to add in a tiny bit of styling to our app component.

42
00:02:54,460 --> 00:02:55,960
Here's the app right here.

43
00:02:55,960 --> 00:03:02,230
So essentially what we want to do is use a grid system with semantic UI to make sure that the video

44
00:03:02,230 --> 00:03:05,700
detail and list lay themselves out next to each other.

45
00:03:05,710 --> 00:03:10,660
Now the grid system that we're going to use here is not the same CSSA grid system that we used in the

46
00:03:10,660 --> 00:03:12,070
previous application.

47
00:03:12,070 --> 00:03:16,230
In this case we're going to use semantic uys built in grid system.

48
00:03:16,360 --> 00:03:25,340
If you pull open the semantic UI documentation you can go to collections right here and find grid.

49
00:03:25,360 --> 00:03:29,590
So again different system from the CSA script that we use in the last application.

50
00:03:29,620 --> 00:03:35,710
Essentially all we have to do here is add on a div with a class of UI grid and then we can specify some

51
00:03:35,710 --> 00:03:41,080
columns to essentially lay out our video detail in our video list right next to each other.

52
00:03:41,110 --> 00:03:42,190
This won't be that bad.

53
00:03:42,200 --> 00:03:45,880
What we do is add in a couple of elements to our app component.

54
00:03:45,880 --> 00:03:52,320
So I'm going to first begin by finding my video detail and video list.

55
00:03:52,720 --> 00:03:55,240
I'm going to wrap both of those inside of a div

56
00:03:59,910 --> 00:04:10,500
I'm going to give that div a class name of what does this thing need this thing needs a UI grid.

57
00:04:10,640 --> 00:04:13,100
And then inside there are going to place another div

58
00:04:17,580 --> 00:04:20,750
with the class name of UI row.

59
00:04:21,240 --> 00:04:25,800
Now I know that you did not see I wrote in the example we were just looking at back over here and this

60
00:04:25,800 --> 00:04:27,430
is not a complete example.

61
00:04:27,570 --> 00:04:32,610
Essentially whenever we are using this grid we can place a div with the grid and then anything that

62
00:04:32,610 --> 00:04:36,930
we put inside of a single row will be attempted to be rendered on the same line.

63
00:04:36,930 --> 00:04:41,670
If we don't put this row inside of your then in some scenarios the video detail and the video list might

64
00:04:41,670 --> 00:04:46,540
try to render themselves on different lines or essentially different roads.

65
00:04:46,540 --> 00:04:52,700
All right so now the next thing we'll do is wrap both the video detail and a video list in their own

66
00:04:52,700 --> 00:04:54,240
individual device.

67
00:04:54,250 --> 00:04:58,850
And so this is what is going to form the two separate columns that are going to get the video list and

68
00:04:58,850 --> 00:05:01,350
the video detail to show themselves next to each other.

69
00:05:02,150 --> 00:05:10,450
On the day that wraps the video detail I'm going to give it a class name of 11 wide column so that essentially

70
00:05:10,450 --> 00:05:16,750
means use 11 out of the default 16 columns to show the video detail and then on the day for the video

71
00:05:16,750 --> 00:05:23,420
list I'll give it a class name of five wide column and in a very similar manner.

72
00:05:23,420 --> 00:05:30,170
The five here means you use 5 out of the 16 default available columns to render the video list.

73
00:05:30,180 --> 00:05:30,400
All right.

74
00:05:30,390 --> 00:05:35,240
So let's now save this all flip back over.

75
00:05:35,290 --> 00:05:38,860
I'll do a quick search for my favorite term I guess buildings.

76
00:05:38,870 --> 00:05:43,700
And now if I click on one of these things will see that we get this really nice layout where the video

77
00:05:43,700 --> 00:05:46,160
list is right next to the detail.

78
00:05:46,160 --> 00:05:49,100
All right so that's a big improvement on styling.

79
00:05:49,100 --> 00:05:53,780
Now let's see one mention here is that when a user first visits our application we are still getting

80
00:05:53,780 --> 00:05:57,920
that kind of annoying loading message right there which isn't really appropriate because it doesn't

81
00:05:57,920 --> 00:06:01,120
really tell the user what they should or shouldn't be doing.

82
00:06:01,460 --> 00:06:06,450
So I think that we need to maybe have a default search term inside of our app.

83
00:06:06,470 --> 00:06:12,080
In other words when the user first floats the application maybe we should search for some term by default

84
00:06:12,080 --> 00:06:17,960
like the buildings or children's stories or whatever it is we want to search for.

85
00:06:18,030 --> 00:06:22,190
Remember the other thing inside of your That's kind of awkward is that when we search for a new term

86
00:06:22,970 --> 00:06:29,180
like if I go from children's stories to buildings the list over here updates but I still see the old

87
00:06:29,270 --> 00:06:30,780
children's stories video.

88
00:06:30,800 --> 00:06:33,520
You're in the detail which is also a little bit awkward.

89
00:06:33,740 --> 00:06:37,750
So let's think about these two problems and figure out how we can solve them in the next video.