Okay so in this video we're going to work on the slider so 1
we're going to try to build this component here to select 2
the number of questions. So to help us chakra provide a slider 3
component so if you take a look you're going to notice that yes 4
it's working and they provide a snippet of code to use it. But 5
we need some steps okay we we don't want something that is 6
completely free yes something like this where we have steps 7
displayed and we want only the values that are displayed to be selected. 8
So we are going to take this example and we're going to 9
update it. As you can see our first storing the slider value. 10
So that's what we're going to do. We're going to store in set 11
question quantity here we're going to store the slider value 12
and here we're going to say explicitly that it's a number. 13
Okay? So no one will ever be able to put something like 14
this. Okay? Then then then we're going to copy almost all 15
the part with the slider here. And we are going to put it here I'm 16
going to import everything that is missing add all missing 17
import I'm going to remove the label styles here okay so first 18
let's see what we have when we do that okay we have a slider 19
that does this okay so first of all we don't want this little 20
rectangle that display the value okay we don't need that 21
and I think that this is because of this one so we're 22
going to remove this okay now now we don't want 100 steps 23
okay here there are hundred steps when I select it so this 24
is handled by the props that you can send here here we can 25
send a max you can send a mean and you can send a step okay so 26
we could imagine that we're going to receive that as props 27
okay this will be defined by the developer so we could 28
expect that we're going to receive a props here so I'm 29
going to call that P and I'm going to provide a type for my 30
component that is going to be props and I'm going to define 31
an interface that is going to be the type for my props okay 32
for example I can say that I will have a max that will be a 33
number I will have mean it will be a number and I will have a 34
step that is going to be a number okay so we are used to 35
do something like this here do something like this max mean 36
and step you can do that okay like we usually do okay and use 37
them directly here max mean and step that's fine but when you 38
do that you have to write twice the name of the props okay and 39
I find this too much so I prefer writing them only once 40
and just write P for props here or you can write props as you 41
want. I and to use P as short N and this way I just have to 42
write once the name of the props here and the cool thing 43
is that I even have the other complete working. If I do P dot 44
I can generate target max here. P dot mean and P dot step okay 45
and now look at this now I have typed my components props so if 46
I go in app here as you can see now set question quantity is 47
not working and says that the type that I'm sending currently 48
nothing is missing the following properties max mean 49
and step so here if I press control space it's offered so 50
I'm going to for now set a max of 30 for example a mean a five 51
and a step of five and as soon as I match the props interface 52
the component is going to compile correctly okay so 53
that's exactly how you're going to type the props of a 54
component by doing something like this okay you could even 55
if you want define them directly without an interface 56
okay you could do it like this it's even shorter like this if 57
you want alright so now let's see what we have so as you can 58
see yes we have the number of step that is correct but we are 59
not displaying correctly here the values the labels so it 60
means that here instead of writing this an article this 61
slider mark basically we have to loop for each step and until 62
we reach the max so that's what we're going to do. We're going 63
to just take one remove the other ones and create a little 64
function that is going to be render marks. Like this. And so 65
in the end so in the end we're going to return an array of 66
that right? So we are going to do a for loop. So we're going 67
to start at the minimum here P dot min. We're going to go 68
until we reach P dot max and we're going to move not one by 69
one but step by step so index plus equal P dot step so 70
technically the index should be five then ten then 15 then 71
twenty et cetera so that's perfect and now basically I'm 72
going to push an element in an array so I'm going to prepare 73
an array here that they could call for example Marks. And for 74
each iteration I'm going to push in this array an element 75
slider mark and here well I'm going to set index and here 76
index like this and in the end I'm going to return my array of 77
slider marks that's exactly what you do usually when you do 78
a map okay and you return a component in each iteration of 79
the map in the end you have an array of components that's 80
exactly what we're going to do we're going to return an array 81
of components and react knows how to render an array of 82
components so we could type this function so this is to 83
return an array of JSX elements and render marks well we can 84
call it right here and now let's see okay okay that's 85
exactly what we want just that we don't see the last one did I 86
made a mistake yes it's a lower or equal this way we're going 87
to see the thirty Or do we? Yes, it's right here. But we 88
don't really see it. Uh so we need to do a bit of CSS to 89
handle that. So first of all let's go in app here. Um so 90
we're going to do a bit of CSS but before so before the slider 91
we want to display a title right and the slider just below 92
so I'm going to use the flex component provided by chakra 93
here I'm going to do that for now we don't need the fragment 94
I'm going to import this and so I'm going to do a direction 95
equal column so all the elements are going to be one above each 96
other so they're going to be placed vertically and I'm going 97
to center everything in the middle like this and above my 98
slider I will have a title here and I'm going to write how many 99
questions and it's going to be behind the scene a component H1 100
okay otherwise chakra doesn't know what kind of title this is 101
and I'm going to increase a bit the font size and you have to 102
use predetermined values so I'm going to use 3XL and 103
finally I'm going to add a bit of margin bottom like this this 104
way it's not too close from the slider like this 105
Okay, that's better. Uh now it's a bit too close from the 106
top here so I'm going to go in app and here well when I'm 107
going to render my steps so the content of my screen I'm just 108
going to add a bit of margin top maybe 100 okay now we still 109
have a problem with this slide bar so we basically have to 110
define a maximum width for this slider otherwise it's going to 111
take the all space so on my slider I'm going to do a max 112
widths and I'm going to set four hundred. And that's way better. 113
Now as you can see the values are not exactly aligned with 114
the little button here. So we're going to just update this 115
for it to be perfect. Um so basically it's just that all the 116
slider marks that we have set are not exactly positioned like 117
we want. So I'm just going to put a little bit of margin 118
left. I'm going to put minus three and bit of padding top 119
four and by the way we are in a loop so I have to provide a key 120
here I'm just going to set the index 121
Okay? Is that better? Yes seems that it's better but it's not 122
exactly perfect it's a bit too much maybe margin left two yes 123
margin okay two is better okay cool okay nice I'm just going 124
to change the color so slider here you can change the color 125
scheme I'm going to change the color scheme to yellow like 126
this and now it's yellow okay great so we have a slider and 127
now you know how to type the props okay so as you can see by 128
default I have set here a slider value of 50 that is not 129
right we have to use probably probably well we have to 130
actually create a default value here so I'm going to create a 131
default value that is going to be a number like this and I'm 132
going to use this p dot default value and now 133
technically I have to provide this here otherwise it's not 134
going to work so default value maybe we can set for example 135
ten I'm going to refresh Oh seems like there is something 136
wrong because we are on eighteen or something like this 137
here. So what is going on? Um slider slider. Oh well I have to 138
send the value here. So I'm going to send the slider value. 139
Like this let's refresh and now yes we are on ten okay it's 140
working right so now we will also have to obviously create a 141
button here to move to the next step and we have to send the 142
value that has been selected here to the app component okay 143
and why is that well because the app component is going to 144
be in charge of creating the you know the params object for 145
the request okay you know at some point somewhere we're 146
going to do axios that gets and we're Going to request the 147
trivia API and we're going to send all the parameters 148
remember so the the amount equal blah blah blah maybe like 149
five and then we'll have the category science era and so we 150
have to store somewhere this okay and just so you know but 151
with Axios we're actually not we are not actually going to 152
pass the parameter like this with axios we'll be able to 153
send them through an object okay that is params like this 154
and here we'll be able to all the values for example amount 155
to category science et cetera and and behind the scene Axios 156
is going to after reconstruct the URL okay by itself so 157
that's pretty cool because it means that we just have to 158
prepare an object like this and send it later to the request so 159
that's what we're going to store in the app component 160
we're going to store a state that will be the reflect of all 161
the perms that we want to send okay So let's do that in the 162
next one.