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.