OK. 2
So we've got our blog post form. 3
Let's go ahead and do one more little test here. 4
Say gum is great category is gum and I've got my content here so I can go ahead and submit the form 5
and you'll see that it's successfully created a blog post here. 6
But there's one weird thing about creating a post when we submit the form. 7
The user doesn't really get any navigation you know then to really give any feedback that says hey we 8
just created your blog post. 9
You know they don't want to be sitting here looking at the no no request tab. 10
So we want to do is whenever the user clicks submit and the post is successfully created we should navigate 11
the user back to the list of posts back to the index view. 12
So far we've done navigation through the use of linked tags so we placed a link tag and the user can 13
click on the tag and automatically get navigated somewhere. 14
This situation is a little bit different though. 15
We don't want to make the user have to click a button to navigate around. 16
We want to navigate for them and to be clear we're not going replace the button here with the link tag 17
. 18
You know we only want to navigate the user when that post is successfully created. 19
So what that means is we need to somehow programmatically navigate the user around our application to 20
do this. 21
We're going to make use of re-act router reactor has a built in method called Push we can call push 22
with a new path and the router will automatically navigate to that path an update the URL in the address 23
bar. 24
The only funny thing about this method is how we get used to it or excuse me how we get access to it 25
. 26
And so that's what we're going to be doing inside of this section. 27
I'm here inside of the Post's new components which is where we actually you know submit our form here 28
and call the action creator to create the post. 29
So this component right here would probably be a pretty good location to locate our helper method. 30
That is going to navigate the user around the page. 31
So again the only challenge here is getting access to that helper method. 32
Push from re-act router getting access to the router is done through a property on our component called 33
context context and re-act is a lot like props. 34
It is information that is passed from from some parent component to a child component. 35
The difference between contex and prop's however is that context doesnt have to be deliberately passed 36
from parent to child. 37
In other words when we normally create a component inside of an existing one you know lets say that 38
our posts new component creates a div right here we're passing prop's into the div and we're very explicit 39
about it. 40
You know we say make this div and pass this information into it right. 41
Context works a little bit differently. 42
We don't have to specifically pass context into a child's component the child component can just say 43
hey I want to get access to this information that Sydnee on contex from some parent component. 44
It reaches out and grabs it. 45
So it's very easy way to access data throughout the application without explicitly passing it. 46
Now having said that I want to tell you right now you know full stop do not abuse context in your own 47
applications. 48
In fact you should really avoid using context as much as possible. 49
The only time you should really ever be working with context is specifically when we're working with 50
re-act router. 51
The reason for this is that the context API is still in flux and it might change in a future release 52
of react. 53
So with that said let's give this a shot. 54
The first thing we need to do inside of our component to get access to context is to make sure that 55
we can access it by defining a context type's property. 56
So above our render component or render method here we're going to write a static declaration on this 57
class. 58
So bear with me here for a second. 59
Let's write it and then we'll go out and talk about it. 60
So we're going to write static contex types and then an object router proc type start object and then 61
appear inside of our re-act import statement after component. 62
We're also going to pull off Propp types. 63
OK so this is looking pretty weird. 64
Basically what's happening here is it is defining an object on the PPOs new class. 65
So if we want to we can make reference to say post-New dot context types and then it would return this 66
object right here. 67
Re-act interprets this object whenever an instance of post-New is created. 68
It's going to see that we declared some context types and it's going to see that we want to specifically 69
get access to some property on our context called router right here. 70
React is then going to search all of this component's parents until it finds a component that has a 71
piece of context called router. 72
And in this case it's going to go all the way back up to our router inside of our index file right here 73
. 74
And this router is going to provide the context for us. 75
So again this is really just making giving us access to a property called this context dot router inside 76
of our component. 77
So again it's like props just a little bit different. 78
We have to declare hey I want access to this router property. 79
Please go check through all of my parents until you find it. 80
And when you find it a to this context router inside of the component. 81
OK. 82
Again just let me say it one more time try to avoid using context in general. 83
The only time we really want to be using it is when we're working with the router right here. 84
So now that we've got an instance of the router and the routers that we use to call the push method 85
which is going to update our current path we need to basically figure out a good location to update 86
the URL and so we really want to do that whenever our handle Summit Action is called. 87
So let's go ahead and we'll pull out our handle submit to a separate helper function. 88
So from now on we're not just going to directly call create post right here. 89
Instead we'll move it into a helper function. 90
So going to make a new function called on submit. 91
It will be called with props. 92
And then inside of it we'll call this stock. 93
Create post with prompts. 94
So now instead of directly calling our action creator right here I'm going to call our function our 95
helper function on submit. 96
So we do have a callback here write a callback function that we're going to pass over here and it has 97
a reference to this which means we need to bind the context of our function here. 98
I'm going to bind the context of the function right inside of here by using the bind keyword. 99
So I'll say this on Samit bind this. 100
OK so I know that this code Poley looks very strange. 101
Probably a lot different than what we just had. 102
But trust me it's exactly the same where we've basically got the same exact thing here. 103
Whenever handle submit is called it's going to call this an submit and pass in properties from the form 104
. 105
So this prop's object right here is not this problem props its properties from the form it's our content 106
our title our categories. 107
And so we're going to take those properties and hand them off to our create post action creator. 108
So looks a little bit different but trust me it's the same thing. 109
So again nothing has really changed here. 110
So as as even though that seems kind of strange what we're going to do next is also seem a little bit 111
weird. 112
But again just bear with me. 113
Craig post is an action creator that creates a promise as its payload right. 114
Whenever we call an action creator that creates a problem as a payload this call right here will return 115
that same promise. 116
So when that promise is resolved it means that our blog post was successfully created that makes it 117
the perfect location to make sure that our navigation occurs. 118
So what we're going to do is change on a dot then statement on here and then we'll pass in a function 119
that will be called whenever the promise successfully resolves. 120
In other words when our blog post is successfully created then right in here inside of this function 121
means let's add a comment in here just to make sure it's nice and clear. 122
Blog post has been created. 123
Navigate the user to the index 124
and then we're going to say we navigate by calling this context push excuse me this context dot router 125
push with the new path to navigate to. 126
So we'll say this context router done push and we're going to go back to our indexed view which is just 127
forward slash like so. 128
OK let's give us a shot in the browser. 129
Make sure that it works. 130
And then let's come back here and do one more review on you know the changes that we've made here in 131
the section. 132
So I open up my browser 133
let's say soda and I like said let's do water. 134
Water is great drinks and will submit OK and you'll see we just got automatically navigated back to 135
our index fee right here. 136
But the post was also successfully created you can see that I've got a post with a 201 which means hey 137
we successfully created the blog post. 138
So looks like it worked. 139
Let's talk about why it worked. 140
One more time. 141
So did navigate around our app programmatically. 142
Like without a link tag we need access to react. 143
Router which is available to all components inside of our application through the context property to 144
get access to react router. 145
We had to define a context typewrite here. 146
This tells re-act hey I want access to this property from a parent component. 147
We then pulled the submission action out to a separate helper function right here called on Samit 148
we called our action creator create post which returned a promise and then we changed on to that with 149
a dot then. 150
So this inner function right here is only called when the blog post is successfully created. 151
Once the blog post is successfully created we called our router with this context dot router push and 152
we added a new path for the router to automatically navigate over to. 153
In this case forward slash net represents the index page. 154
So our user gets navigated back to the index page. 155
Whenever the blog post is successfully created that's it. 156
OK. 157
So I think that about wraps up our ADD post form. 158
We can create posts we can cancel and we can submit. 159
Which automatically takes us back to our lists of blog posts over here. 160
I think this is looking pretty good. 161
Let's go ahead and continue in the next section.