1
00:00:00,710 --> 00:00:05,350
Know the last section we were able to confirm that we were successfully fetching a list of posts from

2
00:00:05,350 --> 00:00:06,470
our API.

3
00:00:06,670 --> 00:00:10,120
Right now our particular key doesn't have any pose associated with it.

4
00:00:10,120 --> 00:00:11,880
So I got back an empty array.

5
00:00:12,160 --> 00:00:17,230
If you see any data within the survey right here chances are you use the same key as someone else in

6
00:00:17,230 --> 00:00:18,130
this course already.

7
00:00:18,130 --> 00:00:22,480
So you could just change the keys slightly to something a little bit more unique and you should be good

8
00:00:22,480 --> 00:00:23,550
to go.

9
00:00:24,160 --> 00:00:28,840
And then the last thing I want to work on inside of the Post's index component before we move on is

10
00:00:28,840 --> 00:00:33,550
to make sure that we can at least render a list of posts so I don't really want to be concerned about

11
00:00:33,550 --> 00:00:35,250
formatting or anything like that.

12
00:00:35,260 --> 00:00:40,620
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.

13
00:00:40,630 --> 00:00:43,810
Now of course the big problem is that we don't have any posts right now.

14
00:00:44,020 --> 00:00:49,480
So to solve this we're going to open up the API client that we were using previously post man and we're

15
00:00:49,480 --> 00:00:55,120
going to manually create a post or two that's associated with this particular key or whatever key you're

16
00:00:55,120 --> 00:00:55,840
using.

17
00:00:56,110 --> 00:01:01,210
And then we'll flip back over here and make sure we can get the post up nicely inside the browser.

18
00:01:01,210 --> 00:01:04,670
So let's open up the postman API client.

19
00:01:05,170 --> 00:01:13,240
You can open up chrome and open up the Applications tab and grab the postman app or open up the postman

20
00:01:13,240 --> 00:01:13,990
app right here.

21
00:01:14,000 --> 00:01:17,830
Now again of course this assumes you've already gone through the process of installing it which you

22
00:01:17,830 --> 00:01:19,870
can do by going through the web store.

23
00:01:19,900 --> 00:01:24,610
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

24
00:01:24,610 --> 00:01:25,340
fine.

25
00:01:25,390 --> 00:01:29,650
You can just follow along and add in the code that we're going to eventually out in here first showing

26
00:01:29,650 --> 00:01:34,660
the list of posts and you'll just have to wait until we put together the form to actually create posts

27
00:01:34,660 --> 00:01:37,080
throughout the application to test all that stuff out.

28
00:01:37,150 --> 00:01:42,530
So again if you don't want to use postman totally fine you can still follow along just fine.

29
00:01:42,960 --> 00:01:43,220
OK.

30
00:01:43,240 --> 00:01:44,100
So open this thing up

31
00:01:49,320 --> 00:01:50,820
and wait for it to load.

32
00:01:51,180 --> 00:01:54,890
Well that's loading up I'm going to go grab the API key that I'm using.

33
00:01:55,140 --> 00:01:59,980
So back inside of the action create or file some inside of actions index start G-S.

34
00:02:00,180 --> 00:02:02,820
I'm going to make sure that I've got the API key right here.

35
00:02:03,000 --> 00:02:06,260
And so it should not include the question key equals.

36
00:02:06,260 --> 00:02:09,110
It should be just the term at the end.

37
00:02:09,640 --> 00:02:11,550
I'm going to copy that.

38
00:02:11,610 --> 00:02:19,930
I'll come back over to the API client and we want to make a post request to create a new post to.

39
00:02:20,010 --> 00:02:21,680
TTP.

40
00:02:22,140 --> 00:02:32,760
W W W or a redux blog dot Heroku app dot com slash API slash posts and I'll put the question mark in

41
00:02:33,130 --> 00:02:36,420
key equals and then paste the key that we just grabbed

42
00:02:39,260 --> 00:02:45,530
next will flip on over to the body tag and any body tab and make sure that the post has some contents

43
00:02:45,530 --> 00:02:46,640
to work with.

44
00:02:46,640 --> 00:02:49,010
So I've already got some saved contents in here.

45
00:02:49,130 --> 00:02:55,010
Make sure that you have a title properties categories property and a content property and really can

46
00:02:55,010 --> 00:02:59,020
be absolutely any text that you want to put in here whatsoever.

47
00:02:59,180 --> 00:03:04,030
Why should we have raw selected and that we have JS on as the Application Type.

48
00:03:04,070 --> 00:03:07,210
Or send me the content type selected as well.

49
00:03:07,220 --> 00:03:13,800
Now once we've got all the stuff put together we can click send and we should see the success come back.

50
00:03:14,090 --> 00:03:17,890
So again I've got a idea of 79000 on here.

51
00:03:18,110 --> 00:03:19,630
Title categories and content.

52
00:03:19,640 --> 00:03:23,870
So looks like everything regarding the post was created successfully.

53
00:03:23,870 --> 00:03:29,570
So now when I go back over to the browser and refresh the page and do that index request again to fetch

54
00:03:29,600 --> 00:03:35,280
the list of all posts I would really expect to see this post appear in that list as well.

55
00:03:35,380 --> 00:03:40,740
So let's give that a shot now and come back over or refresh the page.

56
00:03:42,820 --> 00:03:48,550
On my network tab I'm going to find the request that was issued and now I see the post that we had just

57
00:03:48,550 --> 00:03:50,390
created via the API client.

58
00:03:50,440 --> 00:03:51,030
Perfect.

59
00:03:51,040 --> 00:03:53,000
So looks like this is working out pretty well.

60
00:03:53,230 --> 00:03:56,770
So the last thing that we need to do is flip back over to our component.

61
00:03:56,770 --> 00:04:01,840
We're going to hook that component up to component level state or an application level state and render

62
00:04:01,840 --> 00:04:04,770
our list of posts inside the browser.

63
00:04:06,070 --> 00:04:11,890
OK so back inside of post index we first need to make sure that this list of posts get inside to the

64
00:04:11,890 --> 00:04:16,660
component and remember when every want to consume anything from application level state.

65
00:04:16,690 --> 00:04:27,460
We always define our map state to prop's function so function map state to props and then return our

66
00:04:27,460 --> 00:04:30,890
list of posts from state DOT posts.

67
00:04:32,540 --> 00:04:37,610
And then we'll hook up the maps that state to prop as the first argument to the connect function of

68
00:04:37,610 --> 00:04:43,970
map state to prop's.

69
00:04:44,010 --> 00:04:47,000
OK so just to make sure everything is working the way we expect.

70
00:04:47,060 --> 00:04:48,170
Just one time.

71
00:04:48,170 --> 00:04:54,770
I'm going to do a little console log in here and I'm going to log this stop Propst posts so this should

72
00:04:54,770 --> 00:04:59,350
be the object containing all the different posts that we fetched off the API.

73
00:04:59,570 --> 00:05:03,750
So I'm gonna do is to log one time just to make sure everything is working the way I expect.

74
00:05:03,770 --> 00:05:08,840
So one more refresh over inside the browser and going to make sure that I've got my console up as well

75
00:05:10,450 --> 00:05:12,120
so will refresh.

76
00:05:12,840 --> 00:05:16,940
OK and there's console log number one in console log number 2.

77
00:05:16,940 --> 00:05:17,630
Now you'll notice.

78
00:05:17,630 --> 00:05:21,800
Yes there are two console logs here and there is a very good reason for that.

79
00:05:21,800 --> 00:05:27,880
Remember that when we first render this component only after the component is rendered one time like

80
00:05:27,890 --> 00:05:32,540
only after it actually appears in the DOM do we call our action creator to go and fetch our list of

81
00:05:32,540 --> 00:05:33,270
posts.

82
00:05:33,470 --> 00:05:38,160
So everything in here renders one time without any posts being available.

83
00:05:38,900 --> 00:05:44,130
After the Ajax request is complete our action creator finishes the promised resolves.

84
00:05:44,270 --> 00:05:51,350
Our state is recalculated and then our component re renders with the now populated prob of posts so

85
00:05:51,350 --> 00:05:57,170
that's why we see the two separate console logs looking at the separate counts second concert log excuse

86
00:05:57,170 --> 00:05:59,550
me wherein our data should be available.

87
00:05:59,570 --> 00:06:02,780
You'll see that it has a key of 7 9 6 2 5.

88
00:06:02,990 --> 00:06:06,820
So that's the Presumably the idea of the post that we had created.

89
00:06:07,100 --> 00:06:13,050
And inside of that key is an object with category's content ID and Title Code.

90
00:06:13,070 --> 00:06:17,390
So it looks like everything is showing up as we expect.

91
00:06:17,550 --> 00:06:22,410
Now we've got all of our data available we can put together a helper function inside of the Post's index

92
00:06:22,410 --> 00:06:25,780
component to render that list of posts to the screen.

93
00:06:25,830 --> 00:06:29,560
Again I don't think we need to be that concerned about styling right now or anything like that.

94
00:06:29,580 --> 00:06:33,150
I just want to kind of get stuff something rolling.

95
00:06:33,160 --> 00:06:34,920
I'm going to remove the you out of here.

96
00:06:34,960 --> 00:06:41,300
Because I don't really like having dangling console logs around and then I'm going to replace posts

97
00:06:41,310 --> 00:06:42,300
index right here.

98
00:06:42,330 --> 00:06:44,980
We will do I guess just a tiny bit of styling.

99
00:06:45,270 --> 00:06:53,640
Let's give it an age three and a header that just says posts and then we will render our lists of posts

100
00:06:53,910 --> 00:07:02,720
inside of a UL and we'll give that a class name of this group and then to render the actual list of

101
00:07:02,720 --> 00:07:09,640
posts we'll make a helper function called this dot render us.

102
00:07:09,700 --> 00:07:12,680
So we'll take care of that helper function right now.

103
00:07:12,980 --> 00:07:15,570
Render posts inside of here.

104
00:07:15,580 --> 00:07:21,160
We will map over our list of posts and generate one line for every post that we fetched.

105
00:07:21,160 --> 00:07:26,500
Now one thing I do want to mention to you remember that we are now working with an object that contains

106
00:07:26,500 --> 00:07:27,750
a list of post.

107
00:07:27,820 --> 00:07:34,030
So when we look at this stock prop stock post-trade here this is an object and objects do not have the

108
00:07:34,160 --> 00:07:37,320
builtin array helper map that you might be use to.

109
00:07:37,450 --> 00:07:40,060
If you've been working with the Rays in the past.

110
00:07:40,060 --> 00:07:46,060
So now to map over this object containing all the different posts we're going to use load ashes map

111
00:07:46,060 --> 00:07:49,770
function which has the ability to deal with objects.

112
00:07:49,960 --> 00:07:56,260
So we can call map on an object will pass in the second function that will be used as the mapping function

113
00:07:56,650 --> 00:08:02,020
and it will return at the end an array which is what re-act is really going to expect when we try to

114
00:08:02,020 --> 00:08:04,500
render a list of components.

115
00:08:04,570 --> 00:08:08,540
Of course since we are using load ASH we have to import that into this file as well.

116
00:08:08,650 --> 00:08:16,040
So go up to the top and import underscore from load ash.

117
00:08:16,230 --> 00:08:21,630
Now back at render posts I'm going to put the return statement in right before it does so I don't forget.

118
00:08:21,630 --> 00:08:27,090
And then we can define the second argument which will be the function where we actually render some

119
00:08:27,090 --> 00:08:30,840
GSX to represent this particular post.

120
00:08:31,440 --> 00:08:41,760
So return I mean for right now we can just do an ally with the class name of list group item and again

121
00:08:41,880 --> 00:08:44,490
I just want to get this list to show up right now.

122
00:08:44,490 --> 00:08:46,150
So let's do postop title.

123
00:08:46,260 --> 00:08:49,250
So just show the title of the post on the screen.

124
00:08:49,320 --> 00:08:53,680
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.

125
00:08:53,700 --> 00:09:00,180
We can use the post ID property as the key since that should be unique and consistent across the renderers

126
00:09:00,240 --> 00:09:01,300
of this list.

127
00:09:02,780 --> 00:09:03,120
OK.

128
00:09:03,130 --> 00:09:04,260
So a lot of typing here.

129
00:09:04,280 --> 00:09:06,940
Let's test this outside the browser and see how we're doing.

130
00:09:07,460 --> 00:09:13,160
So I'll flip back over refreshed the page and I got the title showing up.

131
00:09:13,190 --> 00:09:15,120
So looks like we're doing pretty well.

132
00:09:15,500 --> 00:09:18,360
Let's take a quick break and then continue in the next section.