1
00:00:00,790 --> 00:00:04,300
Now that we are loading up our list of strings into our application we want to make sure that these

2
00:00:04,300 --> 00:00:06,860
get rendered out by the streamlets component.

3
00:00:06,880 --> 00:00:09,550
Now as a quick reminder here's what our mock up is supposed to look like.

4
00:00:09,550 --> 00:00:14,440
So in essence it's just going to be a pretty simple straightforward list very similar to the list that

5
00:00:14,440 --> 00:00:16,060
we've rendered out throughout this course.

6
00:00:16,060 --> 00:00:19,530
So let's just flip back over to our component and we'll get to work right away.

7
00:00:20,170 --> 00:00:22,390
So I gonna flip back over to a stream list.

8
00:00:22,390 --> 00:00:26,860
The first thing we need to do is to make sure that we get our list of streams available as props inside

9
00:00:26,860 --> 00:00:28,060
of our component.

10
00:00:28,060 --> 00:00:30,740
So I'm going to define a map state to prop's function

11
00:00:34,030 --> 00:00:37,980
underneath our class.

12
00:00:37,990 --> 00:00:42,220
Now this is going to receive our state as the argument and then we're going to return an object that

13
00:00:42,220 --> 00:00:46,290
has a stream's property and this needs to contain all the different streams.

14
00:00:46,510 --> 00:00:48,550
Now here's where things get a little bit interesting.

15
00:00:48,550 --> 00:00:52,330
Remember that our lists of streams is actually stored inside of an object.

16
00:00:52,330 --> 00:00:53,660
It looks like this right here.

17
00:00:53,860 --> 00:00:59,920
So we are probably going to want to map over this list of streams and read out some UL or see me some

18
00:00:59,950 --> 00:01:01,920
apply for each element inside there.

19
00:01:02,350 --> 00:01:07,810
Usually what we do is leave the list of streams in this object form inside of our redux store we'll

20
00:01:07,820 --> 00:01:13,240
leave them in this object form because it makes it really easy to update add and delete records.

21
00:01:13,240 --> 00:01:18,520
But when we eventually take these streams and get them into a component through map state to props usually

22
00:01:18,580 --> 00:01:24,160
we will turn that object into an actual array more similar to how we made use of records or lists of

23
00:01:24,160 --> 00:01:25,030
data previously.

24
00:01:25,120 --> 00:01:29,830
Inside this course the reason that we turn into an array before it gets into our component is just to

25
00:01:29,830 --> 00:01:33,910
make sure that it's really easy to map over and run that map function.

26
00:01:33,910 --> 00:01:39,200
Now of course we can use a mapping function with an object by using load ash but just to keep things

27
00:01:39,200 --> 00:01:44,800
all that easy and not have quite such a big dependency on ASH we usually just turn that thing into an

28
00:01:44,800 --> 00:01:47,680
array before it goes into our component.

29
00:01:47,680 --> 00:01:53,900
So we've got our state argument right here the property on there that we care about is streams so states

30
00:01:53,970 --> 00:01:59,440
streams to get a list of just the streams that if you're inside of an array and not have to worry about

31
00:01:59,440 --> 00:02:07,750
the object nature of the thing we're going to call object values and then pass in state streams like

32
00:02:07,750 --> 00:02:09,030
so.

33
00:02:09,100 --> 00:02:12,270
So object of values is a built in javascript function.

34
00:02:12,310 --> 00:02:15,440
It's going to take an object as an argument.

35
00:02:15,910 --> 00:02:21,190
All the different values inside of that object are going to be pulled out and then inserted into an

36
00:02:21,190 --> 00:02:21,970
array.

37
00:02:21,970 --> 00:02:27,820
So that's exactly what object of values does it just turns all the values inside that object into an

38
00:02:27,880 --> 00:02:29,200
array.

39
00:02:29,200 --> 00:02:33,730
So now inside of our component we're going to have a prop called destock Propst dot streams and that's

40
00:02:33,730 --> 00:02:36,130
going to be an array of all of our different streams.

41
00:02:36,340 --> 00:02:40,920
As a quick test let's just out on a quick console log to our render method and a console log out.

42
00:02:40,930 --> 00:02:44,690
This dock props streams like so.

43
00:02:44,740 --> 00:02:50,400
And now if I flip back over I see the undefined right there you know refresh really quickly.

44
00:02:50,440 --> 00:02:54,020
So I still see undefined which means that I'm probably doing something a little bit off.

45
00:02:54,040 --> 00:02:56,090
Oh I never hooked up map stage props.

46
00:02:56,110 --> 00:02:57,790
Yeah that would do it.

47
00:02:57,790 --> 00:02:58,200
All right.

48
00:02:58,210 --> 00:03:00,220
Let's make sure we pass that in as the first argument.

49
00:03:00,220 --> 00:03:00,950
Really quick.

50
00:03:03,740 --> 00:03:05,940
So I'll pass that into the connect function.

51
00:03:05,940 --> 00:03:07,200
That's much better.

52
00:03:07,200 --> 00:03:12,520
And so now I see the array right here it has two elements inside of it because I have two streams.

53
00:03:12,630 --> 00:03:13,190
All right.

54
00:03:13,300 --> 00:03:14,070
That looks good.

55
00:03:14,160 --> 00:03:17,110
So now we can flip back over to our component.

56
00:03:17,190 --> 00:03:20,360
I'm going to delete that console log and above my render method.

57
00:03:20,370 --> 00:03:24,880
I'm going to define a new method called you guessed it render list.

58
00:03:24,900 --> 00:03:29,430
So the goal of this method is to take that list of streams and just render them out as a list on the

59
00:03:29,430 --> 00:03:30,510
screen.

60
00:03:30,510 --> 00:03:36,110
So inside of your I'm going to return the result of this stop Propp start streams map.

61
00:03:36,620 --> 00:03:43,250
So for each stream we're going to return some amount of GSX I'm going to make a multi-line GSX block

62
00:03:43,260 --> 00:03:51,070
you're going to place a div with the class name of item and will give it a key of stream Dom.

63
00:03:51,100 --> 00:03:51,550
ID

64
00:03:54,650 --> 00:04:01,910
and then inside there I'm going to place an icon with a class name of large middle aligned icon camera

65
00:04:04,280 --> 00:04:06,620
and claps my sidebar so you can see the whole line.

66
00:04:07,910 --> 00:04:12,750
Now that's just going to be a nice icon camera looking thing just a little bit of decoration.

67
00:04:12,760 --> 00:04:19,400
So I'm going to actually do anything for us or then place a div inside there with a class name of content

68
00:04:21,230 --> 00:04:29,460
and inside that div right now I'm just going to print out the stream title and then after that when

69
00:04:29,500 --> 00:04:34,580
we get that closing curly brace I'm going to placing another div with a class name of description.

70
00:04:37,090 --> 00:04:44,440
And for the description we'll print out the streams description property.

71
00:04:44,450 --> 00:04:47,870
Now let's make sure that we eventually call this thing from the render method.

72
00:04:48,050 --> 00:04:54,830
So don't say my render method I'm going to turn this again into a JSM multi-line GSX block and I'll

73
00:04:54,830 --> 00:05:01,320
give this thing a div How about an H to header.

74
00:05:01,630 --> 00:05:10,190
Let's say something like simply streams and then I'm going to place a div with a class name of UI seld

75
00:05:10,610 --> 00:05:11,450
list.

76
00:05:13,520 --> 00:05:16,790
And inside that thing I'm going to call this dot render list

77
00:05:20,090 --> 00:05:20,320
OK.

78
00:05:20,340 --> 00:05:22,860
So a whole bunch of typing here but really nothing new.

79
00:05:22,860 --> 00:05:25,830
We've gone over Lisp building quite a bit inside this course.

80
00:05:25,830 --> 00:05:30,240
I going to save this now and then I'll flip back over to my browser and I'll see my list of streams

81
00:05:30,250 --> 00:05:30,930
appear.

82
00:05:31,170 --> 00:05:32,150
Awesome.

83
00:05:32,220 --> 00:05:35,460
So the icon on there is kind of a nice little touch I guess.

84
00:05:35,490 --> 00:05:37,910
So this definitely looks pretty close to our mockup over here.

85
00:05:37,920 --> 00:05:39,600
Not bad at all.

86
00:05:39,630 --> 00:05:43,350
Now remember we do want to make sure that these streams.

87
00:05:43,350 --> 00:05:48,130
If I was the creator of a stream I want to see a delete and edit button on there as well.

88
00:05:48,330 --> 00:05:54,540
In addition the header right here for the actual stream title should be clickable so that if I click

89
00:05:54,540 --> 00:06:00,220
on that right there I should go to the stream detail page right here at the Sjostrom component.

90
00:06:00,300 --> 00:06:02,580
So you still have a little bit of work to do on this component.

91
00:06:02,610 --> 00:06:05,660
So let's take a quick pause right here and I'll catch you in the next video.