Beautiful.
And once we've got the euro, so some kind of euro that would get us back to questions now, I'd want
to do the dirty work, meaning the time consuming work, where I would want to set up the variables,
the state variables that we are going to use in the app provider again at the moment.
Some of them might not make sense, even though as we're setting up, of course, I'll talk about them
in detail.
But trust me, as we're working with the project, I will go back and I'll say, hey, listen, this
is why we created this value and this is why we set up this specific initial value.
So within the app provider, of course, within our component, I would want to go with the first one
and that is going to be waiting.
So in here, I'm going to say waiting and then set waiting like so.
And that is equal to my use state and I'll set it equal to true.
And what's really cool about this application that we're going to have two values.
One is going to be for waiting.
And essentially that is our setup form.
Remember, I already previously mentioned that there's going to be two cases in our application.
We're going to have one case where we have the quish and only once we complete this form, then I would
want to fetch the questions.
And initially, that's why I'm setting up this waiting to be true.
And in the app, just in this video or in next one, I'll basically check if I'm waiting, then I would
want to display the set up form that is going to be my component with the form and these select boxes.
However, once I'm done waiting, so once I'm good to go, I have set up my you are out.
Then of course I press start and now I display the questions.
So at that point I'm not displaying the form, I'm displaying the actual questions.
So at that point I said this waiting to be false.
So again, this app is going to be unique because we're going to have loading and waiting.
Just don't mix and match both of them.
One is four to form.
So the setup form, the form we're going to use to construct our YORO, which at the moment we have
hardcoded and then loading is like typical loading when we're fetching data.
That's why I'll copy and we'll just change these names here.
I'll say loading again, this is for fetching data.
This has nothing to do with the form so say set and line loading, loading and by default it is going
to be false.
So only waiting by default will be true because I would want to display my form, my form first and
then I'm going to go with questions.
So these are the questions that I'm getting back again.
We can copy and paste and I can just change these values around.
So this is going to be questions and we're going to go set questions.
Set questions.
Questions like so initially, it's going to be a. very good, then we're going to go with IMEX because
we need to keep in mind that in order to display those questions, of course, I would want to start
with question number zero, meaning number one, but it is going to be an array.
So, of course, arrays are zero and next based.
And then I'll just play the next one.
Next one.
So in here, I'm going to copy and paste again.
And we're looking for index here and set index set index.
And you can probably already guess that since arrays are zero index based.
And I would want to display the first question.
I'm just going to go with value of zero.
Then we have a number of correct questions as we're working on this, as we're answering questions,
of course, I would want to display the number of correct answers.
So I didn't answer the previous question correctly.
That's why currently my current answers value is zero.
And then we show that we already answered one question.
So in this case, if I'm correct, which I am now, I can say that I have number of correct answers
that is equal to one.
And the total questions that I answered is to that's why in the state there's also going to be value
for correct questions.
And here say correct and set core set.
Correct.
As always, we start with zero because that's going to be our default.
Then there's also going to be error.
And I'll try to remember how to display here, because basically there's going to be cases where the
API cannot generate the question.
So I'll go here with hard.
And I believe it was politics that didn't have those sets of questions, notice here, if we get some
kind of error back from the API where we cannot get the questions, then of course, we generate this
error.
And as a result, we don't display the questions since we didn't get any results back from the API.
That's why also in a state, there's going to be error value again.
We just remove the previous one.
And we go here with error now, by default, of course, error will be false, I will save it.
And then there's two more values now, one I'll skip for now.
I really don't see the point of setting this up because we'll use it at the very end and the other one
is going to be for tomorrow.
My model is somewhat straightforward, where once I answer all the questions, I would want to display
that model that shows me the percentage that I've got seven years ago.
The cost is model open and then we'll set set is model open and that one is equal to use state.
And of course by default, I don't want to show the model.
So that's why I'll set it equal to false then.
I would want to navigate to my value, which at the moment is just hello and of course, we just need
to pass in all of our state values.
So we go back to JavaScript, double caliche, and we start with waiting there and loading loading over
here.
That is another stage value than we had questions.
We also have indexed.
So we have the correct amount of questions.
So correct state value.
Also, I have error whether we have error or not and is modal open.
So it is more open for now.
Of course, there's going to be more functionality in the context that will also pass it down for the
time being.
We just care about these guys and I would want to navigate to the app and just have some general setup.
So in The Objets, I'm going to invoke my use global context, since that is the hook that provides
me access to the context and I'll pull out some values right away.
So waiting I would want to check whether we are waiting or not, whether we are loading.
That is going to be another set up.
Then we're going to go with questions.
So mirror that index, which of course in the beginning is going to be zero, and then for the time
being, just a correct number of answers.
Eventually there's going to be more stuff coming down from the EU's global context.
But for the time being, this is what we're looking for.
And then, like I already previously mentioned, we are going to have multiple returns.
We'll have one for waiting again, don't mix and match waiting and loading.
So when we're loading, I already completed my form and I'm patching those questions like normally we
do.
But if I'm displaying waiting, that just means that I'm waiting for the user to check the check boxes
so then I can construct the euro and then I can fetch and then we're going to be loading certain here.
We're going to say if we are waiting, which we should, because remember, that was our default value.
I'm going to go with the return and we're returning a setup form that if we're loading, then I would
want to display my loading component.
So if we are loading now, of course we go, we are loading component and in here I'm going to go with
loading component, which of course I'm also importing here.
And then if none of them are true, if I'm not waiting, so if I have filled out all my values and I
already submitted the fetch and if I got back my questions, so if I'm not loading for the fetch request
to come back, then of course I would want to display something.
I would want to display those questions.
So at that point I'm going to go with return and then return.
I mean, and for now, let's just say is app.
Of course, eventually there's going to be more data, but we're just going to say who is app?
And we should see the setup form by default.
Why?
Because in the context, of course, this is equal to true.
So if all changes around, I'm not also loading, so I should see this up.
So eventually this is where we'll have our questions.
So set it back to true.
And of course, we can start working on our Futch request.