1

00:00:00,900  -->  00:00:06,320
So are create post form is all done all we need to do now is make sure that we can see our completed

2

00:00:06,330  -->  00:00:09,540
blog posts on our index view right here.

3

00:00:09,540  -->  00:00:14,220
So right now we've just got some boilerplate that says list of blog posts we really need to make sure

4

00:00:14,220  -->  00:00:20,490
that this shows all of the different blog posts that we've got in our application.

5

00:00:20,490  -->  00:00:27,200
So we've already created an action creator that will fetch all of our posts right here.

6

00:00:27,210  -->  00:00:34,380
All we need to do is make sure that our component renders them and you can see that we're also already

7

00:00:34,380  -->  00:00:36,740
calling the action creator to fetch the posts.

8

00:00:36,960  -->  00:00:43,830
We just need to implement our map state to proper function and map our state onto the props of this

9

00:00:43,830  -->  00:00:46,210
component and then go ahead and render them.

10

00:00:46,210  -->  00:00:49,700
So let's go ahead and take care of that and this section should be pretty straightforward.

11

00:00:49,710  -->  00:00:52,690
We've definitely done this several times before.

12

00:00:52,770  -->  00:00:59,430
So we'll start off by mapping our state to our process so a function mapped state to props

13

00:01:03,240  -->  00:01:10,560
and then from here where would turn an object will have the posts show up as this props posts inside

14

00:01:10,560  -->  00:01:19,530
of our component and then if you recall our posts are available on our state as states dot PPOs dot

15

00:01:19,540  -->  00:01:19,590
.

16

00:01:19,620  -->  00:01:23,280
All this is our list of post right here.

17

00:01:23,280  -->  00:01:27,690
And then we just need to remember to add this function to our connect function right here.

18

00:01:27,750  -->  00:01:29,590
So we're not going to be doing Noll anymore.

19

00:01:29,640  -->  00:01:32,850
We'll do map state to props like So

20

00:01:36,720  -->  00:01:43,300
next we'll go ahead and add a helper function inside of the component to build our list.

21

00:01:44,730  -->  00:01:47,820
Let's go ahead and add a place to call it first.

22

00:01:48,120  -->  00:01:55,630
So let's take out the boilerplate text right there and add in a header and we'll just say that it'll

23

00:01:55,650  -->  00:02:05,390
save posts and then we'll put in a UL with a class name of list group.

24

00:02:06,690  -->  00:02:15,360
And then inside of the UL we'll do our list builder this dot render posts which will implement right

25

00:02:15,360  -->  00:02:16,170
now.

26

00:02:16,680  -->  00:02:19,210
So we've got our unordered list right here.

27

00:02:19,260  -->  00:02:24,010
And then inside of it it will be our list of all of our different blog posts.

28

00:02:25,110  -->  00:02:29,700
So I will say read your posts.

29

00:02:29,760  -->  00:02:38,460
So remember our list of posts is available as an array as this props posts so will return from here

30

00:02:38,470  -->  00:02:38,510
.

31

00:02:38,550  -->  00:02:47,490
This prop's posts and then we'll map over that list and for each post will return an ally

32

00:02:50,420  -->  00:02:56,900
so we'll do an ally with a class name of list group item.

33

00:02:57,060  -->  00:03:00,730
And don't forget we need a key on here as well.

34

00:03:00,750  -->  00:03:08,430
The key is required when ever we render a list with react as the key will go ahead and use the post

35

00:03:08,490  -->  00:03:11,170
ID since it will always be a unique ID.

36

00:03:11,400  -->  00:03:17,640
So the Post dot Id remember this ID right here is coming from the back end so the back end generates

37

00:03:17,640  -->  00:03:19,890
the ID and it passes it down to us.

38

00:03:20,070  -->  00:03:25,460
So this is just a piece of data off the actual post object.

39

00:03:26,730  -->  00:03:34,450
So we'll do a span with the class name of poll access right.

40

00:03:36,090  -->  00:03:46,350
And this will be our post dot categories so I will just show the categories of the post and then we'll

41

00:03:46,350  -->  00:03:53,270
add in the strong around our Post dot title.

42

00:03:54,850  -->  00:04:01,790
OK so let's go ahead and refresh the page and we got our posts and each of our posts that we've created

43

00:04:01,800  -->  00:04:04,290
so far you can see my first blog post.

44

00:04:04,590  -->  00:04:07,220
Another one Altoids are great blah blah blah blah blah.

45

00:04:07,500  -->  00:04:09,370
So this was looking pretty darned good so far.

46

00:04:09,370  -->  00:04:11,020
I like this.

47

00:04:11,010  -->  00:04:12,740
Remember the intent though.

48

00:04:12,900  -->  00:04:18,210
A user should really be able to go ahead and click on these items and then go to a detail page for that

49

00:04:18,360  -->  00:04:19,930
particular post.

50

00:04:20,430  -->  00:04:26,220
As you might imagine all we need to really do is set up a link component to link the user from clicking

51

00:04:26,220  -->  00:04:28,290
on this over to the show detail.

52

00:04:28,590  -->  00:04:31,160
Let's go ahead and take care of that in the next section.