1 00:00:00,600 --> 00:00:04,830 The last thing we have to do to try out this get blog post function is call it from one of our different 2 00:00:04,830 --> 00:00:05,790 screens. 3 00:00:05,830 --> 00:00:08,650 It's gonna open up my index screen not J.S. file. 4 00:00:08,930 --> 00:00:15,390 So inside of here we can now D structure off of used context the get blog post function that we just 5 00:00:15,390 --> 00:00:21,570 added in and remember anytime that we have a function like this one right here that modifies our state 6 00:00:21,630 --> 00:00:23,900 like any state inside of application at all. 7 00:00:23,940 --> 00:00:27,600 We're never going to call that function from directly inside of our body. 8 00:00:27,660 --> 00:00:31,920 So I'm never going to write out get blog posts right there like so. 9 00:00:31,920 --> 00:00:37,260 The reason is as soon as we start to render our index screen component we're going to call get blog 10 00:00:37,260 --> 00:00:40,500 posts that's going to initiate our API requests. 11 00:00:40,760 --> 00:00:42,780 The API request will eventually be resolved. 12 00:00:42,780 --> 00:00:47,500 Update our state and cause our component to be re rendered when our component gets re rendered. 13 00:00:47,550 --> 00:00:54,270 Get blog posts we'll be called automatically a second time so we'll then kick off another API request. 14 00:00:54,390 --> 00:00:56,240 We'll eventually get some response. 15 00:00:56,250 --> 00:01:03,270 Update our State Index screen gets rendered a third time and well lo and behold get blog posts is called 16 00:01:03,330 --> 00:01:05,600 again and we end up in an infinite loop. 17 00:01:06,420 --> 00:01:12,870 So remember to solve that we instead use that hook from react the one called use effect. 18 00:01:12,960 --> 00:01:15,360 So gonna import that right now. 19 00:01:15,360 --> 00:01:19,450 Remember the U.S. fact took is used to make sure that we only run some bit of code. 20 00:01:19,470 --> 00:01:26,990 One time when a component is first rendered so inside of index screen a call use effect. 21 00:01:26,990 --> 00:01:33,700 I'll put in an arrow function and then ace argument or me a empty array as the second argument. 22 00:01:33,710 --> 00:01:38,360 Remember that empty array right there means that we only want to run that error function exactly one 23 00:01:38,360 --> 00:01:41,530 time when our component first shows up on the screen. 24 00:01:41,590 --> 00:01:46,760 So now inside of this arrow function it is safe to call get blog posts because it's only going to be 25 00:01:46,760 --> 00:01:53,970 invoked exactly one time so inside of your all call get blog posts. 26 00:01:54,070 --> 00:01:55,300 That should really be it. 27 00:01:55,300 --> 00:01:56,680 So now save this. 28 00:01:56,800 --> 00:02:01,750 And if I open up my application I see nothing at all which is actually to be expected. 29 00:02:01,780 --> 00:02:07,400 Remember right now we don't actually have any blog buzz whatsoever on our API. 30 00:02:07,450 --> 00:02:10,550 Now we can change that up or fix that up very easily. 31 00:02:10,600 --> 00:02:15,640 Hopefully you still have your code Ed open from when we were customizing our Jason server. 32 00:02:15,640 --> 00:02:21,430 It looks like I closed mine so I got really quickly change back over to that directory that's running 33 00:02:21,460 --> 00:02:22,440 our Jason server. 34 00:02:23,820 --> 00:02:26,300 And start my code editor inside there again. 35 00:02:26,310 --> 00:02:27,840 Here it is right here. 36 00:02:27,900 --> 00:02:34,170 Remember we created that DB Jason File this DVD Jason File is going to eventually contain all the different 37 00:02:34,170 --> 00:02:36,640 blog posts that we've created on our API. 38 00:02:37,110 --> 00:02:42,540 If we want to we can manually change this file and that will essentially inject some information into 39 00:02:42,540 --> 00:02:46,180 our server so we can manually add in a blog post right now. 40 00:02:46,230 --> 00:02:48,870 Just adding in an object inside of that empty array. 41 00:02:49,240 --> 00:02:50,940 So let's try doing that. 42 00:02:50,940 --> 00:03:02,910 I'm gonna put a new object inside of here I'm gonna give it an I.D. of 1 a title of API post and some 43 00:03:02,910 --> 00:03:07,680 content of content for my post. 44 00:03:07,680 --> 00:03:12,240 Remember we are currently inside of a Jason file so you have to add in these double quotes everywhere. 45 00:03:12,240 --> 00:03:18,140 Single quotes will not work so once I've got that all inside of here I'll save the file and that should 46 00:03:18,200 --> 00:03:20,740 automatically reload my Jason server. 47 00:03:20,930 --> 00:03:26,230 I can confirm that if I just flip over to my terminal and find the window that's running my Jason server. 48 00:03:26,300 --> 00:03:32,130 So here's that window that's running Jason server you'll see that it says DB Jason has changed reloading. 49 00:03:32,330 --> 00:03:36,740 If you don't see that message you can stop your server with control C and then start it back up with 50 00:03:36,830 --> 00:03:40,040 NPM run DV OK. 51 00:03:40,070 --> 00:03:44,810 So now that our Jason server is running and we've got at least one blog post inside there we can now 52 00:03:44,840 --> 00:03:48,740 flip back over to our application and do a manual refresh. 53 00:03:48,890 --> 00:03:53,420 Remember you can manually refresh your app on a physical device by shaking your phone really quickly 54 00:03:53,600 --> 00:04:00,500 and then tapping on refresh on the IOW simulator you can hit commander and on Android you can hit R 55 00:04:00,530 --> 00:04:01,840 twice in a row. 56 00:04:01,850 --> 00:04:05,060 Alternatively you can just make a little change to your code and save it. 57 00:04:05,120 --> 00:04:06,780 And that should automatically refresh. 58 00:04:07,700 --> 00:04:07,950 OK. 59 00:04:08,000 --> 00:04:12,750 So right away I'll see that I've got my blog post that I just created appearing on the screen. 60 00:04:12,770 --> 00:04:13,960 Awesome. 61 00:04:13,970 --> 00:04:19,700 Now at this point if you do not see a blog post appearing it is incredibly likely and very possible 62 00:04:19,700 --> 00:04:23,200 that something is not quite going correctly with and grog. 63 00:04:23,240 --> 00:04:27,560 So the first thing that first little bit of troubleshooting to do if you do not see a blog post appear 64 00:04:27,560 --> 00:04:31,500 right here is to try to access that blog post manually. 65 00:04:31,520 --> 00:04:37,460 Let me show you how to do that the to access that blog post manually and see what information are Jason 66 00:04:37,460 --> 00:04:38,430 server has. 67 00:04:38,450 --> 00:04:43,310 I'm going to go back over my terminal going to find a window that's running and grok I'm going to make 68 00:04:43,310 --> 00:04:49,970 sure that I still have an okay session status as long as I do I'll then open up that you URL right there 69 00:04:50,030 --> 00:04:52,360 or at least right now I'm just gonna copy it. 70 00:04:52,370 --> 00:05:01,590 I'll then go over to my browser paste that you URL and then go to slash blog posts so you can see right 71 00:05:01,590 --> 00:05:02,090 here. 72 00:05:02,190 --> 00:05:05,310 I'm definitely seeing one blog post available. 73 00:05:05,310 --> 00:05:10,860 If you cannot see any blog posts or if you get a message like connection not found or a forum for anything 74 00:05:10,860 --> 00:05:15,230 like that that means that something is not quite correctly set up within grok. 75 00:05:15,420 --> 00:05:20,160 But if you do see this blog post it means that something must be wrong with your react native application 76 00:05:20,160 --> 00:05:21,060 instead. 77 00:05:21,320 --> 00:05:24,750 So you can really use the existence of this you are all right here. 78 00:05:24,780 --> 00:05:28,720 Remember you're gonna have a slightly different identifier than I if this page works. 79 00:05:28,830 --> 00:05:32,730 Well that means something must be wrong with React Native IF IT DOESN'T WORK SOMETHING IS WRONG WITH 80 00:05:32,900 --> 00:05:38,320 AND grok now obviously hopefully at this point everything works out just fine. 81 00:05:38,420 --> 00:05:41,320 But I just want to mention this in case it's not quite working. 82 00:05:41,630 --> 00:05:41,870 All right. 83 00:05:41,870 --> 00:05:46,080 So now that we've got our list of information right here appearing let's take another quick pause and 84 00:05:46,090 --> 00:05:50,330 then come back the next video we're gonna start to focus on how we can make sure that we create blog 85 00:05:50,330 --> 00:05:54,710 posts on our API as well so quick pause we'll take care of that in the next video.