Okay so now we have all the required data to load the quiz. 1
So first let's create the HTTP request to fetch the quiz. So 2
let's go in source API quiz API and let's create a new static 3
async fetch quiz and here well we are going to expect 4
parameters right and the parameters are going to be of 5
type fetch quiz perams that is basically the state that we 6
have into our app that we have filled in each screens so here 7
well we're going to do basically the same thing that 8
we did above so await axios.get ah we're going to use back 9
quotes here I'm going to use the base URL and the path is 10
slash API. PHP like this so this is going to return 11
something so to choose the right type here well you can go 12
and look at what is returned by the API when you test it 13
directly from the official website and so basically we 14
have this type we have a response code then we have an 15
array of results where one result is of this type here so 16
we can create this type we can create first the type that 17
contains the response code and the results array and then we 18
are going to create a type for each element of the okay? So 19
basically we could call that maybe quiz item. So let's go 20
into our types and so we're going to add two new types. We 21
are going to have the fetch quiz response. And we're going 22
to add the quiz item. 23
So here we have the response code so we're not going to use 24
it but at least we have the right typing number and here we 25
have an array of results so actually an array of quiz item 26
like this and now we have to define what a quiz item is and 27
so it's a category that is a number it's a type and it's of 28
quiz type Okay, if you look at it, it's just or multiple, then 29
we have the the difficulty that is a going to be of type quiz 30
difficulty and as you can see when you have created the right 31
types, everything is going to work as expected, okay? Um so 32
we'll have a question that is going to be a string. We'll 33
have the correct answer 34
that is going to be a string and we'll have the incorrect 35
answers. That is going to be an array of strings. And ta-da 36
Okay so we have created the typing out of this now I'm 37
going to show you something cool okay sometimes you have a 38
back end response that is very complicated okay here we only 39
have I don't know six properties but sometimes when 40
you work with the back end depending on the back end and 41
depending on the response you can have I don't know 20,30 42
properties maybe more and so creating the the typing out of 43
the the response can be a bit long so there is actually a 44
tool that is to TS and I think there is actually an extension 45
for VS code as well and basically here you can send 46
your and it's going to generate the Typescript interface that is 47
related to it so we could have tried it okay we could have for 48
example sent the raw data that we have here okay and we could 49
have sent this here and as you can see ta-da basically we don't 50
have the right names here and here but you can rename it as 51
you want okay but as you can see it's less than what we have 52
done because here the tools cannot know that there is only 53
specific types okay so it can help it can make you earn a bit 54
of time but you will still have to create your own types okay 55
for example here we have created quiz difficulty et 56
cetera but I just wanted to know that this exist and it can 57
save you a bit of time anyway we have the right types now and 58
we can use them into our API so here we're going to have a 59
fetch quiz resp and so well in the end we want to return a 60
promise again because this is an asynchronous function of 61
type quiz item array we want to return an array of items I'm 62
going to import that and finally we have to return the 63
data dot results that is a quiz item array and tala you 64
have correctly typed your fetch quiz but we haven't used the 65
parameters here. So we're going to pass them and so with Axios 66
you can pass the params like this okay you can add an object 67
here and here you can send any kind of parameters okay you can 68
send the actual parameters that you have in your URL but you 69
can also pass header parameters and a lot of things okay so if 70
you want to target the parameters you have to use 71
params like this and actually that's perfect because it has 72
the same name as what we have sent here so it's exactly as if 73
we did that okay? That's just a short hand. Okay we are good 74
with the fetch quiz so now we can go in app. And and and 75
right after we have selected difficulty actually we're not 76
going to go directly to the play screen. First we're going 77
to load the quiz. So I'm going to make that asynchronous and 78
here I'm going to call my fetch quiz. So quiz API dot fetch 79
quiz and here I need to send the parameters. Okay so 80
basically what I have here. So I could use quiz params but 81
it's dangerous because quiz params is currently being set 82
right here so we have to wait one render for the quiz params 83
to be really up to date so we can put that in a used effect 84
or we can just start that before like this call that 85
params like this send the params here and here and we 86
have to wait for that and this is Going to return a quiz. Now 87
we have to start this quiz in a state and then send it to the 88
play component that we are going to create after. This way 89
the play component will be able to use it use the questions 90
etcetera to display them correctly. So we're going to 91
start that in a state. So let's create a state. A new one so 92
I'm going to create a quiz and a set quiz. And here I will 93
have a used state and so basically just an array of quiz 94
items so by default it's going to be empty and here it's going 95
to be an array of quiz item 96
like that okay very good I'm just going to set this right 97
here so actually I may not need to store it before I can just 98
do a set quiz like this okay and well we are good so now we 99
just have to create the play component so we can create a 100
new one that is going to be for example play quiz. TSX it's 101
going to be a very basic component for now so play quiz 102
is going to receive a quiz. That is going to be an array of 103
quiz item. Like this okay for now I'm just going to return 104
play and I'm going to log P dot quiz so we can really see that 105
we have everything that we need inside. Now I'm going to call 106
that right here and replace the fragment. We're going to import 107
it and as you can see it's not happy because we have to send 108
the quiz. So quiz equal the quiz state. All right? So let's 109
see if it's working or not. So I'm going to set a 15 question 110
on the category Japanese anime and manga and I'm going to set 111
it to easy play and ta-da yes we are on the play screen and 112
we have all our data here with all the questions so perfect 113
just be careful sometimes if you ask for example for I don't 114
know 30 question in a category that doesn't have enough 115
questions it can happen for example I think that which one 116
is that? I think it's entertainment, musical and 117
theaters. If you click on this one, if you set medium 118
yes as you can see the medium doesn't return anything okay so 119
the APA cannot return 30 question in medium for this 120
category so we have to handle that okay so we just going to 121
make sure that here the response actually has enough 122
data so I'm going to do a quiz resp I'm going to stall the 123
result use it after and just check that quiz resp.length is 124
greater than zero. If it is then we're going to do all of 125
that. Otherwise we're going to print a message saying that we 126
couldn't find enough question for this category. So couldn't 127
find I'm going to use backwards here. Couldn't find params dot 128
questions for this category and we're going to write restarting 129
game restarting game and we're going to go back to the first 130
screen so the one where we set the question number for example 131
set question 132
and technically if I refresh let's say we ask for 30 133
question in entertainment musical and theaters in medium 134
play and couldn't find 30 questions for this category 135
restarting the game and we're back to here so we're good okay 136
so now technically we can start building the play component 137
okay we have the data we have everything that we need so 138
let's do that in the next one