Now that we are successfully posting our phone values to our back in API the last thing to do is to
make sure that we redirect our user back over to the slash surveys route.
Now doing a redirect like this is actually going to be just a little bit complicated.
You'll recall that we have handled navigation around our application previously by using the link tag
provided by re-act router.
Now the link tag was specifically made for creating elements that a user can click on to navigate around
the application.
However in this case we want to do some programmatic or automatic navigation inside of our app and that's
what's going to be a little bit more challenging.
Let me tell you why.
OK.
So here's a diagram of our current application.
At the very top we've got the app component.
We've got the survey a new component and the survey is showing both the survey form and survey form
review the survey form view is then at some point time calling our Samit survey action creator.
Now here's the issue.
You might be able to guess based on the text on here the app component and the survey new components
know about re-act router.
And when I say no I mean these components contain some logic that directly refer to react router.
The app component is where we create our initial routing definition and the survey new component is
being rendered directly by re-act router.
So remember inside the company we set up a route handler like that route component and we said whenever
someone goes to surveys slash new show The survey new component.
So when re-act router shows a component or renders a component itself it passes in a lot of information
and a lot of props to the component that it is rendering.
So serving new.
Without a doubt knows that re-act rudder exists and has access to a couple of functions that it can
use to automatically navigate the user around the application.
However all of those functions all that configuration is not automatically passed down to the survey
form or view component and by extension we don't really have any way of communicating that over to the
actual creator because it's really from the actual creator that we want to do some navigation because
remember the actual Creator alone really knows when the request is successful.
So here's what we're going to do in order to make sure that the action creator has some logic that it
can do or some help or some function just something that it can use to automatically navigate around
the application after the request is successful.
We're going to teach survey form of view right here about re-act router.
We're going say hey survie former view here is some interesting things about this routing solution we
have inside our application and then survey form review.
We'll then take that newfound knowledge and pass it along to the actual creator and allow it to do the
actual navigation.
So the helper that we're going to use is called the with router helper with router is a function that
is provided by re-act router by the reactor Rotterdam library.
And we can use it to teach some arbitrary component inside of our application about re-act router and
how to use it to navigate around.
Now if you want to you can always check out the official documentation around re-act router.
So I'm out re-act training dot com Riak dash router web at blah blah blah.
And all this stuff right here essentially you can just Google re-act router and get to the documentation.
And then on the left hand nav if you scroll down a little bit you'll eventually find towards the very
bottom something called with router all the way down here.
And so you can read the documentation a little bit and it gives you a very textbook definition about
what's going on.
And suppose so specifically we are using with router right here to get access to this object called
history.
And once we get access to that object right there then we can programmatically or automatically navigate
around our application.
So let's get to it.
We're going to hook up with router and then we will pass this history on object on to our action creator
so it can do some navigation after the request has been made.
Now just as a quick preview of how with router works we import the top and then down at the very bottom
where we usually export our component.
We will wrap the component with the with router function.
So it works a little bit like the connect Telfer that we've been making use of already.
OK.
So down inside of our survey form view component.
So here's survey former view.
We're going to import with router from re-act router.
Dom will then take this with router function.
Scroll on down towards the bottom and I'm going to wrap my component with the with router helper.
Now we're already making use of connect down here.
Now I want to make sure that it's really clear that with router and the connect function right here
have different method signatures.
So Connect has the first set of parentheses and then the second set for the actual component but the
with router helper is just a normal function that takes in the component as an argument.
So right over here where we pass insert a former view right in front of it we're going to call with
router and then pass in the component like so.
So we've now got open parents with router open friends survey form of view and then two sets of closing
parentheses.
OK.
So now survey form view knows about the history object that is provided by re-act router that history
object is passed into the component on the prop's object.
So we're now going to take this history object right here and make sure we pass it along to our action
creator.
So let's scroll up towards the top of the file.
Here is our property list and side of the arguments list.
We're going to also restructure out the history object now.
Well then scrolling down towards our action creator right here.
So here's the button click that eventually calls submit survey.
That's our action creator.
And then as a second argument we'll pass in the history object.
So now the action creator is being passed the history object that we can use to navigate around the
application.
So now the very last step is to go back to our action create or file.
Here's our form values argument.
So we want to also receive history as an argument as well.
So I'm going to add on parentheses to receive more than one argument say comma history and then inside
of our action creator after the request is successfully completed.
So essentially on this next line down here we can call history dot and then the function that we'll
use to actually navigate around the application is called Push.
And then we pass in the string of the route that we want to kind of navigate over to which for us is
slash surveys like so.
OK.
So that's pretty much it.
Now I want to mention to you is that in previous versions of re-act router navigating around from an
action Creator has been really easy really straightforward.
However in the latest versions of re-act router we have to get access to the history object by making
use of this with router helper and then we have to pass the history object over into the action creator.
So yes this used to be easier.
It used to be much more straightforward these days.
It's a little bit more challenging for who knows what reason.
Honestly I don't know.
They just made it more challenging just to keep us on our toes I guess.
So last thing to do is test this out inside the browser so we're going to create a new survey submit
it and then we should make sure that we get automatically redirected back over to slash surveys.
So let's change on over to our application again.
I'm going to create a new campaign so say a campaign number 11 on a subject line of new campaign 11.
Vote for me.
And then again I'm going to send this to Dev.
Email me at gmail dot com Now you'll notice I have six credits so I get a hit next when I hit submit
send survey excuse me send survey this time I should see myself dropped down to five credits and then
I should also see an automatic redirect back to the routes to the route of slash surveys.
So click the button.
We're down to five credits and we got automatically redirected back to the dashboard.
And then if I go over to my Gmail account again here's my new campaign.
Awesome.
So I think that everything is working out pretty well.
We are definitely sending off the e-mail.
We are subtracting credits and we are doing the automatic navigation.
So let's continue in the next section we're going to start working on our next feature so I'll talk
to you in just a minute.