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