0
1
00:00:00,000 --> 00:00:03,181
Okay so in this video we're
going to create the state so
1

2
00:00:03,181 --> 00:00:06,061
the object that is going to
contain all the parameters for
2

3
00:00:06,061 --> 00:00:11,661
the request that we're going to
perform to reach the trivia API
3

4
00:00:11,661 --> 00:00:15,101
and so we have to build all the
params and so all the params
4

5
00:00:15,101 --> 00:00:19,581
are going to evolve as we
navigate through each setup
5

6
00:00:19,581 --> 00:00:24,861
screen. Okay? So let's go in
app here and let's create a new
6

7
00:00:24,861 --> 00:00:35,621
state that is going to be qui
Params and set quiz params. And
7

8
00:00:35,621 --> 00:00:40,801
we're going to prepare a state.
We have to define a type for
8

9
00:00:40,801 --> 00:00:44,721
these parameters. So what we
could do is we could probably
9

10
00:00:44,721 --> 00:00:49,441
create a new folder that is
going to be types and we're
10

11
00:00:49,441 --> 00:00:52,881
going to put all the types that
are related to quiz so through
11

12
00:00:52,881 --> 00:01:00,401
trivia API et cetera into a
quiz dash type. TS for example.
12

13
00:01:00,401 --> 00:01:05,041
So we want to create a type for
here. So maybe we could call
13

14
00:01:05,041 --> 00:01:11,661
that for example fetch quiz
params. I'm going to make an
14

15
00:01:11,661 --> 00:01:17,981
interface like this and I'm
going to export that and that's
15

16
00:01:17,981 --> 00:01:21,261
the type that I'm going to use
right here and so you have to
16

17
00:01:21,261 --> 00:01:27,821
import it so what do we have
inside we have the amount of
17

18
00:01:27,821 --> 00:01:32,621
question remember and it's a
number we have the category
18

19
00:01:32,621 --> 00:01:39,341
that is a string we have the
difficulty so difficulty is
19

20
00:01:39,341 --> 00:01:44,981
probably an enam since it can
be easy medium hard or an empty
20

21
00:01:44,981 --> 00:01:54,941
string. So maybe we can create
a quiz difficulty. It's an so
21

22
00:01:54,941 --> 00:02:00,941
we'll have easy there's going
to be easy in lowercase because
22

23
00:02:00,941 --> 00:02:09,021
that's what we're going to send
to the API we'll have medium
23

24
00:02:12,221 --> 00:02:18,001
hard and we can send an empty
string and I'm calling it mixed
24

25
00:02:18,001 --> 00:02:21,121
because if we send that we're
going to have several questions
25

26
00:02:21,121 --> 00:02:28,081
with mixed difficulties so okay
that should do it and so we're
26

27
00:02:28,081 --> 00:02:32,001
going to send that here and
finally we'll have the type so
27

28
00:02:32,001 --> 00:02:36,721
you remember it can be multiple
or boolean so that's the type
28

29
00:02:36,721 --> 00:02:44,781
of quiz so again it can be an
and we'll have quiz type I and
29

30
00:02:44,781 --> 00:02:50,541
again so it can be multiple so
we have to send multiple like
30

31
00:02:50,541 --> 00:02:56,461
this or it can be boolean it
can be like this and again we
31

32
00:02:56,461 --> 00:03:00,781
can have mixed and we're going
to send an empty string like
32

33
00:03:00,781 --> 00:03:05,181
this so in our case we always
going to send multiple but this
33

34
00:03:05,181 --> 00:03:10,701
way we have the correct type so
this will be our quiz type and
34

35
00:03:10,701 --> 00:03:13,981
I think we're good all right so
now what do we want we want to
35

36
00:03:13,981 --> 00:03:18,341
fill this quiz params and
specifically we want to set the
36

37
00:03:18,341 --> 00:03:23,941
amount value here. So it means
that here we want to be able to
37

38
00:03:23,941 --> 00:03:30,501
send set quiz params to this
component so what we're going
38

39
00:03:30,501 --> 00:03:34,741
to do is first we're going to
go in this component and we're
39

40
00:03:34,741 --> 00:03:38,821
going to create a button that
is going to allow us to go on
40

41
00:03:38,821 --> 00:03:41,861
the next screen and also is
going to allow us to save the
41

42
00:03:41,861 --> 00:03:45,861
amount. So I'm going to create
a button here. So we're going
42

43
00:03:45,861 --> 00:03:51,521
to create a button here from so
you can import it. I'm going to
43

44
00:03:51,521 --> 00:03:54,241
write set category because
we're going to use this button
44

45
00:03:54,241 --> 00:03:58,761
to move to the next screen. Uh
it's going to have a position
45

46
00:03:58,761 --> 00:04:07,201
absolute. It's going to be at
80% of the top.
46

47
00:04:08,221 --> 00:04:14,741
And I don't know maybe 10% from
the right and it will have a
47

48
00:04:14,741 --> 00:04:18,181
right icon and here you can
send an icon and so you have a
48

49
00:04:18,181 --> 00:04:21,701
set of icon that are provided
by chakra and I'm going to use
49

50
00:04:21,701 --> 00:04:27,621
the arrow forward icon that you
can import from chakra icons.
50

51
00:04:27,621 --> 00:04:30,741
So make sure that you have
installed that but I think we
51

52
00:04:30,741 --> 00:04:36,961
did at the beginning. Okay, so
what do we have? Yep, not bad.
52

53
00:04:36,961 --> 00:04:43,981
Cool. Now, when we're going to
click on this button we want to
53

54
00:04:43,981 --> 00:04:47,181
do something we want to use the
callback that we're going to
54

55
00:04:47,181 --> 00:04:51,261
receive so it means that at the
very top here we're going to
55

56
00:04:51,261 --> 00:04:55,741
receive a function so I'm going
to call this function for
56

57
00:04:55,741 --> 00:05:02,421
example on click next and it's
going to be of type function
57

58
00:05:02,421 --> 00:05:10,701
that returns nothing okay and
we are going to send the slider
58

59
00:05:10,701 --> 00:05:14,381
value here okay so the amount
of question that is going to be
59

60
00:05:14,381 --> 00:05:20,821
a number okay And so I'm going
to call this function when I'm
60

61
00:05:20,821 --> 00:05:26,181
going to receive it. P dot on
tick next and I'm going to send
61

62
00:05:26,181 --> 00:05:34,461
the slider value. Okay? So now
it means that here in app a
62

63
00:05:34,461 --> 00:05:37,581
function is expected okay I
have to send an onclick next
63

64
00:05:37,581 --> 00:05:41,021
function and that is pretty
easy we're just going to send
64

65
00:05:41,021 --> 00:05:45,021
the set quiz params but not
only okay because we're not
65

66
00:05:45,021 --> 00:05:49,021
going to set the all object
here so here we're going to
66

67
00:05:49,021 --> 00:05:55,301
receive an amount that is a
number we're going to write
67

68
00:05:55,301 --> 00:05:59,221
something. So we are going to
do a set quiz params and
68

69
00:05:59,221 --> 00:06:01,701
basically we're just going to
update the amount. So we're
69

70
00:06:01,701 --> 00:06:05,301
going to say that we want to
keep everything that was in
70

71
00:06:05,301 --> 00:06:10,101
quiz params but we just want to
override the amount here by
71

72
00:06:10,101 --> 00:06:13,861
setting the amount inside and
so you can use a short end
72

73
00:06:13,861 --> 00:06:21,301
here. By doing that. Okay? And
well the type undefined is not
73

74
00:06:21,301 --> 00:06:27,021
assignable to string. So yeah
because quiz params are copying
74

75
00:06:27,021 --> 00:06:31,261
to what we have written here is
by default undefined. So we're
75

76
00:06:31,261 --> 00:06:34,941
saying that we want to maybe
put undefined here and only set
76

77
00:06:34,941 --> 00:06:38,781
an amount which is not
authorized by the fetch quiz
77

78
00:06:38,781 --> 00:06:43,501
params. So we have two choices
here. Either we go in fetch
78

79
00:06:43,501 --> 00:06:49,201
quiz params and say that
everything is possibly not
79

80
00:06:49,201 --> 00:06:53,201
defined at the beginning like
this and this way this is going
80

81
00:06:53,201 --> 00:06:56,561
to work okay that's a
possibility but that's a bit
81

82
00:06:56,561 --> 00:06:59,841
annoying because now every time
we're going to do a dot amount
82

83
00:06:59,841 --> 00:07:03,441
or dot category et cetera we
will have to do check to make
83

84
00:07:03,441 --> 00:07:07,761
sure that it's defined so maybe
what we could do is say that
84

85
00:07:07,761 --> 00:07:12,161
it's it has to be defined but
just set initial value here
85

86
00:07:12,161 --> 00:07:16,161
okay this way it will never be
considered as undefined like it
86

87
00:07:16,161 --> 00:07:20,961
is right now so we can maybe
prepare a default value for
87

88
00:07:20,961 --> 00:07:28,781
example in amount zero a
category that could be empty we
88

89
00:07:28,781 --> 00:07:32,701
could have a difficulty so we
could set mixed diffiiculty for
89

90
00:07:32,701 --> 00:07:38,781
example so quiz difficulty oh I
think we haven't exported that
90

91
00:07:38,781 --> 00:07:44,981
so let's go here and export
this and export this as well
91

92
00:07:44,981 --> 00:07:52,061
and so here maybe we can set
the quiz difficulty. mixed by
92

93
00:07:52,061 --> 00:07:59,781
default and the type that could
be quiz type. well multiple
93

94
00:07:59,781 --> 00:08:03,541
because that's the only thing
that we're going to send so
94

95
00:08:03,541 --> 00:08:08,101
technically there is no way
that we send this okay because
95

96
00:08:08,101 --> 00:08:12,901
we will have to change at least
the amount the category and the
96

97
00:08:12,901 --> 00:08:19,621
difficulty so just so we have a
default value and this way this
97

98
00:08:19,621 --> 00:08:23,461
is going to work so cool now
when we're going to click on
98

99
00:08:23,461 --> 00:08:25,861
the button we're going to
basically save the amount but
99

100
00:08:25,861 --> 00:08:30,141
we want also to go to the next
so we're just going to do a set
100

101
00:08:30,141 --> 00:08:35,501
step and move to the next one
that is set question category
101

102
00:08:35,501 --> 00:08:40,061
by running that we should then
move to this so we have to
102

103
00:08:40,061 --> 00:08:44,861
prepare a new component here so
I have already done it you can
103

104
00:08:44,861 --> 00:08:48,541
go in feature and as you can see
I have created a set question
104

105
00:08:48,541 --> 00:08:53,021
category here that is for now
an empty component so you can
105

106
00:08:53,021 --> 00:08:59,761
do the same and I'm going to
take this component go in app
106

107
00:08:59,761 --> 00:09:03,921
and call it right here to make
sure that it's indeed working
107

108
00:09:03,921 --> 00:09:10,161
I'm going to import it okay so
now let's refresh now let's say
108

109
00:09:10,161 --> 00:09:14,321
I set it to 15 and go on set
category so technically we have
109

110
00:09:14,321 --> 00:09:17,281
moved to the next step and
technically in the state of app
110

111
00:09:17,281 --> 00:09:20,641
now we should have the correct
amount okay and you can just
111

112
00:09:20,641 --> 00:09:25,921
ensure that it's working by
console logging here the quiz
112

113
00:09:25,921 --> 00:09:32,221
params so let's make it's
working console and yeah for
113

114
00:09:32,221 --> 00:09:36,221
now the amount is 15 and so now
when we're going to move to the
114

115
00:09:36,221 --> 00:09:39,621
next step we're going to update
each part of the state alright
115

116
00:09:39,621 --> 00:09:44,701
okay so let's continue in the
next one