All language subtitles for 025-Displaying Comments-git.ir

All right.

Very last components.

As soon as we're done with this thing as I mentioned several times this is where we're going to start

to see some weird things start to appear.

And this is where we're going to get back into the world of micro services just a little bit more of

this react stuff.

Let's finish this off.

We're gonna flip back over to our editor.

We're gonna start working on this comment list component.

So back inside my editor inside the react project I went to find my s our C directory and inside there

I'll make a new file called comment list dot J.S. at the top.

We will import react and the use of state hook from react.

We'll get axioms from axioms and you know once again I forgot we also need use effect as well.

So we'll get you state and easy effect that inside of here.

We'll do an export default and once again right now it's going to turn an anti div.

So what do we really have to do inside of here.

Well very similar to our comment create components our comment list is gonna be responsible for managing

its own data requirements.

So we want comment lists to make sure that it can reach out to our comments micros service and fetch

all the comments associated with some post.

If we take a look back at the API design for our comment service here it is right here.

Remember that we said that we can make a get request to post slash post i.e. slash comments so we once

again just like inside of our post great component.

We need to know the I.D. of the post that we are trying to show comments for all that really means is

that we need to make sure that we communicate a post I.D. from post list down into comment list dope

back inside of our comment list components.

I'm going to once again assume that this component will receive a post I.D. as a property then inside

of here we can write out some logic to fetch some data set it on state map over that state produce a

list of comments and display them to the user.

In practice this is going to end up being very very similar just about identical in structure to what

we did back inside a post list a moment ago.

So we're going to have some piece of states we're going to a function to fetch some data we're gonna

call that from news effect and then we will map over the data that we fetch.

So now that we know we're gonna do let's write out that code so first off we'll get some comments and

set comments coming from you state.

We're going to initialize this to be an empty array.

You might recall that on our post list we initialize that piece of state to be an object but whenever

we get a list of comments remember what our API sends back to us.

The API that we put together is going to give us an array of comments associated with the given post.

So in this case we know that we're going to be working with an array I'll then define a function called

fetch data.

This will be an async function inside of here.

We'll get some response from calling a wait axial start get going once again passing a template string

we're gonna make a request to H GDP call and slash slash local host.

And again we're going to our comments micros service which is hosted at port four thousand one

then the path that we need to make the request to is post slash then the post I.T. flash comments

so then take the data out of that response and update our comments piece of state using that set comments

function call set comments rez dot data.

Next up we need to make sure that fetch data is called Just One time when this component is first displayed

on the screen.

That's what we got that U.S. fact took for put together a use effect called we only want this effect

to be called exactly one time does the second argument we'll put in that empty array and then inside

of here we will call batch data and that's pretty much it.

Now last thing we need to do is map over our list of comments and return some J.S. ex out of that entire

list so to build out that thing I think outside of our mockup we displayed it as a unordered list right

here.

So a L with some allies.

So let's map over that array of comments.

It will say const rendered comments as comments dot map and for every comment that we get back will

return an ally inside the ally we'll display the content of the comments because remember every comment

we've created has a content property we'll say comment that content because we are building a list right

here react is going to expect this ally to have a key property assigned to it so we will assign a key

property and inside their leaves the comments ideas and finally at the very bottom I will return a U

L and inside there I will display my rendered comments and that should be it.

So once again let's say this file will then go back over to our post list components.

That's where we said we were gonna show this thing from inside a post list.

We want to show many copies of comment list but here's my post list component at the very top.

I will import comment list from comment list

will then go down to our rendered posts map function is where we iterate over every post and then right

after comment create we can show comments or see me not right after it won right before because I want

to show the list of comments and then give the user form to create a new one.

The right here is where we will put in comment lists and once again remember we need to tell.

Comment list which post or which idea post which post ideas.

There we go.

This thing needs to retrieve comments for.

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..

But let's say this and we'll do a test.

I see my comment that I created just a moment ago of your right there.

Now I should build a create yet another comment so I'll say second comment.

I'll submit it I'm going to refresh the page because remember we don't have any kind of reload logic

inside of you right now and I'll see second comments here.

I should be able to associate some comments with these other posts I created.

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

refresh the page and I see those comments appear well.

This definitely works but like I said there is some big downsides here.

So if we take a look at our network request log at network I'm filtered by ex H.R. requests and if I

refresh the page I just want you to notice something very simple might seem very benign and small.

We are making one request for every post we have fetched and that's kind of the root issue that we are

in right now.

That might not seem like a big deal but let's take a pause right here.

Come back the next video and I want to highlight why this is kind of a big deal right now.