1 00:00:00,780 --> 00:00:05,550 Now that we are successfully posting our phone values to our back in API the last thing to do is to 2 00:00:05,550 --> 00:00:10,710 make sure that we redirect our user back over to the slash surveys route. 3 00:00:10,710 --> 00:00:15,130 Now doing a redirect like this is actually going to be just a little bit complicated. 4 00:00:15,150 --> 00:00:19,830 You'll recall that we have handled navigation around our application previously by using the link tag 5 00:00:19,830 --> 00:00:21,660 provided by re-act router. 6 00:00:21,660 --> 00:00:27,750 Now the link tag was specifically made for creating elements that a user can click on to navigate around 7 00:00:27,750 --> 00:00:29,060 the application. 8 00:00:29,070 --> 00:00:35,610 However in this case we want to do some programmatic or automatic navigation inside of our app and that's 9 00:00:35,610 --> 00:00:37,470 what's going to be a little bit more challenging. 10 00:00:37,470 --> 00:00:38,780 Let me tell you why. 11 00:00:39,410 --> 00:00:40,030 OK. 12 00:00:40,290 --> 00:00:43,090 So here's a diagram of our current application. 13 00:00:43,290 --> 00:00:45,390 At the very top we've got the app component. 14 00:00:45,390 --> 00:00:51,030 We've got the survey a new component and the survey is showing both the survey form and survey form 15 00:00:51,040 --> 00:00:57,360 review the survey form view is then at some point time calling our Samit survey action creator. 16 00:00:57,360 --> 00:00:58,160 Now here's the issue. 17 00:00:58,190 --> 00:01:03,780 You might be able to guess based on the text on here the app component and the survey new components 18 00:01:04,050 --> 00:01:05,840 know about re-act router. 19 00:01:05,970 --> 00:01:12,280 And when I say no I mean these components contain some logic that directly refer to react router. 20 00:01:12,540 --> 00:01:19,050 The app component is where we create our initial routing definition and the survey new component is 21 00:01:19,050 --> 00:01:22,080 being rendered directly by re-act router. 22 00:01:22,350 --> 00:01:27,840 So remember inside the company we set up a route handler like that route component and we said whenever 23 00:01:27,840 --> 00:01:32,570 someone goes to surveys slash new show The survey new component. 24 00:01:32,610 --> 00:01:39,000 So when re-act router shows a component or renders a component itself it passes in a lot of information 25 00:01:39,030 --> 00:01:42,170 and a lot of props to the component that it is rendering. 26 00:01:42,480 --> 00:01:43,400 So serving new. 27 00:01:43,410 --> 00:01:48,870 Without a doubt knows that re-act rudder exists and has access to a couple of functions that it can 28 00:01:48,870 --> 00:01:53,790 use to automatically navigate the user around the application. 29 00:01:53,790 --> 00:02:00,000 However all of those functions all that configuration is not automatically passed down to the survey 30 00:02:00,000 --> 00:02:05,370 form or view component and by extension we don't really have any way of communicating that over to the 31 00:02:05,370 --> 00:02:10,770 actual creator because it's really from the actual creator that we want to do some navigation because 32 00:02:10,770 --> 00:02:15,690 remember the actual Creator alone really knows when the request is successful. 33 00:02:15,690 --> 00:02:21,390 So here's what we're going to do in order to make sure that the action creator has some logic that it 34 00:02:21,390 --> 00:02:26,970 can do or some help or some function just something that it can use to automatically navigate around 35 00:02:26,970 --> 00:02:29,910 the application after the request is successful. 36 00:02:29,910 --> 00:02:34,820 We're going to teach survey form of view right here about re-act router. 37 00:02:34,820 --> 00:02:40,770 We're going say hey survie former view here is some interesting things about this routing solution we 38 00:02:40,770 --> 00:02:44,060 have inside our application and then survey form review. 39 00:02:44,100 --> 00:02:48,990 We'll then take that newfound knowledge and pass it along to the actual creator and allow it to do the 40 00:02:48,990 --> 00:02:50,840 actual navigation. 41 00:02:50,910 --> 00:02:57,360 So the helper that we're going to use is called the with router helper with router is a function that 42 00:02:57,360 --> 00:03:01,080 is provided by re-act router by the reactor Rotterdam library. 43 00:03:01,350 --> 00:03:07,020 And we can use it to teach some arbitrary component inside of our application about re-act router and 44 00:03:07,020 --> 00:03:10,100 how to use it to navigate around. 45 00:03:10,650 --> 00:03:15,330 Now if you want to you can always check out the official documentation around re-act router. 46 00:03:15,720 --> 00:03:21,240 So I'm out re-act training dot com Riak dash router web at blah blah blah. 47 00:03:21,270 --> 00:03:26,140 And all this stuff right here essentially you can just Google re-act router and get to the documentation. 48 00:03:26,340 --> 00:03:31,140 And then on the left hand nav if you scroll down a little bit you'll eventually find towards the very 49 00:03:31,140 --> 00:03:35,510 bottom something called with router all the way down here. 50 00:03:35,700 --> 00:03:39,720 And so you can read the documentation a little bit and it gives you a very textbook definition about 51 00:03:39,720 --> 00:03:40,840 what's going on. 52 00:03:41,040 --> 00:03:46,680 And suppose so specifically we are using with router right here to get access to this object called 53 00:03:46,680 --> 00:03:47,470 history. 54 00:03:47,730 --> 00:03:53,400 And once we get access to that object right there then we can programmatically or automatically navigate 55 00:03:53,430 --> 00:03:55,010 around our application. 56 00:03:55,020 --> 00:03:56,060 So let's get to it. 57 00:03:56,100 --> 00:04:02,280 We're going to hook up with router and then we will pass this history on object on to our action creator 58 00:04:02,520 --> 00:04:06,110 so it can do some navigation after the request has been made. 59 00:04:07,610 --> 00:04:13,610 Now just as a quick preview of how with router works we import the top and then down at the very bottom 60 00:04:13,670 --> 00:04:15,710 where we usually export our component. 61 00:04:15,860 --> 00:04:19,670 We will wrap the component with the with router function. 62 00:04:19,670 --> 00:04:23,690 So it works a little bit like the connect Telfer that we've been making use of already. 63 00:04:24,120 --> 00:04:24,660 OK. 64 00:04:25,070 --> 00:04:30,350 So down inside of our survey form view component. 65 00:04:30,400 --> 00:04:31,990 So here's survey former view. 66 00:04:32,390 --> 00:04:38,470 We're going to import with router from re-act router. 67 00:04:38,480 --> 00:04:42,980 Dom will then take this with router function. 68 00:04:42,980 --> 00:04:49,470 Scroll on down towards the bottom and I'm going to wrap my component with the with router helper. 69 00:04:49,760 --> 00:04:52,200 Now we're already making use of connect down here. 70 00:04:52,190 --> 00:04:57,350 Now I want to make sure that it's really clear that with router and the connect function right here 71 00:04:57,410 --> 00:04:59,990 have different method signatures. 72 00:05:00,380 --> 00:05:05,990 So Connect has the first set of parentheses and then the second set for the actual component but the 73 00:05:06,080 --> 00:05:12,360 with router helper is just a normal function that takes in the component as an argument. 74 00:05:12,500 --> 00:05:18,410 So right over here where we pass insert a former view right in front of it we're going to call with 75 00:05:18,410 --> 00:05:22,120 router and then pass in the component like so. 76 00:05:22,610 --> 00:05:30,470 So we've now got open parents with router open friends survey form of view and then two sets of closing 77 00:05:30,470 --> 00:05:32,840 parentheses. 78 00:05:32,840 --> 00:05:33,350 OK. 79 00:05:33,710 --> 00:05:41,480 So now survey form view knows about the history object that is provided by re-act router that history 80 00:05:41,480 --> 00:05:46,320 object is passed into the component on the prop's object. 81 00:05:46,340 --> 00:05:50,690 So we're now going to take this history object right here and make sure we pass it along to our action 82 00:05:50,690 --> 00:05:52,050 creator. 83 00:05:52,070 --> 00:05:54,600 So let's scroll up towards the top of the file. 84 00:05:54,690 --> 00:05:58,460 Here is our property list and side of the arguments list. 85 00:05:58,640 --> 00:06:03,300 We're going to also restructure out the history object now. 86 00:06:03,890 --> 00:06:08,540 Well then scrolling down towards our action creator right here. 87 00:06:08,540 --> 00:06:11,820 So here's the button click that eventually calls submit survey. 88 00:06:11,840 --> 00:06:13,170 That's our action creator. 89 00:06:13,460 --> 00:06:17,570 And then as a second argument we'll pass in the history object. 90 00:06:17,570 --> 00:06:22,910 So now the action creator is being passed the history object that we can use to navigate around the 91 00:06:22,910 --> 00:06:24,240 application. 92 00:06:24,240 --> 00:06:29,150 So now the very last step is to go back to our action create or file. 93 00:06:29,480 --> 00:06:31,470 Here's our form values argument. 94 00:06:31,520 --> 00:06:35,380 So we want to also receive history as an argument as well. 95 00:06:35,420 --> 00:06:43,340 So I'm going to add on parentheses to receive more than one argument say comma history and then inside 96 00:06:43,340 --> 00:06:46,940 of our action creator after the request is successfully completed. 97 00:06:46,940 --> 00:06:54,170 So essentially on this next line down here we can call history dot and then the function that we'll 98 00:06:54,170 --> 00:06:58,010 use to actually navigate around the application is called Push. 99 00:06:58,010 --> 00:07:04,670 And then we pass in the string of the route that we want to kind of navigate over to which for us is 100 00:07:04,760 --> 00:07:07,250 slash surveys like so. 101 00:07:07,850 --> 00:07:08,150 OK. 102 00:07:08,180 --> 00:07:09,920 So that's pretty much it. 103 00:07:09,930 --> 00:07:15,590 Now I want to mention to you is that in previous versions of re-act router navigating around from an 104 00:07:15,590 --> 00:07:18,410 action Creator has been really easy really straightforward. 105 00:07:18,560 --> 00:07:24,560 However in the latest versions of re-act router we have to get access to the history object by making 106 00:07:24,560 --> 00:07:30,220 use of this with router helper and then we have to pass the history object over into the action creator. 107 00:07:30,230 --> 00:07:31,880 So yes this used to be easier. 108 00:07:31,880 --> 00:07:34,720 It used to be much more straightforward these days. 109 00:07:34,730 --> 00:07:37,800 It's a little bit more challenging for who knows what reason. 110 00:07:37,820 --> 00:07:38,910 Honestly I don't know. 111 00:07:38,930 --> 00:07:43,550 They just made it more challenging just to keep us on our toes I guess. 112 00:07:43,550 --> 00:07:48,310 So last thing to do is test this out inside the browser so we're going to create a new survey submit 113 00:07:48,330 --> 00:07:53,830 it and then we should make sure that we get automatically redirected back over to slash surveys. 114 00:07:54,140 --> 00:07:57,340 So let's change on over to our application again. 115 00:07:57,590 --> 00:08:10,060 I'm going to create a new campaign so say a campaign number 11 on a subject line of new campaign 11. 116 00:08:10,580 --> 00:08:11,520 Vote for me. 117 00:08:11,690 --> 00:08:14,060 And then again I'm going to send this to Dev. 118 00:08:14,060 --> 00:08:22,670 Email me at gmail dot com Now you'll notice I have six credits so I get a hit next when I hit submit 119 00:08:22,760 --> 00:08:28,700 send survey excuse me send survey this time I should see myself dropped down to five credits and then 120 00:08:28,700 --> 00:08:34,230 I should also see an automatic redirect back to the routes to the route of slash surveys. 121 00:08:34,400 --> 00:08:36,080 So click the button. 122 00:08:36,440 --> 00:08:40,760 We're down to five credits and we got automatically redirected back to the dashboard. 123 00:08:40,820 --> 00:08:44,640 And then if I go over to my Gmail account again here's my new campaign. 124 00:08:45,020 --> 00:08:45,440 Awesome. 125 00:08:45,440 --> 00:08:47,570 So I think that everything is working out pretty well. 126 00:08:47,570 --> 00:08:49,970 We are definitely sending off the e-mail. 127 00:08:50,000 --> 00:08:53,850 We are subtracting credits and we are doing the automatic navigation. 128 00:08:54,320 --> 00:08:59,180 So let's continue in the next section we're going to start working on our next feature so I'll talk 129 00:08:59,180 --> 00:09:00,890 to you in just a minute.