Okay so in this video we're going to create the state so 1
the object that is going to contain all the parameters for 2
the request that we're going to perform to reach the trivia API 3
and so we have to build all the params and so all the params 4
are going to evolve as we navigate through each setup 5
screen. Okay? So let's go in app here and let's create a new 6
state that is going to be qui Params and set quiz params. And 7
we're going to prepare a state. We have to define a type for 8
these parameters. So what we could do is we could probably 9
create a new folder that is going to be types and we're 10
going to put all the types that are related to quiz so through 11
trivia API et cetera into a quiz dash type. TS for example. 12
So we want to create a type for here. So maybe we could call 13
that for example fetch quiz params. I'm going to make an 14
interface like this and I'm going to export that and that's 15
the type that I'm going to use right here and so you have to 16
import it so what do we have inside we have the amount of 17
question remember and it's a number we have the category 18
that is a string we have the difficulty so difficulty is 19
probably an enam since it can be easy medium hard or an empty 20
string. So maybe we can create a quiz difficulty. It's an so 21
we'll have easy there's going to be easy in lowercase because 22
that's what we're going to send to the API we'll have medium 23
hard and we can send an empty string and I'm calling it mixed 24
because if we send that we're going to have several questions 25
with mixed difficulties so okay that should do it and so we're 26
going to send that here and finally we'll have the type so 27
you remember it can be multiple or boolean so that's the type 28
of quiz so again it can be an and we'll have quiz type I and 29
again so it can be multiple so we have to send multiple like 30
this or it can be boolean it can be like this and again we 31
can have mixed and we're going to send an empty string like 32
this so in our case we always going to send multiple but this 33
way we have the correct type so this will be our quiz type and 34
I think we're good all right so now what do we want we want to 35
fill this quiz params and specifically we want to set the 36
amount value here. So it means that here we want to be able to 37
send set quiz params to this component so what we're going 38
to do is first we're going to go in this component and we're 39
going to create a button that is going to allow us to go on 40
the next screen and also is going to allow us to save the 41
amount. So I'm going to create a button here. So we're going 42
to create a button here from so you can import it. I'm going to 43
write set category because we're going to use this button 44
to move to the next screen. Uh it's going to have a position 45
absolute. It's going to be at 80% of the top. 46
And I don't know maybe 10% from the right and it will have a 47
right icon and here you can send an icon and so you have a 48
set of icon that are provided by chakra and I'm going to use 49
the arrow forward icon that you can import from chakra icons. 50
So make sure that you have installed that but I think we 51
did at the beginning. Okay, so what do we have? Yep, not bad. 52
Cool. Now, when we're going to click on this button we want to 53
do something we want to use the callback that we're going to 54
receive so it means that at the very top here we're going to 55
receive a function so I'm going to call this function for 56
example on click next and it's going to be of type function 57
that returns nothing okay and we are going to send the slider 58
value here okay so the amount of question that is going to be 59
a number okay And so I'm going to call this function when I'm 60
going to receive it. P dot on tick next and I'm going to send 61
the slider value. Okay? So now it means that here in app a 62
function is expected okay I have to send an onclick next 63
function and that is pretty easy we're just going to send 64
the set quiz params but not only okay because we're not 65
going to set the all object here so here we're going to 66
receive an amount that is a number we're going to write 67
something. So we are going to do a set quiz params and 68
basically we're just going to update the amount. So we're 69
going to say that we want to keep everything that was in 70
quiz params but we just want to override the amount here by 71
setting the amount inside and so you can use a short end 72
here. By doing that. Okay? And well the type undefined is not 73
assignable to string. So yeah because quiz params are copying 74
to what we have written here is by default undefined. So we're 75
saying that we want to maybe put undefined here and only set 76
an amount which is not authorized by the fetch quiz 77
params. So we have two choices here. Either we go in fetch 78
quiz params and say that everything is possibly not 79
defined at the beginning like this and this way this is going 80
to work okay that's a possibility but that's a bit 81
annoying because now every time we're going to do a dot amount 82
or dot category et cetera we will have to do check to make 83
sure that it's defined so maybe what we could do is say that 84
it's it has to be defined but just set initial value here 85
okay this way it will never be considered as undefined like it 86
is right now so we can maybe prepare a default value for 87
example in amount zero a category that could be empty we 88
could have a difficulty so we could set mixed diffiiculty for 89
example so quiz difficulty oh I think we haven't exported that 90
so let's go here and export this and export this as well 91
and so here maybe we can set the quiz difficulty. mixed by 92
default and the type that could be quiz type. well multiple 93
because that's the only thing that we're going to send so 94
technically there is no way that we send this okay because 95
we will have to change at least the amount the category and the 96
difficulty so just so we have a default value and this way this 97
is going to work so cool now when we're going to click on 98
the button we're going to basically save the amount but 99
we want also to go to the next so we're just going to do a set 100
step and move to the next one that is set question category 101
by running that we should then move to this so we have to 102
prepare a new component here so I have already done it you can 103
go in feature and as you can see I have created a set question 104
category here that is for now an empty component so you can 105
do the same and I'm going to take this component go in app 106
and call it right here to make sure that it's indeed working 107
I'm going to import it okay so now let's refresh now let's say 108
I set it to 15 and go on set category so technically we have 109
moved to the next step and technically in the state of app 110
now we should have the correct amount okay and you can just 111
ensure that it's working by console logging here the quiz 112
params so let's make it's working console and yeah for 113
now the amount is 15 and so now when we're going to move to the 114
next step we're going to update each part of the state alright 115
okay so let's continue in the next one