So now we can work on the set quiz difficulty. So you can 1
create a new feature, it's going to be set quiz difficulty 2
for now for me. Uh it's just an empty component and I'm going 3
to call that in my app right here. 4
Okay. Perfect. So we can actually probably copy paste a 5
bit of code here on. So I'm just going to take what I have 6
in set quiz category. I'm going to copy almost everything that 7
I have in the return. Actually I'm going to copy the all 8
return. I'm going to adapt it. Right after. So we can remove 9
everything that is related to the radio group for now and yes 10
going to keep the rest so I'm going to do an import all the 11
missing ones and I'm going again to do that later like 12
this so here it will be which difficulty and here well the 13
next step is actually to play so let's call that 14
play. 15
So technically yes okay we're good. So basically now we just 16
want a column that is going to contain four radio okay with a 17
mixed easy medium and hard. So we basically here need again a 18
radio group. So we can set one and we also want to start a 19
current difficulty right? So I'm going to create a state. 20
Here we'll have the difficulty set current difficulty. With a 21
useState so this is going to be a state of type quiz 22
difficulty and by default we could probably put inside the 23
mixed difficulty so the mixed difficulty that for now I think 24
is yes an empty string so now we're going to send this 25
difficulty to the radio group as value like this on change we 26
are going to update the difficulty so we're going to 27
send the send current difficulty and what is wrong 28
okay the type is not going to work because the radio group is 29
sending a string but we are expecting a quiz difficulty 30
into our set current difficulty so maybe just to please the 31
radio group since we know that this is actually behind the 32
scene string we can say that don't worry this is actually a 33
function with a parameter difficulty that is a string 34
okay and it return void okay so just to please the onChange 35
event here okay because it takes this type but it doesn't 36
matter because behind the scene we are using an enum but the 37
enum is actually a string okay remember that here it's a 38
string Okay now we just need to loop over all the difficulties 39
that we have in here and display the radio list. So 40
we're going to display a radio list like we did before. And 41
here we're going to loop over the enums value so we're going 42
to use object dot values and here we have to pass an object 43
so we're going to pass the quiz difficulty num and this way 44
we'll have an array of all the values so we'll have empty 45
string easy medium and hard okay we'll have all these 46
values in an array so this way we can map over it and so for 47
each one we'll have a difficulty that will be of type 48
quiz difficulty so one element of quiz difficulty and inside 49
we can return a radio like this so for the value we will have 50
the difficulty we'll have to send a key so I'm going to set 51
the difficulty again because we are in a loop and for the name 52
we're going to write difficulty but it's in a lower case for 53
now so we want to capitalize it so to that I'm going to use 54
some CSS I'm going to wrap this in a span I and I'm just going 55
to add a bit of style and I will use a text transform and I 56
will use capitalize. Like this okay and I'm going to use this 57
radio list inside my radio group that expect children's 58
like this okay, did I miss something ? Cannot find radio oh 59
okay I can import it alright so let's see mixed and okay so we 60
have our values so they are in line okay and yes obviously the 61
first one is an empty string so it's not going to be displayed 62
so we have to handle this case so if the difficulty is equal 63
to quiz difficulty that mixed then we're going to write 64
mixed. Otherwise, we're going to use the difficulty. And this 65
way yes we have mixed now now we want to center that and have 66
them in column so we're going to say that we want a vertical 67
stack of elements so you can use V stack from chakra and 68
ta-da now they are in columns and we are good well we are 69
most good because we want to end of the case where we click 70
and move to the next screen and we also want to save the 71
difficulty again exactly like we did before so again we are 72
going to expect here and onclick next that is going to 73
be a function that returns void and here now we are going to 74
send the current difficulty so we'll add the difficulty that 75
is going to be of type quiz difficulty and we are going to 76
call that right here P dot onclick next and we're going to 77
send the difficulty meaning that now in app this is not 78
going to compile anymore we have to use the onclick next 79
again that is a function that is going to have here 80
difficulty of type quiz difficulty and again again 81
again we can copy that here we're going to set the 82
difficulty with the difficulty that has been sent right here I 83
made a typo here okay and we're going to move to the play 84
screen okay so we are good so technically this should be 85
working if I click on easy and go play as you can see yes 86
indeed we have the easy and now if I set a mixed difficulty 87
here okay mixed and yes we have an empty string for difficulty 88
so this working fine so we have all the data required to create 89
the quiz now so in the next video we are going to load the 90
quiz and then start creating the play screen so let's do 91
that in the next one