1
00:00:00,750 --> 00:00:01,240
Beautiful.

2
00:00:01,620 --> 00:00:11,130
And once we've got the euro, so some kind of euro that would get us back to questions now, I'd want

3
00:00:11,130 --> 00:00:18,110
to do the dirty work, meaning the time consuming work, where I would want to set up the variables,

4
00:00:18,120 --> 00:00:24,360
the state variables that we are going to use in the app provider again at the moment.

5
00:00:24,360 --> 00:00:29,970
Some of them might not make sense, even though as we're setting up, of course, I'll talk about them

6
00:00:30,180 --> 00:00:30,890
in detail.

7
00:00:31,170 --> 00:00:35,610
But trust me, as we're working with the project, I will go back and I'll say, hey, listen, this

8
00:00:35,610 --> 00:00:41,990
is why we created this value and this is why we set up this specific initial value.

9
00:00:42,300 --> 00:00:48,210
So within the app provider, of course, within our component, I would want to go with the first one

10
00:00:48,210 --> 00:00:49,410
and that is going to be waiting.

11
00:00:49,770 --> 00:00:54,390
So in here, I'm going to say waiting and then set waiting like so.

12
00:00:54,570 --> 00:00:58,760
And that is equal to my use state and I'll set it equal to true.

13
00:00:59,160 --> 00:01:04,350
And what's really cool about this application that we're going to have two values.

14
00:01:04,710 --> 00:01:06,510
One is going to be for waiting.

15
00:01:06,870 --> 00:01:09,740
And essentially that is our setup form.

16
00:01:10,230 --> 00:01:16,590
Remember, I already previously mentioned that there's going to be two cases in our application.

17
00:01:16,920 --> 00:01:24,090
We're going to have one case where we have the quish and only once we complete this form, then I would

18
00:01:24,090 --> 00:01:25,350
want to fetch the questions.

19
00:01:25,800 --> 00:01:28,920
And initially, that's why I'm setting up this waiting to be true.

20
00:01:29,400 --> 00:01:37,230
And in the app, just in this video or in next one, I'll basically check if I'm waiting, then I would

21
00:01:37,230 --> 00:01:43,480
want to display the set up form that is going to be my component with the form and these select boxes.

22
00:01:43,500 --> 00:01:49,900
However, once I'm done waiting, so once I'm good to go, I have set up my you are out.

23
00:01:49,950 --> 00:01:53,030
Then of course I press start and now I display the questions.

24
00:01:53,460 --> 00:01:58,040
So at that point I'm not displaying the form, I'm displaying the actual questions.

25
00:01:58,290 --> 00:02:01,590
So at that point I said this waiting to be false.

26
00:02:01,980 --> 00:02:06,480
So again, this app is going to be unique because we're going to have loading and waiting.

27
00:02:07,080 --> 00:02:09,080
Just don't mix and match both of them.

28
00:02:09,870 --> 00:02:11,600
One is four to form.

29
00:02:12,060 --> 00:02:18,540
So the setup form, the form we're going to use to construct our YORO, which at the moment we have

30
00:02:18,540 --> 00:02:23,730
hardcoded and then loading is like typical loading when we're fetching data.

31
00:02:24,000 --> 00:02:27,480
That's why I'll copy and we'll just change these names here.

32
00:02:27,870 --> 00:02:30,690
I'll say loading again, this is for fetching data.

33
00:02:31,000 --> 00:02:39,300
This has nothing to do with the form so say set and line loading, loading and by default it is going

34
00:02:39,300 --> 00:02:39,930
to be false.

35
00:02:40,260 --> 00:02:50,170
So only waiting by default will be true because I would want to display my form, my form first and

36
00:02:50,190 --> 00:02:51,420
then I'm going to go with questions.

37
00:02:51,780 --> 00:02:53,840
So these are the questions that I'm getting back again.

38
00:02:53,850 --> 00:02:57,570
We can copy and paste and I can just change these values around.

39
00:02:58,110 --> 00:03:03,120
So this is going to be questions and we're going to go set questions.

40
00:03:04,080 --> 00:03:06,030
Set questions.

41
00:03:07,000 --> 00:03:16,240
Questions like so initially, it's going to be a. very good, then we're going to go with IMEX because

42
00:03:16,240 --> 00:03:21,220
we need to keep in mind that in order to display those questions, of course, I would want to start

43
00:03:21,220 --> 00:03:24,970
with question number zero, meaning number one, but it is going to be an array.

44
00:03:24,970 --> 00:03:27,640
So, of course, arrays are zero and next based.

45
00:03:28,120 --> 00:03:29,890
And then I'll just play the next one.

46
00:03:29,890 --> 00:03:30,400
Next one.

47
00:03:30,400 --> 00:03:30,850
Next one.

48
00:03:31,330 --> 00:03:33,730
So in here, I'm going to copy and paste again.

49
00:03:34,270 --> 00:03:40,150
And we're looking for index here and set index set index.

50
00:03:40,570 --> 00:03:45,390
And you can probably already guess that since arrays are zero index based.

51
00:03:45,730 --> 00:03:47,860
And I would want to display the first question.

52
00:03:48,320 --> 00:03:50,640
I'm just going to go with value of zero.

53
00:03:51,130 --> 00:03:58,150
Then we have a number of correct questions as we're working on this, as we're answering questions,

54
00:03:58,510 --> 00:04:02,320
of course, I would want to display the number of correct answers.

55
00:04:02,710 --> 00:04:05,440
So I didn't answer the previous question correctly.

56
00:04:05,860 --> 00:04:09,910
That's why currently my current answers value is zero.

57
00:04:10,090 --> 00:04:12,640
And then we show that we already answered one question.

58
00:04:13,000 --> 00:04:19,480
So in this case, if I'm correct, which I am now, I can say that I have number of correct answers

59
00:04:19,600 --> 00:04:20,680
that is equal to one.

60
00:04:20,920 --> 00:04:27,640
And the total questions that I answered is to that's why in the state there's also going to be value

61
00:04:27,640 --> 00:04:28,870
for correct questions.

62
00:04:29,560 --> 00:04:35,080
And here say correct and set core set.

63
00:04:35,080 --> 00:04:35,620
Correct.

64
00:04:36,780 --> 00:04:40,040
As always, we start with zero because that's going to be our default.

65
00:04:40,540 --> 00:04:42,730
Then there's also going to be error.

66
00:04:43,000 --> 00:04:49,300
And I'll try to remember how to display here, because basically there's going to be cases where the

67
00:04:49,300 --> 00:04:52,470
API cannot generate the question.

68
00:04:52,750 --> 00:04:54,190
So I'll go here with hard.

69
00:04:55,460 --> 00:05:03,440
And I believe it was politics that didn't have those sets of questions, notice here, if we get some

70
00:05:03,440 --> 00:05:09,350
kind of error back from the API where we cannot get the questions, then of course, we generate this

71
00:05:09,350 --> 00:05:09,640
error.

72
00:05:09,950 --> 00:05:16,170
And as a result, we don't display the questions since we didn't get any results back from the API.

73
00:05:16,550 --> 00:05:21,140
That's why also in a state, there's going to be error value again.

74
00:05:21,350 --> 00:05:24,020
We just remove the previous one.

75
00:05:24,980 --> 00:05:31,400
And we go here with error now, by default, of course, error will be false, I will save it.

76
00:05:31,820 --> 00:05:36,350
And then there's two more values now, one I'll skip for now.

77
00:05:36,740 --> 00:05:42,350
I really don't see the point of setting this up because we'll use it at the very end and the other one

78
00:05:42,350 --> 00:05:43,840
is going to be for tomorrow.

79
00:05:44,180 --> 00:05:50,600
My model is somewhat straightforward, where once I answer all the questions, I would want to display

80
00:05:50,600 --> 00:05:55,450
that model that shows me the percentage that I've got seven years ago.

81
00:05:55,460 --> 00:06:05,510
The cost is model open and then we'll set set is model open and that one is equal to use state.

82
00:06:05,750 --> 00:06:07,840
And of course by default, I don't want to show the model.

83
00:06:08,240 --> 00:06:11,930
So that's why I'll set it equal to false then.

84
00:06:12,850 --> 00:06:18,340
I would want to navigate to my value, which at the moment is just hello and of course, we just need

85
00:06:18,340 --> 00:06:21,910
to pass in all of our state values.

86
00:06:22,270 --> 00:06:29,500
So we go back to JavaScript, double caliche, and we start with waiting there and loading loading over

87
00:06:29,500 --> 00:06:29,700
here.

88
00:06:29,710 --> 00:06:33,760
That is another stage value than we had questions.

89
00:06:34,180 --> 00:06:35,890
We also have indexed.

90
00:06:36,190 --> 00:06:40,030
So we have the correct amount of questions.

91
00:06:40,210 --> 00:06:41,770
So correct state value.

92
00:06:42,160 --> 00:06:49,000
Also, I have error whether we have error or not and is modal open.

93
00:06:49,210 --> 00:06:52,050
So it is more open for now.

94
00:06:52,390 --> 00:06:59,290
Of course, there's going to be more functionality in the context that will also pass it down for the

95
00:06:59,290 --> 00:06:59,770
time being.

96
00:06:59,770 --> 00:07:07,590
We just care about these guys and I would want to navigate to the app and just have some general setup.

97
00:07:08,110 --> 00:07:16,330
So in The Objets, I'm going to invoke my use global context, since that is the hook that provides

98
00:07:16,330 --> 00:07:20,070
me access to the context and I'll pull out some values right away.

99
00:07:20,110 --> 00:07:25,540
So waiting I would want to check whether we are waiting or not, whether we are loading.

100
00:07:25,860 --> 00:07:27,400
That is going to be another set up.

101
00:07:27,730 --> 00:07:29,830
Then we're going to go with questions.

102
00:07:30,220 --> 00:07:36,850
So mirror that index, which of course in the beginning is going to be zero, and then for the time

103
00:07:36,850 --> 00:07:40,480
being, just a correct number of answers.

104
00:07:40,780 --> 00:07:45,790
Eventually there's going to be more stuff coming down from the EU's global context.

105
00:07:46,090 --> 00:07:48,780
But for the time being, this is what we're looking for.

106
00:07:49,270 --> 00:07:54,790
And then, like I already previously mentioned, we are going to have multiple returns.

107
00:07:55,120 --> 00:08:00,480
We'll have one for waiting again, don't mix and match waiting and loading.

108
00:08:01,090 --> 00:08:08,110
So when we're loading, I already completed my form and I'm patching those questions like normally we

109
00:08:08,110 --> 00:08:08,320
do.

110
00:08:08,740 --> 00:08:16,960
But if I'm displaying waiting, that just means that I'm waiting for the user to check the check boxes

111
00:08:17,350 --> 00:08:23,560
so then I can construct the euro and then I can fetch and then we're going to be loading certain here.

112
00:08:24,430 --> 00:08:29,290
We're going to say if we are waiting, which we should, because remember, that was our default value.

113
00:08:29,620 --> 00:08:36,460
I'm going to go with the return and we're returning a setup form that if we're loading, then I would

114
00:08:36,460 --> 00:08:38,950
want to display my loading component.

115
00:08:39,070 --> 00:08:46,240
So if we are loading now, of course we go, we are loading component and in here I'm going to go with

116
00:08:46,240 --> 00:08:49,990
loading component, which of course I'm also importing here.

117
00:08:50,260 --> 00:08:58,810
And then if none of them are true, if I'm not waiting, so if I have filled out all my values and I

118
00:08:58,810 --> 00:09:07,030
already submitted the fetch and if I got back my questions, so if I'm not loading for the fetch request

119
00:09:07,030 --> 00:09:11,440
to come back, then of course I would want to display something.

120
00:09:11,470 --> 00:09:13,050
I would want to display those questions.

121
00:09:13,480 --> 00:09:17,110
So at that point I'm going to go with return and then return.

122
00:09:17,260 --> 00:09:21,550
I mean, and for now, let's just say is app.

123
00:09:22,120 --> 00:09:27,100
Of course, eventually there's going to be more data, but we're just going to say who is app?

124
00:09:27,400 --> 00:09:30,040
And we should see the setup form by default.

125
00:09:30,040 --> 00:09:30,460
Why?

126
00:09:30,760 --> 00:09:35,040
Because in the context, of course, this is equal to true.

127
00:09:35,350 --> 00:09:40,060
So if all changes around, I'm not also loading, so I should see this up.

128
00:09:40,510 --> 00:09:42,850
So eventually this is where we'll have our questions.

129
00:09:43,180 --> 00:09:44,590
So set it back to true.

130
00:09:45,160 --> 00:09:49,900
And of course, we can start working on our Futch request.