All language subtitles for 023-Fetching and Rendering Posts-git.ir

In this video we're going to start to work on our post lists comment list and comment create components.

Right now we're kind of deep in the world of react and it sure seems like we're not messing around with

micro services too much.

Don't worry.

We just have to put these three components together very quickly and as I've mentioned several times

now we're gonna start to see if there's some really big issues with our current micros services architecture.

We're gonna get back to the world of micro services very very quickly.

In the meantime let's just finish up these components really quickly to get started.

I'm gonna go back over to my mode editor for my react project.

Here it is right here inside my S.R. C directory.

I'm gonna make a new file called post list dot J.S. inside if you're all import react right away.

I'll do an export default inside of here.

Right now I'm just gonna return an empty div and I'll make sure that I show this component inside of

my app component.

I'll go back over to my apt j ust file at the top.

I will import most lists from post list then right underneath my post to create I'm going to add in

a chart.

That's a horizontal rule just to draw a line across the screen to make sure that's clear to users that

they're looking a different section.

I'll put in an H1 right underneath it and just put in their posts and I'll show the post list component.

So simple enough.

Let's go back over to our post list component.

Let's think about what this component really needs to do.

And needs to make a request over to our post service and get a list of all the posted I've ever been

created.

We're then going to iterate over that list of posts and create some div or something similar to just

show the title of each post inside of a one these little card looking things.

Let's first add in some code to make requests to our post service to get the list of posted I've been

created.

To do so at the very top we're going to get that use state from react again because we do have to store

our list of posts somewhere I will also import axioms from axioms so we can actually make the request

itself.

One other quick thing we need here we need to use effect as well to make sure that we only try to fetch

our list a post one time when our component is first created.

So let's write out some code to actually make this request will first get a piece of state here so we'll

declare a new piece of state called post

and we do have to provide a initial starting value for this thing.

Now you might be tempted inside of here to put like an array because hey we're getting some list of

posts but I want you to think back to the postal service.

We really put together.

Let's go backwards.

The post code editor really quickly so I'm going to tab back over to my post service inside of my posts

project right now I'm inside the index not just file inside there and as a quick reminder we start all

of our posts inside of an object and we're sending back that entire object whenever someone tries to

get a list of all of our posts so when we think about providing a default value for that you state call.

We only want to put it in a right inside there we want to put an object instead to kind of represent

what our final state is going to actually look like to back inside of my post list components rather

than putting in an array as our default value right there.

I'll put in an object again just to represent how we're going to actually get this data back from our

API after that.

I'm going to define a function that's going to make the actual request off to our post service it's

going to define a function called fetch post.

This is going to be an async function because we probably want to use that async await syntax inside

of here.

We'll get some response from calling a wait axial socket and then remember to get our list of posts

we need to make a get request to local host four thousand.

That's where our post service is and the actual end point that we want to reach out to is the post end

point or the post route.

So we will put inside of your GDP calling slash slash local host four thousand slash post

as a quick reminder anytime we make a request with axioms we get back your response object or actual

data is nested inside there on a data property.

So we're going to take that response.

Or more specifically the data from it and use it to update our Post piece of state.

We'll say set posts on the rez dot data

but we've now got this function put together.

So now the next we need to do is decide when to call it.

That's why we got this use.

If I took as reminder use if I can use to run some code at very specific points in time in the lifecycle

of a component in our case we probably want to run fetch posts only when our component is first displayed

on the screen so to make sure that we can run this function only when this component first displayed

we will call this effect.

We will put in a empty function right now as the first argument and then critically as the second argument

we're going to put in an empty array that empty array right there is what's going to tell react to only

run this function one time and then inside that function we can actually call suppose

just as a quick task right after that use effect.

Let's put in the console log and we'll try to console log out our posts is a state

going to say this you know look back over

and inside my console right here which I already have open I can see that I've got one console log that's

the default value of posts that we initialized inside of our components and then right after that I've

got an object that has a key of a 0 1 blah blah blah.

So that's the randomly generated idea that we generated when we first created post and as a value is

the actual post itself.

So this looks good.

Now all we have to do is iterate over the values of this object and for every value on there we're going

to display a little post something on the screen.

Let's do that right now.

I'm going to go ahead and delete the console log we just put together and then after that I'm going

to do a rendered posts and that's going to be the result of calling object dot values on post object

values is a built in function javascript that's gonna give us back an array of all the values inside

of this object right here.

So it's going to essentially be an array of actual post objects.

We will then map over that array and for every post inside their

we're going to generate some a sex and return it from this mapping function.

So I'm going to return we're gonna put a little bit of mark up right here I'll give myself a div on

the div itself.

We're going to add in a class name of card.

I'm going to add it in a hardcoded style property just to make these cards look kind of nice.

I'm gonna give this thing a width of 30 percent and a margin bottom of 20 makes me say this.

You can see that entire line and then because we are generating a list of elements here react is going

to expect us to place a key property on each of the elements so we are creating or I should say the

top level elements so to have an actual unique key I'll use the I.D. out of our post object because

remember every post has an idea they'll say a key is going to be post dot I.D. like so.

All right.

Next up inside this div I'm going to give it a another div with a class name of card dash body.

I'll give it an h three

and inside of that age three I'll display the actual post title so post dot title making sure that I've

got those curly braces as referring to a javascript variable right here.

So I'd say this looks pretty good.

We are now generating a list of all the different post titles.

Now last we need to do is to just make sure that we display rendered posts on the screen somewhere.

So we just need to make sure from the overall components we return something that's going to wrap up

or display rendered posts inside this div I'm going to open it up give it a opening and closing tag

and inside there also rendered those.

I'm also going to give this div right here a little class name Hutchinson a little.

This is gonna be kind of long series of class names just to get these cards to display or lay themselves

out very nicely.

We're gonna say D dash flex like dash row let's dash wrap and just one more justify dash content dash

between and I'll say that line once again so you can see it.

There we go.

Let's say this look back over quick test and there we go now you probably see something like this right

here.

Just as a reminder whenever I'm showing my browser window I'm almost always zoomed in so you can see

everything on my screen very easily.

So we've got that post listed right there.

And of course we can create another post we'll say a second post we can submit it.

The Post does not show up on the screen right away.

That's because we don't have any logic to actually refresh our list of posts.

So I need to manually refresh the page and once I do I'll see the second post appear.

I can do third post submit its refresh and there's my third post.

All right.

Well I'd say we're off to a good start.

So one more quick pause come back.

We're gonna start to tackle all this commenting stuff.

I'll see you in just a moment.