1
00:00:00,910 --> 00:00:01,350
All right.

2
00:00:01,370 --> 00:00:02,500
Very last components.

3
00:00:02,510 --> 00:00:05,990
As soon as we're done with this thing as I mentioned several times this is where we're going to start

4
00:00:05,990 --> 00:00:08,180
to see some weird things start to appear.

5
00:00:08,210 --> 00:00:11,960
And this is where we're going to get back into the world of micro services just a little bit more of

6
00:00:11,960 --> 00:00:13,160
this react stuff.

7
00:00:13,170 --> 00:00:14,440
Let's finish this off.

8
00:00:14,600 --> 00:00:15,870
We're gonna flip back over to our editor.

9
00:00:15,890 --> 00:00:18,860
We're gonna start working on this comment list component.

10
00:00:18,890 --> 00:00:25,130
So back inside my editor inside the react project I went to find my s our C directory and inside there

11
00:00:25,190 --> 00:00:31,010
I'll make a new file called comment list dot J.S. at the top.

12
00:00:31,130 --> 00:00:37,160
We will import react and the use of state hook from react.

13
00:00:37,370 --> 00:00:43,090
We'll get axioms from axioms and you know once again I forgot we also need use effect as well.

14
00:00:43,200 --> 00:00:47,330
So we'll get you state and easy effect that inside of here.

15
00:00:47,340 --> 00:00:55,370
We'll do an export default and once again right now it's going to turn an anti div.

16
00:00:55,430 --> 00:00:57,430
So what do we really have to do inside of here.

17
00:00:57,440 --> 00:01:03,320
Well very similar to our comment create components our comment list is gonna be responsible for managing

18
00:01:03,320 --> 00:01:05,330
its own data requirements.

19
00:01:05,330 --> 00:01:10,130
So we want comment lists to make sure that it can reach out to our comments micros service and fetch

20
00:01:10,250 --> 00:01:13,170
all the comments associated with some post.

21
00:01:13,400 --> 00:01:17,870
If we take a look back at the API design for our comment service here it is right here.

22
00:01:17,870 --> 00:01:24,710
Remember that we said that we can make a get request to post slash post i.e. slash comments so we once

23
00:01:24,710 --> 00:01:26,900
again just like inside of our post great component.

24
00:01:26,900 --> 00:01:33,190
We need to know the I.D. of the post that we are trying to show comments for all that really means is

25
00:01:33,190 --> 00:01:41,040
that we need to make sure that we communicate a post I.D. from post list down into comment list dope

26
00:01:41,200 --> 00:01:43,290
back inside of our comment list components.

27
00:01:43,330 --> 00:01:50,470
I'm going to once again assume that this component will receive a post I.D. as a property then inside

28
00:01:50,470 --> 00:01:56,350
of here we can write out some logic to fetch some data set it on state map over that state produce a

29
00:01:56,350 --> 00:01:59,800
list of comments and display them to the user.

30
00:01:59,800 --> 00:02:04,390
In practice this is going to end up being very very similar just about identical in structure to what

31
00:02:04,390 --> 00:02:06,770
we did back inside a post list a moment ago.

32
00:02:06,850 --> 00:02:10,260
So we're going to have some piece of states we're going to a function to fetch some data we're gonna

33
00:02:10,270 --> 00:02:14,280
call that from news effect and then we will map over the data that we fetch.

34
00:02:14,290 --> 00:02:20,260
So now that we know we're gonna do let's write out that code so first off we'll get some comments and

35
00:02:20,260 --> 00:02:25,490
set comments coming from you state.

36
00:02:25,610 --> 00:02:28,810
We're going to initialize this to be an empty array.

37
00:02:28,940 --> 00:02:33,950
You might recall that on our post list we initialize that piece of state to be an object but whenever

38
00:02:33,950 --> 00:02:37,540
we get a list of comments remember what our API sends back to us.

39
00:02:37,580 --> 00:02:42,800
The API that we put together is going to give us an array of comments associated with the given post.

40
00:02:42,890 --> 00:02:47,910
So in this case we know that we're going to be working with an array I'll then define a function called

41
00:02:47,970 --> 00:02:49,210
fetch data.

42
00:02:49,260 --> 00:02:53,420
This will be an async function inside of here.

43
00:02:53,440 --> 00:03:00,430
We'll get some response from calling a wait axial start get going once again passing a template string

44
00:03:01,880 --> 00:03:05,690
we're gonna make a request to H GDP call and slash slash local host.

45
00:03:06,080 --> 00:03:11,000
And again we're going to our comments micros service which is hosted at port four thousand one

46
00:03:14,040 --> 00:03:20,160
then the path that we need to make the request to is post slash then the post I.T. flash comments

47
00:03:24,000 --> 00:03:29,470
so then take the data out of that response and update our comments piece of state using that set comments

48
00:03:29,590 --> 00:03:35,510
function call set comments rez dot data.

49
00:03:35,520 --> 00:03:39,900
Next up we need to make sure that fetch data is called Just One time when this component is first displayed

50
00:03:39,900 --> 00:03:40,640
on the screen.

51
00:03:40,830 --> 00:03:50,680
That's what we got that U.S. fact took for put together a use effect called we only want this effect

52
00:03:50,690 --> 00:03:57,350
to be called exactly one time does the second argument we'll put in that empty array and then inside

53
00:03:57,350 --> 00:04:03,550
of here we will call batch data and that's pretty much it.

54
00:04:05,310 --> 00:04:10,680
Now last thing we need to do is map over our list of comments and return some J.S. ex out of that entire

55
00:04:10,680 --> 00:04:19,140
list so to build out that thing I think outside of our mockup we displayed it as a unordered list right

56
00:04:19,140 --> 00:04:19,410
here.

57
00:04:19,440 --> 00:04:21,200
So a L with some allies.

58
00:04:21,330 --> 00:04:25,010
So let's map over that array of comments.

59
00:04:25,010 --> 00:04:33,110
It will say const rendered comments as comments dot map and for every comment that we get back will

60
00:04:33,110 --> 00:04:40,800
return an ally inside the ally we'll display the content of the comments because remember every comment

61
00:04:40,830 --> 00:04:46,470
we've created has a content property we'll say comment that content because we are building a list right

62
00:04:46,470 --> 00:04:52,590
here react is going to expect this ally to have a key property assigned to it so we will assign a key

63
00:04:52,590 --> 00:05:01,220
property and inside their leaves the comments ideas and finally at the very bottom I will return a U

64
00:05:01,230 --> 00:05:11,410
L and inside there I will display my rendered comments and that should be it.

65
00:05:11,520 --> 00:05:17,570
So once again let's say this file will then go back over to our post list components.

66
00:05:17,570 --> 00:05:20,760
That's where we said we were gonna show this thing from inside a post list.

67
00:05:20,780 --> 00:05:28,160
We want to show many copies of comment list but here's my post list component at the very top.

68
00:05:28,160 --> 00:05:33,540
I will import comment list from comment list

69
00:05:37,090 --> 00:05:43,460
will then go down to our rendered posts map function is where we iterate over every post and then right

70
00:05:43,490 --> 00:05:50,380
after comment create we can show comments or see me not right after it won right before because I want

71
00:05:50,380 --> 00:05:53,260
to show the list of comments and then give the user form to create a new one.

72
00:05:53,470 --> 00:05:58,900
The right here is where we will put in comment lists and once again remember we need to tell.

73
00:05:58,900 --> 00:06:03,280
Comment list which post or which idea post which post ideas.

74
00:06:03,280 --> 00:06:04,030
There we go.

75
00:06:04,030 --> 00:06:05,850
This thing needs to retrieve comments for.

76
00:06:05,870 --> 00:06:12,190
So just like and create we need to pass down that post I.D. prop we'll say post I.D. is post dot I.D..

77
00:06:13,980 --> 00:06:18,710
But let's say this and we'll do a test.

78
00:06:18,910 --> 00:06:22,450
I see my comment that I created just a moment ago of your right there.

79
00:06:22,450 --> 00:06:26,410
Now I should build a create yet another comment so I'll say second comment.

80
00:06:26,610 --> 00:06:32,500
I'll submit it I'm going to refresh the page because remember we don't have any kind of reload logic

81
00:06:32,500 --> 00:06:35,600
inside of you right now and I'll see second comments here.

82
00:06:35,650 --> 00:06:39,150
I should be able to associate some comments with these other posts I created.

83
00:06:39,150 --> 00:06:48,940
So I'll say neat post and then on the third one I'll put in something like this is a great post I'll

84
00:06:48,940 --> 00:06:52,440
refresh the page and I see those comments appear well.

85
00:06:52,450 --> 00:06:57,640
This definitely works but like I said there is some big downsides here.

86
00:06:57,820 --> 00:07:03,580
So if we take a look at our network request log at network I'm filtered by ex H.R. requests and if I

87
00:07:03,580 --> 00:07:09,140
refresh the page I just want you to notice something very simple might seem very benign and small.

88
00:07:09,190 --> 00:07:14,920
We are making one request for every post we have fetched and that's kind of the root issue that we are

89
00:07:14,920 --> 00:07:16,210
in right now.

90
00:07:16,210 --> 00:07:18,630
That might not seem like a big deal but let's take a pause right here.

91
00:07:18,640 --> 00:07:22,680
Come back the next video and I want to highlight why this is kind of a big deal right now.