1
00:00:00,750 --> 00:00:01,583
Instructor: In the last section,

2
00:00:01,583 --> 00:00:04,110
we put together our fetch comments action creator

3
00:00:04,110 --> 00:00:06,420
and there's just two last things we have to take care of.

4
00:00:06,420 --> 00:00:08,310
First off, we need to add a new button

5
00:00:08,310 --> 00:00:11,490
to our application to make sure anytime a user clicks on it,

6
00:00:11,490 --> 00:00:13,710
we call the fetch comments action creator.

7
00:00:13,710 --> 00:00:16,379
And we also need to modify our comments reducer

8
00:00:16,379 --> 00:00:19,710
so that it can watch for the fetch comments type.

9
00:00:19,710 --> 00:00:21,630
Let's first take care of the button.

10
00:00:21,630 --> 00:00:24,090
I'll add the button to the comment box component

11
00:00:24,090 --> 00:00:25,560
because we've already imported all

12
00:00:25,560 --> 00:00:27,090
of our actions to this thing.

13
00:00:27,090 --> 00:00:29,430
And wired them up to the component itself

14
00:00:29,430 --> 00:00:31,170
at the very bottom of the file.

15
00:00:31,170 --> 00:00:33,060
So all we really have to do is add a button

16
00:00:33,060 --> 00:00:34,800
to this render function right here.

17
00:00:34,800 --> 00:00:36,060
And anytime user clicks on it,

18
00:00:36,060 --> 00:00:39,060
we need to make sure we call the appropriate action creator.

19
00:00:39,900 --> 00:00:40,733
Now the mock up we were

20
00:00:40,733 --> 00:00:42,960
just looking at showed the two buttons

21
00:00:42,960 --> 00:00:44,010
for submitting a comment

22
00:00:44,010 --> 00:00:46,950
and fetching a list of comments right next to each other.

23
00:00:46,950 --> 00:00:48,480
But to accomplish that we would have

24
00:00:48,480 --> 00:00:51,600
to add that new button, like, right here.

25
00:00:51,600 --> 00:00:52,620
I don't really wanna do that

26
00:00:52,620 --> 00:00:54,150
because then clicking on this button

27
00:00:54,150 --> 00:00:56,340
might trigger a form submittal.

28
00:00:56,340 --> 00:00:58,020
We could definitely prevent that behavior

29
00:00:58,020 --> 00:01:00,600
but let's just take the easy way out here.

30
00:01:00,600 --> 00:01:03,030
So I'm going to wrap the entire form

31
00:01:03,030 --> 00:01:03,993
with a div.

32
00:01:06,210 --> 00:01:08,520
And then I'll add the new button tag that we want

33
00:01:08,520 --> 00:01:10,500
as a sibling to the form.

34
00:01:10,500 --> 00:01:11,820
So if we click on the button.

35
00:01:11,820 --> 00:01:14,160
No way of the form getting submitted.

36
00:01:14,160 --> 00:01:16,173
So down here I'll put on my, oops.

37
00:01:17,730 --> 00:01:19,320
My button.

38
00:01:19,320 --> 00:01:22,390
I'll give it some text like fetch comments

39
00:01:24,690 --> 00:01:27,450
and I'll add an on click hand alert to the button itself.

40
00:01:27,450 --> 00:01:29,160
So let's say on click.

41
00:01:29,160 --> 00:01:30,660
Anytime someone calls this thing,

42
00:01:30,660 --> 00:01:32,520
we're going to directly call

43
00:01:32,520 --> 00:01:34,050
that action creator we just put

44
00:01:34,050 --> 00:01:36,363
together called fetch comments.

45
00:01:39,150 --> 00:01:43,560
So right here, we'll say this dot props dot fetch comments.

46
00:01:43,560 --> 00:01:45,030
Now two things to keep in mind here

47
00:01:45,030 --> 00:01:46,890
of kind of basic react stuff.

48
00:01:46,890 --> 00:01:48,690
First off, we are not putting a set

49
00:01:48,690 --> 00:01:50,850
of parentheses after that.

50
00:01:50,850 --> 00:01:51,900
The reason we're not doing that

51
00:01:51,900 --> 00:01:54,930
is that we want to give this button a callback

52
00:01:54,930 --> 00:01:57,060
that it can call at some point in the future.

53
00:01:57,060 --> 00:01:58,620
So we're just giving a reference

54
00:01:58,620 --> 00:02:00,630
to the fetch comments function.

55
00:02:00,630 --> 00:02:02,370
If we put the set of parentheses on

56
00:02:02,370 --> 00:02:04,530
then the instant this component gets rendered

57
00:02:04,530 --> 00:02:07,020
it will immediately attempt to call fetch comments

58
00:02:07,020 --> 00:02:09,330
which is not the behavior we want.

59
00:02:09,330 --> 00:02:11,550
The second thing I want to remind you about very quickly

60
00:02:11,550 --> 00:02:13,260
is when we bind an action creator

61
00:02:13,260 --> 00:02:15,510
to a component through the connect tag down here

62
00:02:15,510 --> 00:02:19,140
it gets added to the props object for the component itself.

63
00:02:19,140 --> 00:02:22,950
So that's why we did this dot props dot fetch comments.

64
00:02:22,950 --> 00:02:24,870
All right, so let's now flip back over to the browser

65
00:02:24,870 --> 00:02:27,150
and just make sure that button's appearing.

66
00:02:27,150 --> 00:02:28,173
Okay, looks good.

67
00:02:29,490 --> 00:02:30,720
So now the last thing we have to do

68
00:02:30,720 --> 00:02:34,650
is open up our reducers comments dot JS file.

69
00:02:34,650 --> 00:02:36,510
And we'll make sure that this reducer knows

70
00:02:36,510 --> 00:02:39,540
how to handle that extra type that we just added.

71
00:02:39,540 --> 00:02:40,890
So the extra type that we just added

72
00:02:40,890 --> 00:02:43,863
into our application was called fetch comments.

73
00:02:44,820 --> 00:02:45,653
I'll first make sure

74
00:02:45,653 --> 00:02:47,440
that I import that type at the top

75
00:02:50,100 --> 00:02:52,203
and then I'll add a case to my reducer.

76
00:02:57,000 --> 00:02:57,900
And one thing I wanna mention

77
00:02:57,900 --> 00:03:01,200
is that we cannot reuse save comment right here

78
00:03:01,200 --> 00:03:02,970
because fetch comments is going to be dealing

79
00:03:02,970 --> 00:03:04,710
with multiple comments.

80
00:03:04,710 --> 00:03:06,150
In addition, it's also going to have

81
00:03:06,150 --> 00:03:08,250
to have some logic inside of it

82
00:03:08,250 --> 00:03:10,200
to iterate through this list of objects

83
00:03:10,200 --> 00:03:13,023
and only pull off the name property from each one.

84
00:03:15,630 --> 00:03:18,720
Okay, so now inside of here we can iterate

85
00:03:18,720 --> 00:03:20,100
through the list of comments.

86
00:03:20,100 --> 00:03:21,540
The list of comments is available

87
00:03:21,540 --> 00:03:25,680
on action dot payload dot data.

88
00:03:25,680 --> 00:03:28,080
This is gonna be the array of objects.

89
00:03:28,080 --> 00:03:30,603
So like literally this data structure right here.

90
00:03:31,500 --> 00:03:33,090
So we're gonna map through that thing.

91
00:03:33,090 --> 00:03:35,280
And for every comment object we're going

92
00:03:35,280 --> 00:03:37,620
to return just the name property.

93
00:03:37,620 --> 00:03:40,650
So we'll end up with an array of strings.

94
00:03:40,650 --> 00:03:44,550
So I'll say action dot payload dot data dot map.

95
00:03:44,550 --> 00:03:46,500
And for every comment we're going

96
00:03:46,500 --> 00:03:49,800
to return just comment dot name.

97
00:03:49,800 --> 00:03:50,633
Like so.

98
00:03:52,650 --> 00:03:55,110
Now I will assign the result of all this

99
00:03:55,110 --> 00:03:58,413
to a temporary variable that I'll call simply comments.

100
00:04:00,240 --> 00:04:02,040
And then after we do that operation we

101
00:04:02,040 --> 00:04:05,040
will return a new array

102
00:04:05,040 --> 00:04:07,950
that contains all the previous comments we had

103
00:04:07,950 --> 00:04:10,620
which we can accommodate for by doing dot, dot, dot, state.

104
00:04:10,620 --> 00:04:12,540
So that's all the previous comments

105
00:04:12,540 --> 00:04:15,510
plus all these new comments as well.

106
00:04:15,510 --> 00:04:17,673
So dot, dot, dot comments.

107
00:04:19,560 --> 00:04:21,930
Okay, so I think that's just about it.

108
00:04:21,930 --> 00:04:23,310
Let's flip on over to the browser

109
00:04:23,310 --> 00:04:24,780
and we're gonna test this thing out

110
00:04:24,780 --> 00:04:25,800
and just make sure that we can

111
00:04:25,800 --> 00:04:28,080
actually get the list of comments on the screen.

112
00:04:28,080 --> 00:04:29,580
After we do that we can then figure out

113
00:04:29,580 --> 00:04:31,980
how we're going to actually test all this stuff.

114
00:04:32,970 --> 00:04:34,890
So back inside my browser.

115
00:04:34,890 --> 00:04:37,140
I'm gonna click on fetch comments

116
00:04:37,140 --> 00:04:39,210
and I see my list of comments appear.

117
00:04:39,210 --> 00:04:41,610
In total I should see 500

118
00:04:41,610 --> 00:04:43,803
and it definitely looks like I've got 500.

119
00:04:45,300 --> 00:04:46,980
Okay, now of course I should still

120
00:04:46,980 --> 00:04:49,140
be able to enter in some text.

121
00:04:49,140 --> 00:04:50,640
Click on submit comment.

122
00:04:50,640 --> 00:04:51,690
And that comment should be added

123
00:04:51,690 --> 00:04:53,310
at the very bottom of the list.

124
00:04:53,310 --> 00:04:54,990
So if I go all the way down I'll see

125
00:04:54,990 --> 00:04:57,393
the gibberish that I just added in right there.

126
00:04:58,230 --> 00:05:00,240
So I think that we got the actual functionality

127
00:05:00,240 --> 00:05:01,073
put together.

128
00:05:01,073 --> 00:05:02,250
Let's continue in the next section

129
00:05:02,250 --> 00:05:03,120
and we're gonna start thinking

130
00:05:03,120 --> 00:05:05,520
about how we're going to actually test all this stuff.

131
00:05:05,520 --> 00:05:07,970
So quick break and I'll see you in just a minute.