1 00:00:00,330 --> 00:00:06,690 Beautiful ones, we've got some state values in the app provider now would want to fetch the questions 2 00:00:06,690 --> 00:00:12,240 again, we already have the URL, so I just need to set up the function that does that and of course, 3 00:00:12,240 --> 00:00:12,800 invoke. 4 00:00:13,440 --> 00:00:18,480 Now, what's really cool about this project is that we're going to use axios for that. 5 00:00:18,810 --> 00:00:26,250 So if you're not familiar with Axios, it is an extremely popular library that handles the AJAX requests. 6 00:00:26,760 --> 00:00:33,270 And if you want to find out more, just type axios here and you can add an RPM if you want. 7 00:00:33,660 --> 00:00:39,470 And essentially you'll navigate to their docs and you can take a look at documentation. 8 00:00:39,780 --> 00:00:44,040 Now, I can also right away tell you that it is extremely straightforward. 9 00:00:44,430 --> 00:00:47,220 We just need to install it, which of course I already did. 10 00:00:47,520 --> 00:00:54,740 So we go with NPM install and then Axios and by default we're going to perform a get request. 11 00:00:55,110 --> 00:01:01,860 So in order here they say axios and then they'll get and then we pass in the euro and of course we're 12 00:01:01,860 --> 00:01:02,910 getting back to promise. 13 00:01:03,270 --> 00:01:04,740 So we go with that then. 14 00:01:05,070 --> 00:01:06,000 Or catch. 15 00:01:06,900 --> 00:01:13,170 But by default, it is going to be a get request so we can simply go with Axios and then pass in the 16 00:01:13,170 --> 00:01:13,680 euro. 17 00:01:13,740 --> 00:01:17,040 Now, the reason why I added Axios to this project. 18 00:01:17,040 --> 00:01:23,430 So you get used to it because honestly, for this particular project, there was no real benefit of 19 00:01:23,430 --> 00:01:29,830 using because we could definitely set everything up using fetch the built and fetch API. 20 00:01:30,220 --> 00:01:35,160 However, when your project gets bigger, so that's something that's going to happen, of course, later 21 00:01:35,160 --> 00:01:39,330 on, once we build bigger project, it's a bit more convenient to use axios. 22 00:01:39,600 --> 00:01:45,240 So this is just a trial run where I would want you to get comfortable with Axios again. 23 00:01:45,480 --> 00:01:52,020 You need to install it and then of course you would need to import from Axis, which is something that 24 00:01:52,020 --> 00:01:53,430 we already have in the context. 25 00:01:53,560 --> 00:01:54,720 Yes, vulnerable. 26 00:01:54,720 --> 00:01:55,440 Scroll down. 27 00:01:55,920 --> 00:02:05,040 And right after the model set up, our questions function so concerned that such questions over here 28 00:02:05,340 --> 00:02:11,670 and it's going to be, I think, and will pass in the URL and then within a function body, I'm going 29 00:02:11,670 --> 00:02:13,080 to go with set loading. 30 00:02:13,080 --> 00:02:13,570 True. 31 00:02:13,830 --> 00:02:16,650 So set loading is going to be true. 32 00:02:16,980 --> 00:02:23,940 And I also want to set my wedding to be false as well, because once I start fetching the questions, 33 00:02:24,450 --> 00:02:29,510 then of course I'll close the form and we'll show that we are loading. 34 00:02:29,940 --> 00:02:35,600 So in this case, what I would want to do is to set set waiting to be false. 35 00:02:35,700 --> 00:02:38,940 So set waiting is going to be equal to false. 36 00:02:39,480 --> 00:02:43,110 So once I'm done with both of these things now, I'd want to wait for response. 37 00:02:43,470 --> 00:02:45,900 So I'm going to go with const and nonresponse. 38 00:02:45,900 --> 00:02:47,940 And in this case, we're going to use Zacchaeus. 39 00:02:48,210 --> 00:02:55,110 Like I said, by default, it set up as get requests so we don't need to and that dot get and we just 40 00:02:55,110 --> 00:02:56,340 pass in the URL. 41 00:02:56,610 --> 00:03:03,660 So in my case, we'll pass it on the same Yooralla passing into the future questions, then it returns 42 00:03:03,660 --> 00:03:04,180 a promise. 43 00:03:04,530 --> 00:03:05,370 So in this case. 44 00:03:06,260 --> 00:03:14,780 I can just add that catch and I would want to control the air, so it's here to log an error. 45 00:03:15,190 --> 00:03:23,120 So and once we have that one out of the way, of course, I would want to log my response on this case, 46 00:03:23,120 --> 00:03:25,190 since I know that it is returning a promise. 47 00:03:25,220 --> 00:03:28,000 I also need to add a weight on line. 48 00:03:28,040 --> 00:03:35,180 Let's consider log the response, the I'm going to set up use effect, but I can honestly say that we 49 00:03:35,180 --> 00:03:43,040 will refactor our application later where we will fetch questions when we submit the setup form. 50 00:03:43,490 --> 00:03:45,520 Again, let me go back to complete application. 51 00:03:45,530 --> 00:03:50,240 Notice that this is our set up form and our one of those questions. 52 00:03:50,240 --> 00:03:56,990 Only when I submit the form, not when I around the user, of course, at the moment, since I would 53 00:03:56,990 --> 00:03:59,750 want to start dealing with questions right from the get go. 54 00:03:59,930 --> 00:04:02,660 So I would want to build this part of the app first. 55 00:04:03,050 --> 00:04:04,940 So that's why I will set up the user. 56 00:04:05,330 --> 00:04:13,460 But later we will refactor our application where we will fetch those questions only when we submit our 57 00:04:13,460 --> 00:04:14,170 setup form. 58 00:04:14,630 --> 00:04:20,960 So technically, of course, the user fact is going to be unnecessary, not where I will refactor our 59 00:04:20,960 --> 00:04:23,660 application and remove it a little bit later on. 60 00:04:23,990 --> 00:04:25,250 So that's our user fact. 61 00:04:25,680 --> 00:04:29,740 And I'm just going to go with empty dependency error. 62 00:04:30,000 --> 00:04:35,930 Essentially, when my app loads, I would want to go with fetch and then questions and now of course 63 00:04:35,930 --> 00:04:38,660 I'll pass in that temp URL. 64 00:04:39,140 --> 00:04:43,130 So I pass that into the fetch questions line here. 65 00:04:43,350 --> 00:04:49,730 Of course I have access and then I grab that Yoro and of course I'm getting some kind of response. 66 00:04:50,030 --> 00:04:55,760 And then notice I set my waiting because that's why I can see the loading. 67 00:04:55,760 --> 00:04:58,730 And of course loading is equal to true. 68 00:04:59,060 --> 00:05:01,700 And of course we need to navigate the bigger screen. 69 00:05:03,160 --> 00:05:08,560 I'm going to go with localhost and then three thousand, and once I'm here, I'm just going to inspect 70 00:05:08,560 --> 00:05:11,540 my console and in there I should see the object. 71 00:05:11,830 --> 00:05:19,540 So this is what we're getting back from the Axios and we can find their bunch of useful info, whether 72 00:05:19,540 --> 00:05:24,070 that is config, whether that is headers request and status. 73 00:05:24,490 --> 00:05:27,560 But the one that we are looking for is data. 74 00:05:27,880 --> 00:05:32,880 So within the object, we're looking for the data and then we're looking for these results. 75 00:05:33,280 --> 00:05:37,890 So the array of 10 items, that's what we are looking for. 76 00:05:38,200 --> 00:05:43,300 And if you want to check it out, how it's going to work, if we have the error, you can just scroll 77 00:05:43,300 --> 00:05:46,650 up over here and then let's add some extra character. 78 00:05:46,990 --> 00:05:50,090 Let's see what is going to be our response here on this case. 79 00:05:50,130 --> 00:05:55,750 Notice I'm getting the right away error and my response is undefined. 80 00:05:56,170 --> 00:06:03,820 And what that means that in my application, where I have four questions, I'm going to set up the condition, 81 00:06:03,940 --> 00:06:06,220 the if condition, where I'm going to check. 82 00:06:06,220 --> 00:06:11,690 If the response is true, then beautiful, then I'm going to do something with my data. 83 00:06:12,060 --> 00:06:17,580 However, if I'm not getting anything back, well, then we won't do anything. 84 00:06:18,200 --> 00:06:20,430 OK, so that's the whole point here. 85 00:06:20,500 --> 00:06:27,070 Why would go with if response and only then we'll deal with our response. 86 00:06:27,370 --> 00:06:31,990 So if the response is there, then I would want to grab my data, which of course is going to be an 87 00:06:31,990 --> 00:06:32,350 array. 88 00:06:32,620 --> 00:06:36,460 If not, then I won't do anything soon here. 89 00:06:36,550 --> 00:06:40,030 Let's go back and let's fix our URL. 90 00:06:40,420 --> 00:06:42,190 So so fix it here. 91 00:06:42,490 --> 00:06:43,300 And you know what? 92 00:06:43,570 --> 00:06:48,880 The only thing that I would want to do, probably if there is an error, I would just want to set it 93 00:06:48,880 --> 00:06:51,130 back to the waiting. 94 00:06:51,340 --> 00:06:53,880 So in order here we are waiting. 95 00:06:54,250 --> 00:07:04,450 So let's go here, set waiting and let's set it back to try to set it here on the inside of this F condition. 96 00:07:04,630 --> 00:07:09,930 And of course, let's check our response and more specifically, let's just get there. 97 00:07:10,030 --> 00:07:17,450 So Quran's data is equal to response and data and on our results like so. 98 00:07:17,920 --> 00:07:26,920 And let's take a look at our results results over here and let's just do it with console log. 99 00:07:27,310 --> 00:07:32,740 So console log the data and there it now have array of 10 items. 100 00:07:33,160 --> 00:07:38,100 Now, please remember one thing where we also have an option for having error. 101 00:07:38,650 --> 00:07:44,890 So there's going to be some Yarl's that don't provide any values and you don't have to do it along. 102 00:07:44,890 --> 00:07:54,430 But I will still navigate back to my API 100 questions and I'll check for the politics because I know 103 00:07:54,430 --> 00:07:56,670 that that one generates that error. 104 00:07:57,040 --> 00:08:03,520 And as far as difficulty, I'm going to go with medium, so generate the URL than here. 105 00:08:03,550 --> 00:08:05,540 It says the value must be less than 50. 106 00:08:06,240 --> 00:08:11,170 OK, let's take a look at the 50 here and generate the URL. 107 00:08:11,830 --> 00:08:13,690 And at this point it just gives me 10. 108 00:08:14,020 --> 00:08:15,580 I want I want my apologies. 109 00:08:16,000 --> 00:08:17,730 Let's go over here with 50 again. 110 00:08:17,740 --> 00:08:19,590 I'm going to go back to politics. 111 00:08:19,990 --> 00:08:20,780 My apologies. 112 00:08:20,830 --> 00:08:23,440 Going to take a little bit longer, generate euro. 113 00:08:24,250 --> 00:08:29,530 But it is important for me to showcase what is going to be the response where we would want to throw 114 00:08:29,530 --> 00:08:30,970 the error scenarios. 115 00:08:30,970 --> 00:08:34,970 Here we have a response code of one and result is empty array. 116 00:08:35,350 --> 00:08:37,210 So those are two options. 117 00:08:37,210 --> 00:08:43,090 Either we're going to get questions which we're going to display or we're going to get this error. 118 00:08:43,420 --> 00:08:46,570 And then, of course, I still would want to display my form. 119 00:08:47,140 --> 00:08:51,790 So I wouldn't want to go to the questions, since, of course, they're not there and I would want to 120 00:08:51,910 --> 00:08:53,260 showcase the error. 121 00:08:53,620 --> 00:08:55,720 So that's why I will navigate back again. 122 00:08:55,750 --> 00:08:56,680 You don't have to do it. 123 00:08:56,980 --> 00:08:59,110 Just follow along as far as watching. 124 00:09:00,260 --> 00:09:06,740 And then I'll copy and paste and now let's take a look at our response here so we start to notice the 125 00:09:06,740 --> 00:09:08,300 array is empty. 126 00:09:08,300 --> 00:09:08,660 All right. 127 00:09:09,260 --> 00:09:13,250 And now, of course, I could check if data length is bigger than zero. 128 00:09:13,610 --> 00:09:15,800 That means that I'm getting my questions back. 129 00:09:15,950 --> 00:09:16,390 Correct. 130 00:09:16,670 --> 00:09:18,810 And it is sitting in the results. 131 00:09:19,550 --> 00:09:26,480 Now, if that is not the case, if data length is not bigger than zero, well, then I know that I'm 132 00:09:26,480 --> 00:09:28,010 not getting any questions back. 133 00:09:28,010 --> 00:09:28,450 Correct. 134 00:09:28,820 --> 00:09:30,290 So we'll navigate here. 135 00:09:30,620 --> 00:09:35,900 And I'm going to go back to the previous URL, since that's the one we're going to use throughout the 136 00:09:35,900 --> 00:09:38,120 project until we set up our own. 137 00:09:38,450 --> 00:09:47,300 And inside of this, if I'll make another one and I'll say if data length is bigger than zero, so data 138 00:09:47,600 --> 00:09:56,000 length length is bigger than zero than I would want to do something, then I would want to set my questions 139 00:09:56,690 --> 00:09:59,990 to the response data and result. 140 00:10:00,440 --> 00:10:06,020 So meaning in this case, I can just go there, of course, and I would want to set loading the false 141 00:10:06,290 --> 00:10:14,810 set loading is equal to false as well as set waiting is equal to false or here and the last one is set. 142 00:10:14,810 --> 00:10:20,720 Error is equal to false because we need to keep in mind that of course, if we generate an hour. 143 00:10:21,540 --> 00:10:26,790 And then if we're successful, I would want to wipe out that previous error, so in here I'm going to 144 00:10:26,790 --> 00:10:27,270 say false. 145 00:10:27,720 --> 00:10:34,200 Now, if the data length is not bigger and zero, meaning if the API cannot generate those questions, 146 00:10:34,410 --> 00:10:39,370 then we go with else and we set again waiting equal to be true. 147 00:10:39,720 --> 00:10:41,370 So I would want to display my form. 148 00:10:41,670 --> 00:10:47,990 And again, we have set an error and in this case we'll set it back to true. 149 00:10:48,480 --> 00:10:49,860 So I will say it. 150 00:10:50,410 --> 00:10:58,650 So now, of course, once I'm successful, I should see this quiz app displayed on screen, which simply 151 00:10:58,650 --> 00:11:00,780 means that I have my questions. 152 00:11:00,930 --> 00:11:08,340 Now, the way our app is currently set up is that we're Fretilin once the app loads, of course, eventually 153 00:11:08,340 --> 00:11:10,770 that will happen once we submit the form. 154 00:11:11,140 --> 00:11:18,990 But if you can see the quiz app displayed on screen and if you want to double check whether you have 155 00:11:18,990 --> 00:11:21,870 something in state, you can also do that. 156 00:11:22,020 --> 00:11:25,110 So if you go to component's, you look at the app provider. 157 00:11:25,410 --> 00:11:30,140 If in a state you have an array of 10 items, you're good to go. 158 00:11:30,480 --> 00:11:36,840 And now, of course, we can figure out how to start rendering those questions on a screen.