Beautiful ones, we've got some state values in the app provider now would want to fetch the questions
again, we already have the URL, so I just need to set up the function that does that and of course,
invoke.
Now, what's really cool about this project is that we're going to use axios for that.
So if you're not familiar with Axios, it is an extremely popular library that handles the AJAX requests.
And if you want to find out more, just type axios here and you can add an RPM if you want.
And essentially you'll navigate to their docs and you can take a look at documentation.
Now, I can also right away tell you that it is extremely straightforward.
We just need to install it, which of course I already did.
So we go with NPM install and then Axios and by default we're going to perform a get request.
So in order here they say axios and then they'll get and then we pass in the euro and of course we're
getting back to promise.
So we go with that then.
Or catch.
But by default, it is going to be a get request so we can simply go with Axios and then pass in the
euro.
Now, the reason why I added Axios to this project.
So you get used to it because honestly, for this particular project, there was no real benefit of
using because we could definitely set everything up using fetch the built and fetch API.
However, when your project gets bigger, so that's something that's going to happen, of course, later
on, once we build bigger project, it's a bit more convenient to use axios.
So this is just a trial run where I would want you to get comfortable with Axios again.
You need to install it and then of course you would need to import from Axis, which is something that
we already have in the context.
Yes, vulnerable.
Scroll down.
And right after the model set up, our questions function so concerned that such questions over here
and it's going to be, I think, and will pass in the URL and then within a function body, I'm going
to go with set loading.
True.
So set loading is going to be true.
And I also want to set my wedding to be false as well, because once I start fetching the questions,
then of course I'll close the form and we'll show that we are loading.
So in this case, what I would want to do is to set set waiting to be false.
So set waiting is going to be equal to false.
So once I'm done with both of these things now, I'd want to wait for response.
So I'm going to go with const and nonresponse.
And in this case, we're going to use Zacchaeus.
Like I said, by default, it set up as get requests so we don't need to and that dot get and we just
pass in the URL.
So in my case, we'll pass it on the same Yooralla passing into the future questions, then it returns
a promise.
So in this case.
I can just add that catch and I would want to control the air, so it's here to log an error.
So and once we have that one out of the way, of course, I would want to log my response on this case,
since I know that it is returning a promise.
I also need to add a weight on line.
Let's consider log the response, the I'm going to set up use effect, but I can honestly say that we
will refactor our application later where we will fetch questions when we submit the setup form.
Again, let me go back to complete application.
Notice that this is our set up form and our one of those questions.
Only when I submit the form, not when I around the user, of course, at the moment, since I would
want to start dealing with questions right from the get go.
So I would want to build this part of the app first.
So that's why I will set up the user.
But later we will refactor our application where we will fetch those questions only when we submit our
setup form.
So technically, of course, the user fact is going to be unnecessary, not where I will refactor our
application and remove it a little bit later on.
So that's our user fact.
And I'm just going to go with empty dependency error.
Essentially, when my app loads, I would want to go with fetch and then questions and now of course
I'll pass in that temp URL.
So I pass that into the fetch questions line here.
Of course I have access and then I grab that Yoro and of course I'm getting some kind of response.
And then notice I set my waiting because that's why I can see the loading.
And of course loading is equal to true.
And of course we need to navigate the bigger screen.
I'm going to go with localhost and then three thousand, and once I'm here, I'm just going to inspect
my console and in there I should see the object.
So this is what we're getting back from the Axios and we can find their bunch of useful info, whether
that is config, whether that is headers request and status.
But the one that we are looking for is data.
So within the object, we're looking for the data and then we're looking for these results.
So the array of 10 items, that's what we are looking for.
And if you want to check it out, how it's going to work, if we have the error, you can just scroll
up over here and then let's add some extra character.
Let's see what is going to be our response here on this case.
Notice I'm getting the right away error and my response is undefined.
And what that means that in my application, where I have four questions, I'm going to set up the condition,
the if condition, where I'm going to check.
If the response is true, then beautiful, then I'm going to do something with my data.
However, if I'm not getting anything back, well, then we won't do anything.
OK, so that's the whole point here.
Why would go with if response and only then we'll deal with our response.
So if the response is there, then I would want to grab my data, which of course is going to be an
array.
If not, then I won't do anything soon here.
Let's go back and let's fix our URL.
So so fix it here.
And you know what?
The only thing that I would want to do, probably if there is an error, I would just want to set it
back to the waiting.
So in order here we are waiting.
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.
And of course, let's check our response and more specifically, let's just get there.
So Quran's data is equal to response and data and on our results like so.
And let's take a look at our results results over here and let's just do it with console log.
So console log the data and there it now have array of 10 items.
Now, please remember one thing where we also have an option for having error.
So there's going to be some Yarl's that don't provide any values and you don't have to do it along.
But I will still navigate back to my API 100 questions and I'll check for the politics because I know
that that one generates that error.
And as far as difficulty, I'm going to go with medium, so generate the URL than here.
It says the value must be less than 50.
OK, let's take a look at the 50 here and generate the URL.
And at this point it just gives me 10.
I want I want my apologies.
Let's go over here with 50 again.
I'm going to go back to politics.
My apologies.
Going to take a little bit longer, generate euro.
But it is important for me to showcase what is going to be the response where we would want to throw
the error scenarios.
Here we have a response code of one and result is empty array.
So those are two options.
Either we're going to get questions which we're going to display or we're going to get this error.
And then, of course, I still would want to display my form.
So I wouldn't want to go to the questions, since, of course, they're not there and I would want to
showcase the error.
So that's why I will navigate back again.
You don't have to do it.
Just follow along as far as watching.
And then I'll copy and paste and now let's take a look at our response here so we start to notice the
array is empty.
All right.
And now, of course, I could check if data length is bigger than zero.
That means that I'm getting my questions back.
Correct.
And it is sitting in the results.
Now, if that is not the case, if data length is not bigger than zero, well, then I know that I'm
not getting any questions back.
Correct.
So we'll navigate here.
And I'm going to go back to the previous URL, since that's the one we're going to use throughout the
project until we set up our own.
And inside of this, if I'll make another one and I'll say if data length is bigger than zero, so data
length length is bigger than zero than I would want to do something, then I would want to set my questions
to the response data and result.
So meaning in this case, I can just go there, of course, and I would want to set loading the false
set loading is equal to false as well as set waiting is equal to false or here and the last one is set.
Error is equal to false because we need to keep in mind that of course, if we generate an hour.
And then if we're successful, I would want to wipe out that previous error, so in here I'm going to
say false.
Now, if the data length is not bigger and zero, meaning if the API cannot generate those questions,
then we go with else and we set again waiting equal to be true.
So I would want to display my form.
And again, we have set an error and in this case we'll set it back to true.
So I will say it.
So now, of course, once I'm successful, I should see this quiz app displayed on screen, which simply
means that I have my questions.
Now, the way our app is currently set up is that we're Fretilin once the app loads, of course, eventually
that will happen once we submit the form.
But if you can see the quiz app displayed on screen and if you want to double check whether you have
something in state, you can also do that.
So if you go to component's, you look at the app provider.
If in a state you have an array of 10 items, you're good to go.
And now, of course, we can figure out how to start rendering those questions on a screen.