1
00:00:00,720 --> 00:00:02,310
-: Last piece of our testing set up

2
00:00:02,310 --> 00:00:03,990
and our application we have to take care of

3
00:00:03,990 --> 00:00:06,000
is that CommentList Component.

4
00:00:06,000 --> 00:00:07,770
So in this section we're gonna start to

5
00:00:07,770 --> 00:00:09,630
kind of flesh out the comment list,

6
00:00:09,630 --> 00:00:11,700
the actual implementation of it anyways.

7
00:00:11,700 --> 00:00:12,930
And then after we have it working

8
00:00:12,930 --> 00:00:14,850
we'll write some tests around it.

9
00:00:14,850 --> 00:00:17,100
So I'll get started by opening up my code editor

10
00:00:17,100 --> 00:00:20,970
and I'm gonna find my CommentList Component right here.

11
00:00:20,970 --> 00:00:22,530
We're going to refactor this component

12
00:00:22,530 --> 00:00:24,060
from being a functional component

13
00:00:24,060 --> 00:00:26,370
over to a class-based component.

14
00:00:26,370 --> 00:00:28,230
The initial implementation that we're going to do

15
00:00:28,230 --> 00:00:30,600
of this thing, is not really going to require it to

16
00:00:30,600 --> 00:00:33,240
be a class-based component, but we are going to

17
00:00:33,240 --> 00:00:36,870
actually add in one extra feature to this application.

18
00:00:36,870 --> 00:00:38,400
And it's gonna have to make this thing

19
00:00:38,400 --> 00:00:40,140
be a class-based component.

20
00:00:40,140 --> 00:00:43,050
So let's just make it class-based right now.

21
00:00:43,050 --> 00:00:43,950
So I'll get started

22
00:00:43,950 --> 00:00:47,760
by defining a class CommentList

23
00:00:47,760 --> 00:00:49,173
extends Component,

24
00:00:51,420 --> 00:00:55,080
and then we'll get Component at the top of the file as well.

25
00:00:55,080 --> 00:00:58,320
Then inside this thing, I'll define my render method.

26
00:00:58,320 --> 00:01:00,660
We're going to assume that this component

27
00:01:00,660 --> 00:01:04,050
is gonna be passed a list of comments as a prop,

28
00:01:04,050 --> 00:01:05,580
so like an array of comments.

29
00:01:05,580 --> 00:01:07,260
And this component is going to have to

30
00:01:07,260 --> 00:01:09,870
render out each one of those.

31
00:01:09,870 --> 00:01:14,073
So I'm gonna place a return statement here with a div.

32
00:01:14,910 --> 00:01:16,740
And then inside that div, we're gonna make a

33
00:01:16,740 --> 00:01:18,663
helper method called renderComments.

34
00:01:19,560 --> 00:01:20,670
That's gonna be responsible for

35
00:01:20,670 --> 00:01:22,800
taking every comment that's provided

36
00:01:22,800 --> 00:01:27,570
as a prop and generating a li element with it.

37
00:01:27,570 --> 00:01:29,433
So I'm gonna place a ul right here.

38
00:01:32,136 --> 00:01:34,403
And then inside that I'll call this.renderComments.

39
00:01:36,000 --> 00:01:39,210
And then I can define my helper method of

40
00:01:39,210 --> 00:01:41,163
renderComments up here.

41
00:01:42,540 --> 00:01:45,360
So inside this thing we're going to map over our list

42
00:01:45,360 --> 00:01:47,790
of comments that's available on the props object.

43
00:01:47,790 --> 00:01:50,340
And for every comment, we'll just return an li.

44
00:01:50,340 --> 00:01:52,560
Pretty basic list building stuff.

45
00:01:52,560 --> 00:01:57,560
So I will return this.props.comments.map

46
00:01:57,570 --> 00:01:59,073
and for every comment,

47
00:02:00,330 --> 00:02:02,280
we will return

48
00:02:02,280 --> 00:02:03,113
an li

49
00:02:04,680 --> 00:02:08,039
that contains the comment, like so.

50
00:02:08,039 --> 00:02:10,740
So do note that we have the curly braces right here.

51
00:02:10,740 --> 00:02:12,510
And one other thing to keep in mind is,

52
00:02:12,510 --> 00:02:14,640
we do have to add a key prop to the li,

53
00:02:14,640 --> 00:02:16,620
'cause we're building out a list here.

54
00:02:16,620 --> 00:02:17,970
In this case, we're going to assume

55
00:02:17,970 --> 00:02:20,040
that every comment we get is unique.

56
00:02:20,040 --> 00:02:24,633
So we'll just use the comment itself as the key, like so.

57
00:02:26,040 --> 00:02:28,530
Okay, so that looks reasonable, at least for now.

58
00:02:28,530 --> 00:02:30,810
Then at the very bottom of the file, we'll be sure to

59
00:02:30,810 --> 00:02:34,200
export this component but not before we hook the component

60
00:02:34,200 --> 00:02:38,400
up to the redux store by using the connect function.

61
00:02:38,400 --> 00:02:39,990
So let's remember to import that

62
00:02:39,990 --> 00:02:41,340
connect function at the top

63
00:02:43,800 --> 00:02:45,363
from react-redux.

64
00:02:46,380 --> 00:02:47,530
And then at the bottom,

65
00:02:49,380 --> 00:02:52,140
we will export default

66
00:02:52,140 --> 00:02:55,890
our connect function, with our comment list.

67
00:02:55,890 --> 00:02:56,850
And then we need to make sure

68
00:02:56,850 --> 00:02:59,580
that we pass connect a mapStateToProps function,

69
00:02:59,580 --> 00:03:02,520
so that we actually get our list of comments in here.

70
00:03:02,520 --> 00:03:05,643
So let's define mapStateToProps.

71
00:03:08,520 --> 00:03:11,490
We'll receive our state

72
00:03:11,490 --> 00:03:13,110
as an argument to this

73
00:03:13,110 --> 00:03:16,860
and then we can return an object

74
00:03:16,860 --> 00:03:21,750
with comments coming from state.comments, like so.

75
00:03:21,750 --> 00:03:22,830
So quick reminder here.

76
00:03:22,830 --> 00:03:24,570
When we pull off this comments property

77
00:03:24,570 --> 00:03:26,820
from the state object, we're specifically saying

78
00:03:26,820 --> 00:03:29,250
state.comments, because back inside of our

79
00:03:29,250 --> 00:03:32,190
reducers index.js file, we had assigned

80
00:03:32,190 --> 00:03:34,980
that commentsReducer to the comments property.

81
00:03:34,980 --> 00:03:36,690
So that's why we are specifically using

82
00:03:36,690 --> 00:03:38,253
state.comments right here.

83
00:03:39,150 --> 00:03:43,110
So this object is gonna show up as props to our component

84
00:03:43,110 --> 00:03:45,540
of CommentList, which is why we are able to

85
00:03:45,540 --> 00:03:48,003
reference this.props.comments right here.

86
00:03:49,350 --> 00:03:51,330
All right, so I think the last thing we have to do,

87
00:03:51,330 --> 00:03:53,640
is to make sure we pass mapStateToProps

88
00:03:53,640 --> 00:03:55,200
to the connect function.

89
00:03:55,200 --> 00:03:57,300
So I'll do mapStateToProps

90
00:03:57,300 --> 00:03:59,343
and that should pretty much be it.

91
00:04:00,990 --> 00:04:02,700
So let's quickly flip on over to the browser.

92
00:04:02,700 --> 00:04:05,130
We're gonna make sure that we are able to see

93
00:04:05,130 --> 00:04:07,260
our list of comments appear on the page,

94
00:04:07,260 --> 00:04:09,630
'cause as far as our application itself goes,

95
00:04:09,630 --> 00:04:12,960
at this point it's basically fully functional.

96
00:04:12,960 --> 00:04:14,760
So if I go back over to the browser,

97
00:04:16,380 --> 00:04:20,459
after getting this thing to load up, there we go.

98
00:04:20,459 --> 00:04:23,280
I should be able to enter in some comment right here,

99
00:04:23,280 --> 00:04:25,680
click submit, and then see it appear on the list.

100
00:04:25,680 --> 00:04:27,570
So this definitely looks fine.

101
00:04:27,570 --> 00:04:28,830
Let's take a pause right here.

102
00:04:28,830 --> 00:04:30,090
We'll come back in the next section

103
00:04:30,090 --> 00:04:31,020
and we're gonna start working

104
00:04:31,020 --> 00:04:33,723
on some tests around our comment list component.