0
1
00:00:00,000 --> 00:00:02,701
Okay so in this video we're
going to work on the slider so
1

2
00:00:02,701 --> 00:00:05,501
we're going to try to build
this component here to select
2

3
00:00:05,501 --> 00:00:10,541
the number of questions. So to
help us chakra provide a slider
3

4
00:00:10,541 --> 00:00:14,621
component so if you take a look
you're going to notice that yes
4

5
00:00:14,621 --> 00:00:19,421
it's working and they provide a
snippet of code to use it. But
5

6
00:00:19,421 --> 00:00:22,461
we need some steps okay we we
don't want something that is
6

7
00:00:22,461 --> 00:00:26,221
completely free yes something
like this where we have steps
7

8
00:00:26,221 --> 00:00:31,841
displayed and we want only the
values that are displayed to be selected.
8

9
00:00:31,841 --> 00:00:36,121
So we are going to take this
example and we're going to
9

10
00:00:36,121 --> 00:00:40,761
update it. As you can see our
first storing the slider value.
10

11
00:00:40,761 --> 00:00:47,701
So that's what we're going to
do. We're going to store in set
11

12
00:00:47,701 --> 00:00:55,461
question quantity here we're
going to store the slider value
12

13
00:00:55,461 --> 00:00:58,761
and here we're going to say
explicitly that it's a number.
13

14
00:00:58,761 --> 00:01:03,081
Okay? So no one will ever be
able to put something like
14

15
00:01:03,081 --> 00:01:11,881
this. Okay? Then then then
we're going to copy almost all
15

16
00:01:11,881 --> 00:01:21,701
the part with the slider here.
And we are going to put it here I'm
16

17
00:01:21,701 --> 00:01:25,221
going to import everything that
is missing add all missing
17

18
00:01:25,221 --> 00:01:31,141
import I'm going to remove the
label styles here okay so first
18

19
00:01:31,141 --> 00:01:35,061
let's see what we have when we
do that okay we have a slider
19

20
00:01:35,061 --> 00:01:39,301
that does this okay so first of
all we don't want this little
20

21
00:01:39,301 --> 00:01:41,861
rectangle that display the
value okay we don't need that
21

22
00:01:41,861 --> 00:01:46,661
and I think that this is
because of this one so we're
22

23
00:01:46,661 --> 00:01:54,641
going to remove this okay now
now we don't want 100 steps
23

24
00:01:54,641 --> 00:02:00,321
okay here there are hundred
steps when I select it so this
24

25
00:02:00,321 --> 00:02:05,121
is handled by the props that
you can send here here we can
25

26
00:02:05,121 --> 00:02:13,361
send a max you can send a mean
and you can send a step okay so
26

27
00:02:13,361 --> 00:02:16,081
we could imagine that we're
going to receive that as props
27

28
00:02:16,081 --> 00:02:20,841
okay this will be defined by
the developer so we could
28

29
00:02:20,841 --> 00:02:23,641
expect that we're going to
receive a props here so I'm
29

30
00:02:23,641 --> 00:02:27,161
going to call that P and I'm
going to provide a type for my
30

31
00:02:27,161 --> 00:02:30,761
component that is going to be
props and I'm going to define
31

32
00:02:30,761 --> 00:02:34,841
an interface that is going to
be the type for my props okay
32

33
00:02:34,841 --> 00:02:38,761
for example I can say that I
will have a max that will be a
33

34
00:02:38,761 --> 00:02:45,641
number I will have mean it will
be a number and I will have a
34

35
00:02:45,641 --> 00:02:52,541
step that is going to be a
number okay so we are used to
35

36
00:02:52,541 --> 00:02:56,781
do something like this here do
something like this max mean
36

37
00:02:56,781 --> 00:03:01,821
and step you can do that okay
like we usually do okay and use
37

38
00:03:01,821 --> 00:03:10,301
them directly here max mean and
step that's fine but when you
38

39
00:03:10,301 --> 00:03:14,301
do that you have to write twice
the name of the props okay and
39

40
00:03:14,301 --> 00:03:18,621
I find this too much so I
prefer writing them only once
40

41
00:03:18,621 --> 00:03:23,181
and just write P for props here
or you can write props as you
41

42
00:03:23,181 --> 00:03:29,581
want. I and to use P as short N
and this way I just have to
42

43
00:03:29,581 --> 00:03:32,061
write once the name of the
props here and the cool thing
43

44
00:03:32,061 --> 00:03:35,421
is that I even have the other
complete working. If I do P dot
44

45
00:03:35,421 --> 00:03:44,821
I can generate target max here.
P dot mean and P dot step okay
45

46
00:03:44,821 --> 00:03:50,221
and now look at this now I have
typed my components props so if
46

47
00:03:50,221 --> 00:03:53,821
I go in app here as you can see
now set question quantity is
47

48
00:03:53,821 --> 00:03:57,101
not working and says that the
type that I'm sending currently
48

49
00:03:57,101 --> 00:04:01,021
nothing is missing the
following properties max mean
49

50
00:04:01,021 --> 00:04:06,781
and step so here if I press
control space it's offered so
50

51
00:04:06,781 --> 00:04:12,941
I'm going to for now set a max
of 30 for example a mean a five
51

52
00:04:12,941 --> 00:04:19,561
and a step of five and as soon
as I match the props interface
52

53
00:04:19,561 --> 00:04:23,001
the component is going to
compile correctly okay so
53

54
00:04:23,001 --> 00:04:26,761
that's exactly how you're going
to type the props of a
54

55
00:04:26,761 --> 00:04:29,881
component by doing something
like this okay you could even
55

56
00:04:29,881 --> 00:04:35,501
if you want define them
directly without an interface
56

57
00:04:35,501 --> 00:04:40,381
okay you could do it like this
it's even shorter like this if
57

58
00:04:40,381 --> 00:04:45,661
you want alright so now let's
see what we have so as you can
58

59
00:04:45,661 --> 00:04:49,501
see yes we have the number of
step that is correct but we are
59

60
00:04:49,501 --> 00:04:54,141
not displaying correctly here
the values the labels so it
60

61
00:04:54,141 --> 00:04:57,101
means that here instead of
writing this an article this
61

62
00:04:57,101 --> 00:05:02,461
slider mark basically we have
to loop for each step and until
62

63
00:05:02,461 --> 00:05:06,361
we reach the max so that's what
we're going to do. We're going
63

64
00:05:06,361 --> 00:05:11,481
to just take one remove the
other ones and create a little
64

65
00:05:11,481 --> 00:05:20,241
function that is going to be
render marks. Like this. And so
65

66
00:05:20,241 --> 00:05:24,001
in the end so in the end we're
going to return an array of
66

67
00:05:24,001 --> 00:05:29,441
that right? So we are going to
do a for loop. So we're going
67

68
00:05:29,441 --> 00:05:36,021
to start at the minimum here P
dot min. We're going to go
68

69
00:05:36,021 --> 00:05:41,741
until we reach P dot max and
we're going to move not one by
69

70
00:05:41,741 --> 00:05:49,181
one but step by step so index
plus equal P dot step so
70

71
00:05:49,181 --> 00:05:53,421
technically the index should be
five then ten then 15 then
71

72
00:05:53,421 --> 00:05:57,501
twenty et cetera so that's
perfect and now basically I'm
72

73
00:05:57,501 --> 00:06:00,301
going to push an element in an
array so I'm going to prepare
73

74
00:06:00,301 --> 00:06:07,021
an array here that they could
call for example Marks. And for
74

75
00:06:07,021 --> 00:06:11,421
each iteration I'm going to
push in this array an element
75

76
00:06:11,421 --> 00:06:18,521
slider mark and here well I'm
going to set index and here
76

77
00:06:18,521 --> 00:06:25,401
index like this and in the end
I'm going to return my array of
77

78
00:06:25,401 --> 00:06:29,241
slider marks that's exactly
what you do usually when you do
78

79
00:06:29,241 --> 00:06:32,761
a map okay and you return a
component in each iteration of
79

80
00:06:32,761 --> 00:06:35,241
the map in the end you have an
array of components that's
80

81
00:06:35,241 --> 00:06:37,641
exactly what we're going to do
we're going to return an array
81

82
00:06:37,641 --> 00:06:40,841
of components and react knows
how to render an array of
82

83
00:06:40,841 --> 00:06:47,381
components so we could type
this function so this is to
83

84
00:06:47,381 --> 00:06:53,701
return an array of JSX elements
and render marks well we can
84

85
00:06:53,701 --> 00:07:00,101
call it right here and now
let's see okay okay that's
85

86
00:07:00,101 --> 00:07:07,301
exactly what we want just that
we don't see the last one did I
86

87
00:07:07,301 --> 00:07:12,501
made a mistake yes it's a lower
or equal this way we're going
87

88
00:07:12,501 --> 00:07:18,241
to see the thirty Or do we?
Yes, it's right here. But we
88

89
00:07:18,241 --> 00:07:22,001
don't really see it. Uh so we
need to do a bit of CSS to
89

90
00:07:22,001 --> 00:07:29,681
handle that. So first of all
let's go in app here. Um so
90

91
00:07:29,681 --> 00:07:32,961
we're going to do a bit of CSS
but before so before the slider
91

92
00:07:32,961 --> 00:07:38,321
we want to display a title
right and the slider just below
92

93
00:07:38,321 --> 00:07:43,161
so I'm going to use the flex
component provided by chakra
93

94
00:07:43,161 --> 00:07:49,801
here I'm going to do that for
now we don't need the fragment
94

95
00:07:49,801 --> 00:07:56,921
I'm going to import this and so
I'm going to do a direction
95

96
00:07:56,921 --> 00:08:02,161
equal column so all the elements
are going to be one above each
96

97
00:08:02,161 --> 00:08:07,681
other so they're going to be
placed vertically and I'm going
97

98
00:08:07,681 --> 00:08:14,161
to center everything in the
middle like this and above my
98

99
00:08:14,161 --> 00:08:20,401
slider I will have a title here
and I'm going to write how many
99

100
00:08:20,401 --> 00:08:28,301
questions and it's going to be
behind the scene a component H1
100

101
00:08:28,301 --> 00:08:32,221
okay otherwise chakra doesn't
know what kind of title this is
101

102
00:08:32,221 --> 00:08:35,821
and I'm going to increase a bit
the font size and you have to
102

103
00:08:35,821 --> 00:08:41,581
use predetermined values so I'm
going to use 3XL and
103

104
00:08:41,581 --> 00:08:45,661
finally I'm going to add a bit
of margin bottom like this this
104

105
00:08:45,661 --> 00:08:51,501
way it's not too close from the
slider like this
105

106
00:08:52,221 --> 00:08:58,621
Okay, that's better. Uh now
it's a bit too close from the
106

107
00:08:58,621 --> 00:09:03,581
top here so I'm going to go in
app and here well when I'm
107

108
00:09:03,581 --> 00:09:06,781
going to render my steps so the
content of my screen I'm just
108

109
00:09:06,781 --> 00:09:15,181
going to add a bit of margin
top maybe 100 okay now we still
109

110
00:09:15,181 --> 00:09:18,381
have a problem with this slide
bar so we basically have to
110

111
00:09:18,381 --> 00:09:21,421
define a maximum width for this
slider otherwise it's going to
111

112
00:09:21,421 --> 00:09:24,861
take the all space so on my
slider I'm going to do a max
112

113
00:09:24,861 --> 00:09:31,341
widths and I'm going to set four
hundred. And that's way better.
113

114
00:09:31,341 --> 00:09:35,501
Now as you can see the values
are not exactly aligned with
114

115
00:09:35,501 --> 00:09:40,621
the little button here. So
we're going to just update this
115

116
00:09:40,621 --> 00:09:46,061
for it to be perfect. Um so
basically it's just that all the
116

117
00:09:46,061 --> 00:09:49,181
slider marks that we have set
are not exactly positioned like
117

118
00:09:49,181 --> 00:09:53,261
we want. So I'm just going to
put a little bit of margin
118

119
00:09:53,261 --> 00:09:58,881
left. I'm going to put minus
three and bit of padding top
119

120
00:09:58,881 --> 00:10:03,561
four and by the way we are in a
loop so I have to provide a key
120

121
00:10:03,561 --> 00:10:09,561
here I'm just going to set the
index
121

122
00:10:10,921 --> 00:10:19,021
Okay? Is that better? Yes seems
that it's better but it's not
122

123
00:10:19,021 --> 00:10:27,661
exactly perfect it's a bit too
much maybe margin left two yes
123

124
00:10:27,661 --> 00:10:32,381
margin okay two is better okay
cool okay nice I'm just going
124

125
00:10:32,381 --> 00:10:37,901
to change the color so slider
here you can change the color
125

126
00:10:37,901 --> 00:10:43,621
scheme I'm going to change the
color scheme to yellow like
126

127
00:10:43,621 --> 00:10:48,821
this and now it's yellow okay
great so we have a slider and
127

128
00:10:48,821 --> 00:10:54,181
now you know how to type the
props okay so as you can see by
128

129
00:10:54,181 --> 00:10:58,661
default I have set here a
slider value of 50 that is not
129

130
00:10:58,661 --> 00:11:03,381
right we have to use probably
probably well we have to
130

131
00:11:03,381 --> 00:11:07,461
actually create a default value
here so I'm going to create a
131

132
00:11:07,461 --> 00:11:13,121
default value that is going to
be a number like this and I'm
132

133
00:11:13,121 --> 00:11:16,641
going to use this p dot
default value and now
133

134
00:11:16,641 --> 00:11:19,761
technically I have to provide
this here otherwise it's not
134

135
00:11:19,761 --> 00:11:23,121
going to work so default value
maybe we can set for example
135

136
00:11:23,121 --> 00:11:31,161
ten I'm going to refresh Oh
seems like there is something
136

137
00:11:31,161 --> 00:11:34,761
wrong because we are on
eighteen or something like this
137

138
00:11:34,761 --> 00:11:41,721
here. So what is going on? Um
slider slider. Oh well I have to
138

139
00:11:41,721 --> 00:11:49,721
send the value here. So I'm
going to send the slider value.
139

140
00:11:49,721 --> 00:11:54,361
Like this let's refresh and now
yes we are on ten okay it's
140

141
00:11:54,361 --> 00:11:58,601
working right so now we will
also have to obviously create a
141

142
00:11:58,601 --> 00:12:03,561
button here to move to the next
step and we have to send the
142

143
00:12:03,561 --> 00:12:07,161
value that has been selected
here to the app component okay
143

144
00:12:07,161 --> 00:12:10,841
and why is that well because
the app component is going to
144

145
00:12:10,841 --> 00:12:15,801
be in charge of creating the
you know the params object for
145

146
00:12:15,801 --> 00:12:19,321
the request okay you know at
some point somewhere we're
146

147
00:12:19,321 --> 00:12:24,961
going to do axios that gets and
we're Going to request the
147

148
00:12:24,961 --> 00:12:28,641
trivia API and we're going to
send all the parameters
148

149
00:12:28,641 --> 00:12:34,761
remember so the the amount
equal blah blah blah maybe like
149

150
00:12:34,761 --> 00:12:41,761
five and then we'll have the
category science era and so we
150

151
00:12:41,761 --> 00:12:45,681
have to store somewhere this
okay and just so you know but
151

152
00:12:45,681 --> 00:12:49,361
with Axios we're actually not
we are not actually going to
152

153
00:12:49,361 --> 00:12:53,041
pass the parameter like this
with axios we'll be able to
153

154
00:12:53,041 --> 00:12:56,721
send them through an object
okay that is params like this
154

155
00:12:56,721 --> 00:13:01,161
and here we'll be able to all
the values for example amount
155

156
00:13:01,161 --> 00:13:09,361
to category science et cetera
and and behind the scene Axios
156

157
00:13:09,361 --> 00:13:13,681
is going to after reconstruct
the URL okay by itself so
157

158
00:13:13,681 --> 00:13:16,081
that's pretty cool because it
means that we just have to
158

159
00:13:16,081 --> 00:13:19,601
prepare an object like this and
send it later to the request so
159

160
00:13:19,601 --> 00:13:22,241
that's what we're going to
store in the app component
160

161
00:13:22,241 --> 00:13:25,841
we're going to store a state
that will be the reflect of all
161

162
00:13:25,841 --> 00:13:30,001
the perms that we want to send
okay So let's do that in the
162

163
00:13:30,001 --> 00:13:32,641
next one.