Know the last section we were able to confirm that we were successfully fetching a list of posts from
our API.
Right now our particular key doesn't have any pose associated with it.
So I got back an empty array.
If you see any data within the survey right here chances are you use the same key as someone else in
this course already.
So you could just change the keys slightly to something a little bit more unique and you should be good
to go.
And then the last thing I want to work on inside of the Post's index component before we move on is
to make sure that we can at least render a list of posts so I don't really want to be concerned about
formatting or anything like that.
I just want to add in a little bit of code that's going to help us show a list of posts to the user.
Now of course the big problem is that we don't have any posts right now.
So to solve this we're going to open up the API client that we were using previously post man and we're
going to manually create a post or two that's associated with this particular key or whatever key you're
using.
And then we'll flip back over here and make sure we can get the post up nicely inside the browser.
So let's open up the postman API client.
You can open up chrome and open up the Applications tab and grab the postman app or open up the postman
app right here.
Now again of course this assumes you've already gone through the process of installing it which you
can do by going through the web store.
If you don't use postman or you just don't want to install it at all and I don't blame me that's totally
fine.
You can just follow along and add in the code that we're going to eventually out in here first showing
the list of posts and you'll just have to wait until we put together the form to actually create posts
throughout the application to test all that stuff out.
So again if you don't want to use postman totally fine you can still follow along just fine.
OK.
So open this thing up
and wait for it to load.
Well that's loading up I'm going to go grab the API key that I'm using.
So back inside of the action create or file some inside of actions index start G-S.
I'm going to make sure that I've got the API key right here.
And so it should not include the question key equals.
It should be just the term at the end.
I'm going to copy that.
I'll come back over to the API client and we want to make a post request to create a new post to.
TTP.
W W W or a redux blog dot Heroku app dot com slash API slash posts and I'll put the question mark in
key equals and then paste the key that we just grabbed
next will flip on over to the body tag and any body tab and make sure that the post has some contents
to work with.
So I've already got some saved contents in here.
Make sure that you have a title properties categories property and a content property and really can
be absolutely any text that you want to put in here whatsoever.
Why should we have raw selected and that we have JS on as the Application Type.
Or send me the content type selected as well.
Now once we've got all the stuff put together we can click send and we should see the success come back.
So again I've got a idea of 79000 on here.
Title categories and content.
So looks like everything regarding the post was created successfully.
So now when I go back over to the browser and refresh the page and do that index request again to fetch
the list of all posts I would really expect to see this post appear in that list as well.
So let's give that a shot now and come back over or refresh the page.
On my network tab I'm going to find the request that was issued and now I see the post that we had just
created via the API client.
Perfect.
So looks like this is working out pretty well.
So the last thing that we need to do is flip back over to our component.
We're going to hook that component up to component level state or an application level state and render
our list of posts inside the browser.
OK so back inside of post index we first need to make sure that this list of posts get inside to the
component and remember when every want to consume anything from application level state.
We always define our map state to prop's function so function map state to props and then return our
list of posts from state DOT posts.
And then we'll hook up the maps that state to prop as the first argument to the connect function of
map state to prop's.
OK so just to make sure everything is working the way we expect.
Just one time.
I'm going to do a little console log in here and I'm going to log this stop Propst posts so this should
be the object containing all the different posts that we fetched off the API.
So I'm gonna do is to log one time just to make sure everything is working the way I expect.
So one more refresh over inside the browser and going to make sure that I've got my console up as well
so will refresh.
OK and there's console log number one in console log number 2.
Now you'll notice.
Yes there are two console logs here and there is a very good reason for that.
Remember that when we first render this component only after the component is rendered one time like
only after it actually appears in the DOM do we call our action creator to go and fetch our list of
posts.
So everything in here renders one time without any posts being available.
After the Ajax request is complete our action creator finishes the promised resolves.
Our state is recalculated and then our component re renders with the now populated prob of posts so
that's why we see the two separate console logs looking at the separate counts second concert log excuse
me wherein our data should be available.
You'll see that it has a key of 7 9 6 2 5.
So that's the Presumably the idea of the post that we had created.
And inside of that key is an object with category's content ID and Title Code.
So it looks like everything is showing up as we expect.
Now we've got all of our data available we can put together a helper function inside of the Post's index
component to render that list of posts to the screen.
Again I don't think we need to be that concerned about styling right now or anything like that.
I just want to kind of get stuff something rolling.
I'm going to remove the you out of here.
Because I don't really like having dangling console logs around and then I'm going to replace posts
index right here.
We will do I guess just a tiny bit of styling.
Let's give it an age three and a header that just says posts and then we will render our lists of posts
inside of a UL and we'll give that a class name of this group and then to render the actual list of
posts we'll make a helper function called this dot render us.
So we'll take care of that helper function right now.
Render posts inside of here.
We will map over our list of posts and generate one line for every post that we fetched.
Now one thing I do want to mention to you remember that we are now working with an object that contains
a list of post.
So when we look at this stock prop stock post-trade here this is an object and objects do not have the
builtin array helper map that you might be use to.
If you've been working with the Rays in the past.
So now to map over this object containing all the different posts we're going to use load ashes map
function which has the ability to deal with objects.
So we can call map on an object will pass in the second function that will be used as the mapping function
and it will return at the end an array which is what re-act is really going to expect when we try to
render a list of components.
Of course since we are using load ASH we have to import that into this file as well.
So go up to the top and import underscore from load ash.
Now back at render posts I'm going to put the return statement in right before it does so I don't forget.
And then we can define the second argument which will be the function where we actually render some
GSX to represent this particular post.
So return I mean for right now we can just do an ally with the class name of list group item and again
I just want to get this list to show up right now.
So let's do postop title.
So just show the title of the post on the screen.
Now one of the thing that we're going to take care of right now as well is take care of the key on here.
We can use the post ID property as the key since that should be unique and consistent across the renderers
of this list.
OK.
So a lot of typing here.
Let's test this outside the browser and see how we're doing.
So I'll flip back over refreshed the page and I got the title showing up.
So looks like we're doing pretty well.
Let's take a quick break and then continue in the next section.