In the last section we finished wiring up our create post action creator and we're now able to create
a new post by using our back and API.
The next thing we need to work on is to make sure that we can navigate a user back to our list of posts
after we have created the new post.
So to help us kind of visualize exactly what needs to happen here is take a look at a diagram.
The general flow here will be a user Smyth's the form.
We will validate the form we will call that on submit helper that we created that on Smidt helper calls
our action creator to make the API request.
And then here's the key part.
We wait we wait for the API request to complete and only after the request has completed successfully
do we then somehow navigate the user over to our lists of posts where they can now see the new post
that was just created.
So the big key here is the fact that we want to wait for API requests to be completed before we attempt
to initiate any navigation.
So that's the big challenge.
That's what we have to figure out how to do.
So you might be thinking Well Stephen navigation isn't that hard.
We've been talking about navigation quite a bit by using that linked tag right here right.
So we've been using the link tag to navigate around two different components inside of our application.
In this case the link tag is really not appropriate.
Remember that the link tag is a re-act component that is used to generate an anchored tag that renders
in the dawn like in the age T.M. document.
In this case we don't want to have a link tag be created that the user has to click on to navigate back
to the last screen after the post has been created.
We want to just automatically navigate the user the instant we know that the Post has been created successfully.
So we would refer to this as programmatic navigation.
We want to automatically navigate the user around our application the link tag is not for programmatic
navigation it's for navigation that responds to a user clicking on something to handle programmatic
navigation re-act router passes in a big set of props on or into our component that is being read rendered
by our route.
So I want to open up our SIRC index not just file real quick inside of here.
If you recall we're making use of this route component right here to show the Post's new component that
we're currently working on whenever re-act router renders a component it passes in a whole bunch of
different helpers and objects for helping with navigation to this component right here.
So because the route is rendering post-New the post-New component has access to a bunch of props to
help with navigation.
The profit that we want to make use of is this Scott Propst history and more specifically history dot
push if we call push with a route like so whenever this line of code right here is executed we will
automatically instantly navigate back to our big list of posts because thats what exists at our root
wrapped.
So this says hey go back to the root route of our application.
We could also say you know maybe take me to this forum that Im already looking at so post-blast new
string right here just needs to match one of the different routes that we defined inside of our application.
So if this line right here will navigate us to some other location side of our application.
All great that works well but now challenge number 2 the follow up to this is that we want to make sure
that we only attempt to do this navigation after the post has been created.
And so that's the big challenge.
That's the big hard part.
How do we only navigate after a post has been created.
Before tackling that let's say this code right here.
Let's just save it let's run it inside the browser and make sure that we can manually just instantly
navigate around.
So I'm going to go back to the application or refresh plute in post 3
will submit.
And the instant I do we get navigated back to the index route.
Now you will notice that because we navigated back to the index route before the post was created we
entered a kind of race condition where essentially that post is being created at the exact same time
that we're fetching our list of posts.
And so it's a total 50/50 chance as to whether or not our newly created post will actually show up on
this list.
So clearly we really do have to wait for the post to be created before we attempt to navigate back here.
See if I hit refresh now.
OK.
Now here's my post showing up so clearly we just navigated too soon.
Get back over here.
So we know that this line of code right here is working the way we expect but we need to somehow figure
out a way to make sure that it only gets called after the post has been created.
So let's get through it then we won't do anymore.
Been doing a lot of lecturing so let's just kind of cut right to the chase here and figure out how we're
going to do this.
We're going to come to pass in callback function to this action creedo right here.
So the second argument I'm going to pass in a callback function and then I'm going to move the history
don't push call inside of that.
So now our action creator has this function right here.
If the action creator calls this function it will automatically navigate us back to our list of posts.
So let's now change over to our action creator file side of actions indexed on us and we'll go down
to create post right here.
Let's first start off by receiving this as callback.
So this is our callback function and now we want to make sure that only after this request right here
has succeeded only after we have received this request or you know only after the post has been created
Do we want to call the callback manually to do so we can use a promise.
Because that is what is returned by X post-trade.
You're going to take the semi-colon off the end and then on a new line we'll say.
Then and inside of your we'll call the call back in practice make the API request after has been successfully
completed.
Execute this function and all this function does is call the callback that we just passed in.
So let's give this a shot.
Now I'm going to go back over a refresh of the page say post for
and now when I click Submit right here the order of operations should be the new post is created.
We get the response back and then we navigate over to our list of posts so submit and there we go.
If you watch very carefully the request log you'll see that first request complete and then instantly
you see the page start to change as we go over to our big list of posts because we are fetching the
list of posts only after post 4 was created.
We of course do correctly see posts for appear on screen.
OK so that is pretty much it for adding a new post.
We now have the ability to navigate around we can create a new post.
We can validate inputs we can cancel all kinds of good stuff.
So this is looking pretty darned good.
Let's continue with the next step of our application in the next section.