0
1
00:00:00,221 --> 00:00:04,721
Okay so now we have all the
required data to load the quiz.
1

2
00:00:04,721 --> 00:00:10,481
So first let's create the HTTP
request to fetch the quiz. So
2

3
00:00:10,481 --> 00:00:16,641
let's go in source API quiz API
and let's create a new static
3

4
00:00:16,641 --> 00:00:23,681
async fetch quiz and here well
we are going to expect
4

5
00:00:23,681 --> 00:00:27,121
parameters right and the
parameters are going to be of
5

6
00:00:27,121 --> 00:00:33,121
type fetch quiz perams that is
basically the state that we
6

7
00:00:33,121 --> 00:00:37,521
have into our app that we have
filled in each screens so here
7

8
00:00:37,521 --> 00:00:40,001
well we're going to do
basically the same thing that
8

9
00:00:40,001 --> 00:00:46,401
we did above so await axios.get ah we're going to use back
9

10
00:00:46,401 --> 00:00:52,521
quotes here I'm going to use
the base URL and the path is
10

11
00:00:52,521 --> 00:00:59,241
slash API. PHP like this so
this is going to return
11

12
00:00:59,241 --> 00:01:04,361
something so to choose the
right type here well you can go
12

13
00:01:04,361 --> 00:01:07,321
and look at what is returned by
the API when you test it
13

14
00:01:07,321 --> 00:01:10,441
directly from the official
website and so basically we
14

15
00:01:10,441 --> 00:01:12,761
have this type we have a
response code then we have an
15

16
00:01:12,761 --> 00:01:18,601
array of results where one
result is of this type here so
16

17
00:01:18,601 --> 00:01:21,401
we can create this type we can
create first the type that
17

18
00:01:21,401 --> 00:01:24,121
contains the response code and
the results array and then we
18

19
00:01:24,121 --> 00:01:28,501
are going to create a type for
each element of the okay? So
19

20
00:01:28,501 --> 00:01:33,841
basically we could call that
maybe quiz item. So let's go
20

21
00:01:33,841 --> 00:01:37,761
into our types and so we're
going to add two new types. We
21

22
00:01:37,761 --> 00:01:45,021
are going to have the fetch
quiz response. And we're going
22

23
00:01:45,021 --> 00:01:52,781
to add the quiz item.
23

24
00:01:53,961 --> 00:01:58,821
So here we have the response
code so we're not going to use
24

25
00:01:58,821 --> 00:02:05,301
it but at least we have the
right typing number and here we
25

26
00:02:05,301 --> 00:02:09,501
have an array of results so
actually an array of quiz item
26

27
00:02:09,501 --> 00:02:14,661
like this and now we have to
define what a quiz item is and
27

28
00:02:14,661 --> 00:02:20,821
so it's a category that is a
number it's a type and it's of
28

29
00:02:20,821 --> 00:02:30,421
quiz type Okay, if you look at
it, it's just or multiple, then
29

30
00:02:30,421 --> 00:02:34,501
we have the the difficulty that
is a going to be of type quiz
30

31
00:02:34,501 --> 00:02:38,181
difficulty and as you can see
when you have created the right
31

32
00:02:38,181 --> 00:02:42,901
types, everything is going to
work as expected, okay? Um so
32

33
00:02:42,901 --> 00:02:47,701
we'll have a question that is
going to be a string. We'll
33

34
00:02:47,701 --> 00:02:50,661
have the correct answer
34

35
00:02:52,721 --> 00:02:59,381
that is going to be a string
and we'll have the incorrect
35

36
00:02:59,381 --> 00:03:05,681
answers. That is going to be an
array of strings. And ta-da
36

37
00:03:05,681 --> 00:03:10,561
Okay so we have created the
typing out of this now I'm
37

38
00:03:10,561 --> 00:03:15,041
going to show you something
cool okay sometimes you have a
38

39
00:03:15,041 --> 00:03:18,961
back end response that is very
complicated okay here we only
39

40
00:03:18,961 --> 00:03:22,561
have I don't know six
properties but sometimes when
40

41
00:03:22,561 --> 00:03:25,201
you work with the back end
depending on the back end and
41

42
00:03:25,201 --> 00:03:27,921
depending on the response you
can have I don't know 20,30
42

43
00:03:27,921 --> 00:03:32,641
properties maybe more and so
creating the the typing out of
43

44
00:03:32,641 --> 00:03:37,001
the the response can be a bit
long so there is actually a
44

45
00:03:37,001 --> 00:03:41,801
tool that is to TS and I think
there is actually an extension
45

46
00:03:41,801 --> 00:03:45,001
for VS code as well and
basically here you can send
46

47
00:03:45,001 --> 00:03:48,921
your and it's going to generate
the Typescript interface that is
47

48
00:03:48,921 --> 00:03:51,961
related to it so we could have
tried it okay we could have for
48

49
00:03:51,961 --> 00:03:58,441
example sent the raw data that
we have here okay and we could
49

50
00:03:58,441 --> 00:04:02,361
have sent this here and as you
can see ta-da basically we don't
50

51
00:04:02,361 --> 00:04:05,081
have the right names here and
here but you can rename it as
51

52
00:04:05,081 --> 00:04:09,341
you want okay but as you can
see it's less than what we have
52

53
00:04:09,341 --> 00:04:12,141
done because here the tools
cannot know that there is only
53

54
00:04:12,141 --> 00:04:16,701
specific types okay so it can
help it can make you earn a bit
54

55
00:04:16,701 --> 00:04:19,821
of time but you will still have
to create your own types okay
55

56
00:04:19,821 --> 00:04:22,461
for example here we have
created quiz difficulty et
56

57
00:04:22,461 --> 00:04:25,981
cetera but I just wanted to
know that this exist and it can
57

58
00:04:25,981 --> 00:04:30,541
save you a bit of time anyway
we have the right types now and
58

59
00:04:30,541 --> 00:04:35,341
we can use them into our API so
here we're going to have a
59

60
00:04:35,341 --> 00:04:42,041
fetch quiz resp and so well in
the end we want to return a
60

61
00:04:42,041 --> 00:04:45,241
promise again because this is
an asynchronous function of
61

62
00:04:45,241 --> 00:04:52,841
type quiz item array we want to
return an array of items I'm
62

63
00:04:52,841 --> 00:04:55,961
going to import that and
finally we have to return the
63

64
00:04:55,961 --> 00:05:02,521
data dot results that is a
quiz item array and tala you
64

65
00:05:02,521 --> 00:05:07,721
have correctly typed your fetch
quiz but we haven't used the
65

66
00:05:07,721 --> 00:05:11,161
parameters here. So we're going
to pass them and so with Axios
66

67
00:05:11,161 --> 00:05:14,441
you can pass the params like
this okay you can add an object
67

68
00:05:14,441 --> 00:05:17,801
here and here you can send any
kind of parameters okay you can
68

69
00:05:17,801 --> 00:05:22,281
send the actual parameters that
you have in your URL but you
69

70
00:05:22,281 --> 00:05:26,521
can also pass header parameters
and a lot of things okay so if
70

71
00:05:26,521 --> 00:05:28,441
you want to target the
parameters you have to use
71

72
00:05:28,441 --> 00:05:32,281
params like this and actually
that's perfect because it has
72

73
00:05:32,281 --> 00:05:35,961
the same name as what we have
sent here so it's exactly as if
73

74
00:05:35,961 --> 00:05:43,341
we did that okay? That's just a
short hand. Okay we are good
74

75
00:05:43,341 --> 00:05:49,681
with the fetch quiz so now we
can go in app. And and and
75

76
00:05:49,681 --> 00:05:53,361
right after we have selected
difficulty actually we're not
76

77
00:05:53,361 --> 00:05:57,361
going to go directly to the
play screen. First we're going
77

78
00:05:57,361 --> 00:06:04,321
to load the quiz. So I'm going
to make that asynchronous and
78

79
00:06:04,321 --> 00:06:09,601
here I'm going to call my fetch
quiz. So quiz API dot fetch
79

80
00:06:09,601 --> 00:06:14,001
quiz and here I need to send
the parameters. Okay so
80

81
00:06:14,001 --> 00:06:18,481
basically what I have here. So
I could use quiz params but
81

82
00:06:18,481 --> 00:06:23,781
it's dangerous because quiz
params is currently being set
82

83
00:06:23,781 --> 00:06:28,581
right here so we have to wait
one render for the quiz params
83

84
00:06:28,581 --> 00:06:32,501
to be really up to date so we
can put that in a used effect
84

85
00:06:32,501 --> 00:06:37,381
or we can just start that
before like this call that
85

86
00:06:37,381 --> 00:06:46,981
params like this send the
params here and here and we
86

87
00:06:46,981 --> 00:06:53,861
have to wait for that and this
is Going to return a quiz. Now
87

88
00:06:53,861 --> 00:06:57,781
we have to start this quiz in a
state and then send it to the
88

89
00:06:57,781 --> 00:07:01,301
play component that we are
going to create after. This way
89

90
00:07:01,301 --> 00:07:04,341
the play component will be able
to use it use the questions
90

91
00:07:04,341 --> 00:07:07,781
etcetera to display them
correctly. So we're going to
91

92
00:07:07,781 --> 00:07:13,661
start that in a state. So let's
create a state. A new one so
92

93
00:07:13,661 --> 00:07:19,581
I'm going to create a quiz and
a set quiz. And here I will
93

94
00:07:19,581 --> 00:07:23,101
have a used state and so
basically just an array of quiz
94

95
00:07:23,101 --> 00:07:27,421
items so by default it's going
to be empty and here it's going
95

96
00:07:27,421 --> 00:07:32,221
to be an array of quiz item
96

97
00:07:32,721 --> 00:07:38,901
like that okay very good I'm
just going to set this right
97

98
00:07:38,901 --> 00:07:42,661
here so actually I may not need
to store it before I can just
98

99
00:07:42,661 --> 00:07:49,221
do a set quiz like this okay
and well we are good so now we
99

100
00:07:49,221 --> 00:07:54,501
just have to create the play
component so we can create a
100

101
00:07:54,501 --> 00:08:00,421
new one that is going to be for
example play quiz. TSX it's
101

102
00:08:00,421 --> 00:08:05,721
going to be a very basic
component for now so play quiz
102

103
00:08:05,721 --> 00:08:11,441
is going to receive a quiz.
That is going to be an array of
103

104
00:08:11,441 --> 00:08:18,861
quiz item. Like this okay for
now I'm just going to return
104

105
00:08:18,861 --> 00:08:25,721
play and I'm going to log P dot
quiz so we can really see that
105

106
00:08:25,721 --> 00:08:29,721
we have everything that we need
inside. Now I'm going to call
106

107
00:08:29,721 --> 00:08:36,341
that right here and replace the
fragment. We're going to import
107

108
00:08:36,341 --> 00:08:40,021
it and as you can see it's not
happy because we have to send
108

109
00:08:40,021 --> 00:08:46,741
the quiz. So quiz equal the
quiz state. All right? So let's
109

110
00:08:46,741 --> 00:08:53,581
see if it's working or not. So
I'm going to set a 15 question
110

111
00:08:53,581 --> 00:09:00,741
on the category Japanese anime
and manga and I'm going to set
111

112
00:09:00,741 --> 00:09:05,381
it to easy play and ta-da yes
we are on the play screen and
112

113
00:09:05,381 --> 00:09:11,701
we have all our data here with
all the questions so perfect
113

114
00:09:11,701 --> 00:09:16,741
just be careful sometimes if
you ask for example for I don't
114

115
00:09:16,741 --> 00:09:19,941
know 30 question in a category
that doesn't have enough
115

116
00:09:19,941 --> 00:09:25,361
questions it can happen for
example I think that which one
116

117
00:09:25,361 --> 00:09:29,321
is that? I think it's
entertainment, musical and
117

118
00:09:29,321 --> 00:09:35,441
theaters. If you click on this
one, if you set medium
118

119
00:09:36,221 --> 00:09:41,361
yes as you can see the medium
doesn't return anything okay so
119

120
00:09:41,361 --> 00:09:44,961
the APA cannot return 30
question in medium for this
120

121
00:09:44,961 --> 00:09:49,041
category so we have to handle
that okay so we just going to
121

122
00:09:49,041 --> 00:09:53,521
make sure that here the
response actually has enough
122

123
00:09:53,521 --> 00:09:59,601
data so I'm going to do a quiz
resp I'm going to stall the
123

124
00:09:59,601 --> 00:10:10,761
result use it after and just
check that quiz resp.length is
124

125
00:10:10,761 --> 00:10:16,301
greater than zero. If it is
then we're going to do all of
125

126
00:10:16,301 --> 00:10:20,301
that. Otherwise we're going to
print a message saying that we
126

127
00:10:20,301 --> 00:10:24,221
couldn't find enough question
for this category. So couldn't
127

128
00:10:24,221 --> 00:10:36,461
find I'm going to use backwards
here. Couldn't find params dot
128

129
00:10:36,461 --> 00:10:43,061
questions for this category and
we're going to write restarting
129

130
00:10:43,061 --> 00:10:49,141
game restarting game and we're
going to go back to the first
130

131
00:10:49,141 --> 00:10:53,741
screen so the one where we set
the question number for example
131

132
00:10:53,741 --> 00:10:57,061
set question
132

133
00:10:57,721 --> 00:11:02,221
and technically if I refresh
let's say we ask for 30
133

134
00:11:02,221 --> 00:11:08,861
question in entertainment
musical and theaters in medium
134

135
00:11:08,861 --> 00:11:13,181
play and couldn't find 30
questions for this category
135

136
00:11:13,181 --> 00:11:16,941
restarting the game and we're
back to here so we're good okay
136

137
00:11:16,941 --> 00:11:21,981
so now technically we can start
building the play component
137

138
00:11:21,981 --> 00:11:24,541
okay we have the data we have
everything that we need so
138

139
00:11:24,541 --> 00:11:27,821
let's do that in the next one