1 00:00:01,510 --> 00:00:06,660 A user can now enter in a new blog post but we need to automatically navigate back. 2 00:00:06,740 --> 00:00:12,220 Now there's definitely an easy way to do this and a slightly more complicated but slightly better way 3 00:00:12,220 --> 00:00:13,430 to do it as well. 4 00:00:13,600 --> 00:00:16,660 Some inside of my create screen component inside of here. 5 00:00:16,660 --> 00:00:22,090 Remember we had actually copy pasted all this code over from our show screen and so we've actually got 6 00:00:22,090 --> 00:00:26,800 some leftover code inside of our props argument right there where we d structuring out our navigation 7 00:00:26,800 --> 00:00:32,980 prop so if we wanted to handle navigating a user back to our next screen very easily we could go back 8 00:00:32,980 --> 00:00:35,470 down to our button element right here. 9 00:00:35,470 --> 00:00:43,380 I could add in a set of curly braces around the body of the on press function and then immediately after 10 00:00:43,380 --> 00:00:50,460 we call add blog post we could then call navigate or see me navigation dot navigate and pass in the 11 00:00:50,460 --> 00:00:54,510 name of index mail take us back to our index route. 12 00:00:54,510 --> 00:00:58,410 So like I said this is a very easy way but maybe not the best thing to do. 13 00:00:58,440 --> 00:01:04,620 Nonetheless I'll say this and just do a quick test now I should be able to make new post it at blog 14 00:01:04,620 --> 00:01:07,740 post ensure enough it does in fact take us right back. 15 00:01:08,070 --> 00:01:09,350 So that definitely works. 16 00:01:09,360 --> 00:01:11,620 But why is it maybe not the best. 17 00:01:11,620 --> 00:01:13,720 Well it's actually really simple right now. 18 00:01:13,770 --> 00:01:19,960 Add blog post is taking in a title and content and if we flip over to where that function is implemented. 19 00:01:20,160 --> 00:01:23,010 So here's add blog posts inside of our blog context file. 20 00:01:23,190 --> 00:01:28,380 You'll notice that we immediately commit that change and save it inside of our reducer or essentially 21 00:01:28,380 --> 00:01:29,650 we update our state. 22 00:01:29,880 --> 00:01:34,280 And that's all a very automatic and instantaneous process. 23 00:01:34,300 --> 00:01:38,430 Now there might be some scenario where we start to change our application and actually we are going 24 00:01:38,430 --> 00:01:44,130 to eventually do this where instead of just updating our state we might want to actually make a network 25 00:01:44,130 --> 00:01:46,800 request to some outside API. 26 00:01:46,980 --> 00:01:51,660 And when we make that request we might then want to wait to get some kind of response that our blog 27 00:01:51,660 --> 00:01:57,720 post has been successfully created on that outside API before we navigate our user back to that big 28 00:01:57,780 --> 00:01:59,670 list of blog posts. 29 00:01:59,670 --> 00:02:05,430 So if we decide to add in some functionality to save this new blog post to an API we would not then 30 00:02:05,430 --> 00:02:11,820 want to immediately call navigate after calling add blog post because we would add the blog post that 31 00:02:11,820 --> 00:02:13,810 would initiate the call to the API. 32 00:02:14,010 --> 00:02:18,900 We would then instantly navigate back to the index page and then some amount of time later we might 33 00:02:18,900 --> 00:02:25,250 then eventually get a response back from the API and we might actually get an error maybe the API for 34 00:02:25,250 --> 00:02:29,250 some reason would reject our request to make the new blog post. 35 00:02:29,360 --> 00:02:34,070 And so in that scenario we would have navigated back to the index page way too soon. 36 00:02:34,160 --> 00:02:36,950 So in order to solve that we could possibly. 37 00:02:36,950 --> 00:02:38,970 This would be just a little bit more challenging. 38 00:02:39,020 --> 00:02:44,660 We could essentially passing that navigate call inside of a callback to add blog post. 39 00:02:44,660 --> 00:02:49,170 So in other words inside of ADD blog post I'll put in a third argument right here. 40 00:02:49,910 --> 00:02:54,960 I'll give it a callback function and I'm gonna put the navigate call inside there. 41 00:02:57,100 --> 00:03:03,070 So now we can go and modify add blog post and we can say after we have successfully saved or dispatch 42 00:03:03,100 --> 00:03:08,950 an action to save the blog post then we can go ahead and invoke this callback which will actually navigate 43 00:03:08,950 --> 00:03:10,630 us back to index. 44 00:03:10,630 --> 00:03:14,650 Now this is not strictly necessary for our current application because we are not saving these blog 45 00:03:14,650 --> 00:03:16,840 posts to some outside API. 46 00:03:16,840 --> 00:03:21,670 I just want to mention that this would be a very valuable solution for handling any kind of saving of 47 00:03:21,670 --> 00:03:27,790 data when we want to actually make use of an outside API now just adding in that callback is not enough. 48 00:03:27,790 --> 00:03:31,110 We have to of course actually go back over to our blog context. 49 00:03:31,420 --> 00:03:37,720 Here's our add blog post function and so we are now getting a third argument right here of a callback 50 00:03:38,830 --> 00:03:40,180 it's now inside of here. 51 00:03:40,500 --> 00:03:45,060 We could say OK after doing that dispatch successfully only then do our callback. 52 00:03:45,090 --> 00:03:50,930 Like so now if you want to know what this might look like if we actually were doing an API request like 53 00:03:50,930 --> 00:03:55,010 I mentioned we're going to eventually work on the application where that does happen but just very quickly 54 00:03:55,040 --> 00:03:59,660 I want to show you what we could do here so we could turn this function into an async function and then 55 00:03:59,660 --> 00:04:06,500 maybe make a request with axioms so we could do like an axiom post of whatever with the title and content 56 00:04:07,690 --> 00:04:10,270 and then we could wrap all this in a try catch statement 57 00:04:14,960 --> 00:04:15,950 Whoops there we go. 58 00:04:15,950 --> 00:04:22,010 E like so now in this scenario if anything goes wrong with the requests that we make to that outside 59 00:04:22,010 --> 00:04:28,100 API so if it results in some kind of error we will not run the dispatch or a callback and we would just 60 00:04:28,220 --> 00:04:31,220 jump directly to that catch statement right there instead. 61 00:04:31,220 --> 00:04:37,100 And so in that scenario we could very easily handle some request resulting in an error in not immediately 62 00:04:37,100 --> 00:04:39,590 navigate the user back to the index screen. 63 00:04:39,710 --> 00:04:41,750 Now again we don't need this code that we currently have. 64 00:04:41,750 --> 00:04:44,800 This is just a very quick demonstration in case you're curious. 65 00:04:44,910 --> 00:04:50,030 I'm going to delete all that stuff I just added remove the async keyword and there we go. 66 00:04:52,010 --> 00:04:52,280 OK. 67 00:04:52,330 --> 00:04:53,230 Let's now save this. 68 00:04:53,230 --> 00:04:56,860 We'll do a quick test and we'll make sure that we still navigate back to our index screen. 69 00:04:56,860 --> 00:04:59,380 Once we successfully dispatch that action. 70 00:04:59,380 --> 00:05:07,730 So I'll go back over once again tap on the plus enter in my title some content at the blog post and 71 00:05:07,730 --> 00:05:08,930 we still navigate back over. 72 00:05:09,080 --> 00:05:10,030 Perfect. 73 00:05:10,130 --> 00:05:14,780 Now as I'm looking at this index screen right here I'm also noticing that we've still got the ad post 74 00:05:14,780 --> 00:05:15,950 button right there. 75 00:05:16,070 --> 00:05:20,690 Ad post as it's being called from our index screen is not really going to function correctly anymore 76 00:05:21,020 --> 00:05:26,780 because remember that ad post never passed in a title or a content or for that matter an actual callback 77 00:05:26,780 --> 00:05:27,110 either. 78 00:05:27,920 --> 00:05:31,940 So we probably want to go back to our next screen and just remove that button really quickly because 79 00:05:31,940 --> 00:05:34,940 I suspect that if we now tap it we will end up with an error. 80 00:05:35,030 --> 00:05:37,510 And yeah sure enough we do OK. 81 00:05:37,540 --> 00:05:40,690 So I'm gonna go back over to my next screen. 82 00:05:40,880 --> 00:05:43,030 Here it is right here. 83 00:05:43,120 --> 00:05:46,720 I'm going to scroll down and find where we place that button. 84 00:05:46,820 --> 00:05:48,240 Here it is right here. 85 00:05:48,280 --> 00:05:53,950 It's going to take that button out we no longer need the reference to add blog post inside of here. 86 00:05:53,980 --> 00:06:01,510 So I'll delete that from our D structuring off of context I'll say this once again and now once again 87 00:06:01,510 --> 00:06:04,950 just try create a quick blog post and yet it looks good. 88 00:06:04,990 --> 00:06:05,200 OK. 89 00:06:05,260 --> 00:06:06,340 So this looks pretty good. 90 00:06:06,340 --> 00:06:10,510 So we've now got the ability to here's a diagram. 91 00:06:10,590 --> 00:06:13,310 Delete list show create. 92 00:06:13,320 --> 00:06:16,460 And now finally we need to take care of edit as well. 93 00:06:16,530 --> 00:06:18,900 So let's tackle edit starting in the next video.