1 00:00:00,150 --> 00:00:08,530 All right, and once the def server is up and running, I think we could construct our initial patch 2 00:00:08,760 --> 00:00:16,190 images function and that is going to be the function that is responsible for reaching our engineers, 3 00:00:16,380 --> 00:00:21,150 at least the initial function, because there's going to be some refactoring a little bit later. 4 00:00:21,600 --> 00:00:29,010 And also by the end of the video, we're going to set up the environment variable and just so we can 5 00:00:29,220 --> 00:00:34,670 all meet setting the API key in our source code. 6 00:00:34,890 --> 00:00:41,460 And of course, I'll talk about why we want to do that and how we can do that and create react up once 7 00:00:41,460 --> 00:00:43,470 we get there for the time being. 8 00:00:43,890 --> 00:00:46,260 We'll just start with abcess. 9 00:00:46,620 --> 00:00:52,110 We also have and by the way, this is what happens when you have too many windows open. 10 00:00:52,320 --> 00:00:53,610 So close, all of them. 11 00:00:54,030 --> 00:01:01,410 I'm just looking for the objets that is specific to the source and setup. 12 00:01:02,190 --> 00:01:07,080 So let me open this one, because that's the one that we're going to be working on. 13 00:01:07,080 --> 00:01:10,260 Like I said, I would want to start by setting up some kind of function here. 14 00:01:10,710 --> 00:01:13,830 And the name of the function is going to be fetch images. 15 00:01:14,130 --> 00:01:17,930 So we go here with CONSED and then fetch images. 16 00:01:17,940 --> 00:01:22,680 That is our initial function and I would want to use async. 17 00:01:22,890 --> 00:01:25,410 So I'm going to go here, we think. 18 00:01:25,920 --> 00:01:32,250 And as far as the futch functionality, I will set it up and try and catch. 19 00:01:32,700 --> 00:01:38,880 So just to spice things up again, remember we have this try and catch option where we try something 20 00:01:39,090 --> 00:01:43,620 and if that fails and of course we can do something with our error. 21 00:01:44,010 --> 00:01:47,490 And as far as what we want to try, we're going to go with Konstantine. 22 00:01:47,700 --> 00:01:55,860 Response is equal to White since we already have the async and we're going to go fetch. 23 00:01:56,070 --> 00:02:03,650 And then you are now, of course, I haven't constructed the URL yet, so that's why above the try, 24 00:02:04,170 --> 00:02:05,180 we're going to do that. 25 00:02:05,610 --> 00:02:08,600 I'm going to say that there's going to be a property of Europe. 26 00:02:08,910 --> 00:02:16,830 And the reason why I'm using that is because it will change depending on whether we're going to be searching 27 00:02:17,310 --> 00:02:21,040 or we just want to get the default images. 28 00:02:21,810 --> 00:02:28,170 So remember, in our progression, we can get default images like show, where essentially we just load 29 00:02:28,170 --> 00:02:34,380 the application and we're getting some images by default from the splash or there's also going to be 30 00:02:34,380 --> 00:02:36,030 an option of search. 31 00:02:36,360 --> 00:02:38,790 That's why there's going to be multiple URLs. 32 00:02:39,150 --> 00:02:45,630 And for the time being, we'll just start with the simple one where we have the menu URL. 33 00:02:46,020 --> 00:02:48,420 So that's the one where we're getting the photos. 34 00:02:48,750 --> 00:02:53,360 And I would just want to upend that client ID. 35 00:02:53,820 --> 00:02:58,530 So let's go here with your URL and no one will be equal. 36 00:02:58,790 --> 00:03:04,140 Now, of course, since I would want to construct that, you are going to have to use the template literal 37 00:03:04,410 --> 00:03:08,670 where first I'm going to get the main you URL and then remember. 38 00:03:09,600 --> 00:03:12,120 Poor documentation, what do we need to do? 39 00:03:12,450 --> 00:03:18,560 We need to go with a question mark because we already have the force correct. 40 00:03:18,780 --> 00:03:26,520 And after the question mark, we write client an idea that our primer and of course, I would want to 41 00:03:26,520 --> 00:03:33,390 get my value, some of them navigate back where I have the access key and I'm going to copy and paste. 42 00:03:33,900 --> 00:03:41,670 So we have the URL Musim, at least the initial version, and then I would want to wait for a response. 43 00:03:42,030 --> 00:03:47,280 So in this case, again, I will call this data online a wait, of course. 44 00:03:47,670 --> 00:03:52,800 And we're going to go with a response that Jason and we're going to invoke it. 45 00:03:53,130 --> 00:03:55,860 And if there is a natural cancel log the error. 46 00:03:56,190 --> 00:03:59,550 So let's go log and an error like so. 47 00:03:59,970 --> 00:04:07,320 And also, I would want to set up, of course, the user as well as the state values, and we'll have 48 00:04:07,320 --> 00:04:09,390 more state values a bit later. 49 00:04:09,750 --> 00:04:13,690 But for now, we're just going to go with loading since again, we're fudging there. 50 00:04:13,700 --> 00:04:15,990 So might as well start loading right away. 51 00:04:15,990 --> 00:04:17,580 So start loading. 52 00:04:17,760 --> 00:04:22,770 And that one is equal to your state and then we pass in false. 53 00:04:23,220 --> 00:04:26,800 So by default, we won't be loading OK, some. 54 00:04:27,540 --> 00:04:29,330 And then also let's get the photos. 55 00:04:29,670 --> 00:04:39,780 So I say here photos and set photos function so that we'll of course set up the list of photos that 56 00:04:39,780 --> 00:04:42,750 we're getting back by default again, empty. 57 00:04:42,760 --> 00:04:43,110 All right. 58 00:04:43,560 --> 00:04:51,120 And then once we have this one in place where we have such images before the URL, I would want to set 59 00:04:51,270 --> 00:04:54,360 loading to be true moksha. 60 00:04:54,600 --> 00:04:58,610 And then where I have the error, I also want to set it up. 61 00:04:58,920 --> 00:05:05,630 I also want to say that, yeah, if what I would want to set loading files, even if there is an error. 62 00:05:05,820 --> 00:05:09,390 So we're going to go with the loading and that one is equal to false. 63 00:05:09,690 --> 00:05:12,290 And of course what is missing is the use of fact. 64 00:05:12,600 --> 00:05:17,190 So we go here with use the fact and then I would want to run it when? 65 00:05:17,550 --> 00:05:21,360 Well, I would want to run it well out of the app load. 66 00:05:21,720 --> 00:05:28,680 So we're going to go with such images or fetch photos, whatever is the function name, and I'm going 67 00:05:28,680 --> 00:05:30,210 to go with empty. 68 00:05:30,210 --> 00:05:30,560 All right. 69 00:05:30,960 --> 00:05:34,050 And then, of course, for the time being, all just gone. 70 00:05:34,110 --> 00:05:39,120 So log the data just so we can see something in a console. 71 00:05:39,420 --> 00:05:43,350 We can navigate to the bigger browser window, localhost three thousand. 72 00:05:43,350 --> 00:05:44,700 We should have our text. 73 00:05:45,060 --> 00:05:49,640 But what we really care about in a console is of this object. 74 00:05:49,920 --> 00:05:52,750 So for the time being, there's some kind of error. 75 00:05:53,220 --> 00:05:54,210 OK, interesting. 76 00:05:54,210 --> 00:06:01,440 But then we have the object and in here it says, well, the access token is invalid, OK? 77 00:06:01,620 --> 00:06:07,980 And I'll purposely leave these errors because I would want you to see that once you start working with 78 00:06:07,980 --> 00:06:13,080 these external APIs, yes, you might have some bugs, but you don't need to freak out. 79 00:06:13,410 --> 00:06:17,130 You just need to go like, OK, so I've got some kind of error. 80 00:06:17,130 --> 00:06:22,590 So definitely I need to double check whether I'm setting up my Yooralla correctly. 81 00:06:23,010 --> 00:06:28,800 So what we're going to do is go back to the API documentation and scroll up. 82 00:06:28,800 --> 00:06:31,350 I guess we're going to go with list of photos. 83 00:06:31,800 --> 00:06:36,570 And really what I'm looking for is this ossification. 84 00:06:36,570 --> 00:06:43,380 So maybe not even list the photos, which you would want is the public authentication. 85 00:06:43,830 --> 00:06:45,810 And then if I'm checking notes. 86 00:06:46,770 --> 00:06:53,610 The morale that they provide has this parameter of questionmark and then client. 87 00:06:54,450 --> 00:06:59,400 So my access token is correct, the one that I provide. 88 00:06:59,430 --> 00:07:03,180 However, this parameter is not so. 89 00:07:03,180 --> 00:07:04,760 It should be client. 90 00:07:05,370 --> 00:07:10,950 And the reason why I'm showing you that and by the way, I still set it up on correctly should be underscore 91 00:07:11,280 --> 00:07:18,950 is because a lot of times actually were students just get a bit confused the first time they hit there. 92 00:07:19,500 --> 00:07:20,850 Don't be afraid. 93 00:07:21,090 --> 00:07:21,540 Yes. 94 00:07:21,690 --> 00:07:27,690 When you're working with NPR, you might hit some roadblocks, but you just need to double check that 95 00:07:27,690 --> 00:07:30,280 your uttara is correct. 96 00:07:30,600 --> 00:07:35,760 So in this case, once I load now, I should have my 10 images. 97 00:07:36,030 --> 00:07:42,540 Correct, because if we remember documentation and again, I know it's a bit annoying because it's somewhat 98 00:07:42,540 --> 00:07:42,870 big. 99 00:07:43,200 --> 00:07:45,990 So I kind of just scroll up and down essentially. 100 00:07:46,260 --> 00:07:52,500 I'll have to show you that by clicking on links on this, because that is just the photos now. 101 00:07:52,950 --> 00:07:57,240 I have the page, I have per page and I have order by now. 102 00:07:57,240 --> 00:07:59,500 All of them have already some default powers. 103 00:07:59,780 --> 00:08:02,670 That's why we get ten items back.