0
1
00:00:00,000 --> 00:00:03,661
Alright so in this video we're
going to work on the timer so
1

2
00:00:03,661 --> 00:00:06,941
you'll see that when we start
the application we want
2

3
00:00:06,941 --> 00:00:09,901
something like this we want a
progress bar a circular
3

4
00:00:09,901 --> 00:00:13,901
progress bar we're going to go
from for example 10 to 0 and
4

5
00:00:13,901 --> 00:00:16,701
when it's going to reach zero
the question is going to be
5

6
00:00:16,701 --> 00:00:20,061
marked as invalid here and
we're going to move to the next
6

7
00:00:20,061 --> 00:00:24,461
question okay and during the
animation the timer is going to
7

8
00:00:24,461 --> 00:00:29,421
be removed from the screen so
to do that we are going to use
8

9
00:00:29,421 --> 00:00:33,201
the circular progress from
chakra so it's pretty simple if
9

10
00:00:33,201 --> 00:00:36,081
you go into the doc you can see
that we can use these two
10

11
00:00:36,081 --> 00:00:39,521
components circular progress
and circular progress label
11

12
00:00:39,521 --> 00:00:46,401
here and basically we can
define a max here and a value
12

13
00:00:46,401 --> 00:00:53,121
so for example if I set max 10
and 1 as value the circular
13

14
00:00:53,121 --> 00:00:58,161
progress is going to fill up
okay here 2345 et -cetera and
14

15
00:00:58,161 --> 00:01:01,361
you can use the same value here
okay to display the correct
15

16
00:01:01,361 --> 00:01:05,641
label so that's what we're
going to to create the timer.
16

17
00:01:05,641 --> 00:01:09,801
Um so you can try to do it by
yourself but be careful there
17

18
00:01:09,801 --> 00:01:15,161
is a trap. There is a trap
related to set interval, okay?
18

19
00:01:15,161 --> 00:01:18,921
When you call a set state in
set interval, you have to be
19

20
00:01:18,921 --> 00:01:23,561
careful and not do a regular
set state. Okay? So I don't
20

21
00:01:23,561 --> 00:01:25,481
know if you know that but if
you look on different
21

22
00:01:25,481 --> 00:01:29,561
documentation of react when you
you are doing a set something
22

23
00:01:29,561 --> 00:01:34,281
when you use a state you can
basically pass a value or you
23

24
00:01:34,281 --> 00:01:38,381
can pass a callback, a function
and this function actually is
24

25
00:01:38,381 --> 00:01:43,661
going to use the previous value
of the state and this is safer
25

26
00:01:43,661 --> 00:01:48,301
than doing what we do usually
okay because this is not going
26

27
00:01:48,301 --> 00:01:53,421
to work as expected when you
call it in a set interval or in
27

28
00:01:53,421 --> 00:01:57,821
a set time out or thing like
this okay so in general if you
28

29
00:01:57,821 --> 00:02:00,781
want to be super safe you
should always use this approach
29

30
00:02:00,781 --> 00:02:04,381
if you don't know when to use
one on or when to use the other
30

31
00:02:04,381 --> 00:02:09,961
one okay but I usually use this
because I know when only to use
31

32
00:02:09,961 --> 00:02:12,761
this one okay this is to avoid
state closure I will talk about
32

33
00:02:12,761 --> 00:02:15,961
that later but in this case
when you're going to create a
33

34
00:02:15,961 --> 00:02:22,201
timer use this approach okay
all right so good luck and now
34

35
00:02:22,201 --> 00:02:27,721
we're going to see how to do it
okay so what we can do is we
35

36
00:02:27,721 --> 00:02:32,361
can create the timer component
so timer. TSX I'm not putting
36

37
00:02:32,361 --> 00:02:36,281
it in the components folder
again because we're going to
37

38
00:02:36,281 --> 00:02:40,641
use it only once but since only
related to play quiz, what I'm
38

39
00:02:40,641 --> 00:02:43,361
going to do is I'm going to
create a folder that I'm going
39

40
00:02:43,361 --> 00:02:48,641
to call play quiz. I'm going to
put play quiz in it and the
40

41
00:02:48,641 --> 00:02:59,881
timer in it. Like this I'm
going to make a component here.
41

42
00:02:59,881 --> 00:03:06,061
Timer, okay? And in play quiz,
we're going to use it. Oh by
42

43
00:03:06,061 --> 00:03:10,061
the way, make sure to update
your import in app, okay? I
43

44
00:03:10,061 --> 00:03:13,421
think it's been done
automatically for me, yes. But
44

45
00:03:13,421 --> 00:03:21,861
be careful, update it. Uh so so
so in play quiz below the
45

46
00:03:21,861 --> 00:03:25,541
progress bar for example we
could create a box that is
46

47
00:03:25,541 --> 00:03:30,101
going to be positioned
absolutely and I'm going to put
47

48
00:03:30,101 --> 00:03:36,981
it at top 50 and right 50 and
here we're going to call the
48

49
00:03:36,981 --> 00:03:43,081
timer So we're just going to
display this box in this timer
49

50
00:03:43,081 --> 00:03:47,081
when the question is
unanswered. So it's been always
50

51
00:03:47,081 --> 00:03:49,961
displayed as long as you
haven't touched anything. As
51

52
00:03:49,961 --> 00:03:52,841
soon as there is an animation
running is going to be removed.
52

53
00:03:52,841 --> 00:03:55,721
And when the animation is going
to be finished and the question
53

54
00:03:55,721 --> 00:04:00,201
will be unanswered again then
it's going to reappear. Okay
54

55
00:04:00,201 --> 00:04:04,681
and reset. So we are going to
display all that only if the
55

56
00:04:04,681 --> 00:04:11,121
question status is unanswered.
Oh and I killed it a little
56

57
00:04:11,121 --> 00:04:19,721
bit. Okay, like this. Oh, I
forgot to curly brace. Okay.
57

58
00:04:19,721 --> 00:04:24,761
All right all right so let's
see if I go there okay timer
58

59
00:04:24,761 --> 00:04:29,161
great and technically it should
be removed yes when I do that
59

60
00:04:29,161 --> 00:04:33,481
and it should reappear yes okay
we're we're good so now we can
60

61
00:04:33,481 --> 00:04:37,001
work in the timer so like I
told you the timer is going to
61

62
00:04:37,001 --> 00:04:41,401
come from a circular progress
like this so we're going to use
62

63
00:04:41,401 --> 00:04:44,041
it and we're going to need the
circular progress and the
63

64
00:04:44,041 --> 00:04:51,661
circular progress label we're
going to import that Okay and
64

65
00:04:51,661 --> 00:04:55,821
and and we have an example yes
we have exactly what we want
65

66
00:04:55,821 --> 00:05:04,461
over here so we're going to
paste this example okay so I'm
66

67
00:05:04,461 --> 00:05:07,821
not going to change the color
I'm going to use the default
67

68
00:05:07,821 --> 00:05:13,261
one here it will be something
like this let's see already if
68

69
00:05:13,261 --> 00:05:16,941
it's working okay okay now we
just have to use the correct
69

70
00:05:16,941 --> 00:05:23,541
values and make it update So it
means that we first have to
70

71
00:05:23,541 --> 00:05:28,581
define a max value here. Uh so
maybe we could send that as a
71

72
00:05:28,581 --> 00:05:33,301
props. So I'm going to do P and
we'll have a max that will be a
72

73
00:05:33,301 --> 00:05:40,101
number. And this is going to be
P dot max. Then the value well
73

74
00:05:40,101 --> 00:05:43,461
is going to be calculated
inside the component. So we're
74

75
00:05:43,461 --> 00:05:46,341
going to have a store to store
this value. I'm going to call
75

76
00:05:46,341 --> 00:05:53,601
that progress. Like this it's
going to be a useState and don't
76

77
00:05:53,601 --> 00:05:59,741
forget to type it it's going to
be a number by default it's going
77

78
00:05:59,741 --> 00:06:06,921
to start from the maximum so Uh p.max
so we're going to send that
78

79
00:06:06,921 --> 00:06:14,221
here max and we could say that
it's going to be ten for now.
79

80
00:06:14,221 --> 00:06:17,341
Okay, so what we're going to do
now is we want to decrease the
80

81
00:06:17,341 --> 00:06:22,061
value by one every second. So
we're going to use a use
81

82
00:06:22,061 --> 00:06:28,861
effect a useEffect that is
going to run on startup after
82

83
00:06:28,861 --> 00:06:36,301
the first render and here we're
going to use a set interval. So
83

84
00:06:36,301 --> 00:06:39,261
set interval run a function
like this and it's going to run
84

85
00:06:39,261 --> 00:06:44,921
every one second. So what do we
want to do every second well we
85

86
00:06:44,921 --> 00:06:51,641
want to set the progress to
progress minus one and that is
86

87
00:06:51,641 --> 00:06:54,921
exactly what is going to cause
an issue if you do that okay we
87

88
00:06:54,921 --> 00:06:57,721
can start trying to do that and
you see that it's going to
88

89
00:06:57,721 --> 00:07:03,801
cause an issue so already if we
set the progress here and here
89

90
00:07:03,801 --> 00:07:08,601
so progress you're going to
notice that it is not going to
90

91
00:07:08,601 --> 00:07:13,001
work it's going to start at 10
and go to nine and never move
91

92
00:07:13,001 --> 00:07:18,661
again and this is because like
I told you this is a closure
92

93
00:07:18,661 --> 00:07:23,381
and so what is going on here is
that set interval here is going
93

94
00:07:23,381 --> 00:07:28,101
to keep in memory what is the
initial value for progress and
94

95
00:07:28,101 --> 00:07:31,941
it's 10 and it's going to run
every second with the same
95

96
00:07:31,941 --> 00:07:35,381
function with the same value so
you're going to have 10 minus
96

97
00:07:35,381 --> 00:07:38,981
one that is going to run every
second so you'll still have
97

98
00:07:38,981 --> 00:07:47,621
nine , nine , nine,  every seconds that is
why you have to use the
98

99
00:07:47,621 --> 00:07:51,061
callback here we have the
previous progress and use this
99

100
00:07:51,061 --> 00:07:55,301
one this way you are sure that
you will always have the the
100

101
00:07:55,301 --> 00:08:03,541
freshest value if I may say in
your set state here and now it
101

102
00:08:03,541 --> 00:08:06,421
seems that
102

103
00:08:07,221 --> 00:08:11,721
it's working. It's working but
we're going to have an issue
103

104
00:08:11,721 --> 00:08:14,841
when we're going to reach zero
because this is going to
104

105
00:08:14,841 --> 00:08:18,601
continue decreasing. Okay?
That's not exactly what we
105

106
00:08:18,601 --> 00:08:23,641
want. So we have to track when
we are at zero and if we are at
106

107
00:08:23,641 --> 00:08:27,801
zero, we need to trigger
something. Okay? At least tell
107

108
00:08:27,801 --> 00:08:31,881
our parent that we are
finished. So we're going to
108

109
00:08:31,881 --> 00:08:38,221
prepare a callback here. That
is going to be on finished. I
109

110
00:08:38,221 --> 00:08:42,621
is going to be just a signal so
just a function and basically
110

111
00:08:42,621 --> 00:08:45,821
we have to track the progress
so we're going to use a use
111

112
00:08:45,821 --> 00:08:48,621
effect again
112

113
00:08:49,221 --> 00:08:54,281
and listen to the progress. And
we're just going to check if
113

114
00:08:54,281 --> 00:08:59,561
the progress is lower or or
equal to zero then well we're
114

115
00:08:59,561 --> 00:09:04,201
finished so let's call
onFinished. Okay? But also we
115

116
00:09:04,201 --> 00:09:07,721
want to clean the interval
here. Otherwise it's going to
116

117
00:09:07,721 --> 00:09:11,641
keep running behind the scene
and we don't want that. So it
117

118
00:09:11,641 --> 00:09:16,761
means that we have to store
here the timer and there is
118

119
00:09:16,761 --> 00:09:19,721
actually a type that exist for
a set interval okay if you pass
119

120
00:09:19,721 --> 00:09:23,401
your mouse over you have the
nodeJS dot timer so that is
120

121
00:09:23,401 --> 00:09:28,041
what this is. So when the
component amount we want to
121

122
00:09:28,041 --> 00:09:31,881
clear the timer so we're going
to return a function that's how
122

123
00:09:31,881 --> 00:09:36,281
we're going to clean things and
here we're going to clear the
123

124
00:09:36,281 --> 00:09:42,941
interval timer but even if the
component doesn't amount maybe
124

125
00:09:42,941 --> 00:09:46,701
we want to also clear the
interval when we reach zero so
125

126
00:09:46,701 --> 00:09:50,701
we could also clear the
interval here but hey the timer
126

127
00:09:50,701 --> 00:09:53,501
is declared here so we don't
have access to the timer so
127

128
00:09:53,501 --> 00:09:57,981
what we can do is not declare
it here we're going to declare
128

129
00:09:57,981 --> 00:10:01,741
it outside of our component and
that's fine that's fine because
129

130
00:10:01,741 --> 00:10:05,821
this is not something that
we're going to use inside the
130

131
00:10:05,821 --> 00:10:08,621
return here it's not something
that is rendered it's not
131

132
00:10:08,621 --> 00:10:12,921
something that is related a
state, okay? Uh this is just an
132

133
00:10:12,921 --> 00:10:17,561
ID behind the scene. So we're
just going to clear it here and
133

134
00:10:17,561 --> 00:10:24,641
it should work fine. Okay so
technically now at least it
134

135
00:10:24,641 --> 00:10:29,121
should stop when I reach zero
let's see
135

136
00:10:31,721 --> 00:10:39,021
okay it stopped but something
went wrong and the onFinished
136

137
00:10:39,021 --> 00:10:42,221
oh is not a function obviously
we're not sending onFinished
137

138
00:10:42,221 --> 00:10:47,821
yet so it's crashing so we're
going to send an onFinished
138

139
00:10:47,821 --> 00:10:50,941
function here and actually what
do we want to do when we're
139

140
00:10:50,941 --> 00:10:57,261
finished well we want to set
the question as failed and we
140

141
00:10:57,261 --> 00:11:02,041
also want to move to the next
question so what we're do is
141

142
00:11:02,041 --> 00:11:05,321
we're going to create all the
function is going to be fail
142

143
00:11:05,321 --> 00:11:08,201
question
143

144
00:11:09,721 --> 00:11:13,741
So first we're going to add an
error in G story. So set 
144

145
00:11:13,741 --> 00:11:19,621
history and we're going to set
everything that was there plus
145

146
00:11:19,621 --> 00:11:26,941
an error and we're going to set
the question status to invalid.
146

147
00:11:26,941 --> 00:11:31,341
By doing that it's going to
trigger the animation like this
147

148
00:11:31,341 --> 00:11:34,541
is listening to the question
status and when it's going to
148

149
00:11:34,541 --> 00:11:38,061
finish everything should run
correctly because it's going to
149

150
00:11:38,061 --> 00:11:40,781
move to the next question and
set the question status to
150

151
00:11:40,781 --> 00:11:45,141
unanswered. So everything
should go as expected. So here
151

152
00:11:45,141 --> 00:11:50,501
onFinished we could just call
fake question but instead of
152

153
00:11:50,501 --> 00:11:54,021
declaring a function that call
a function we can just send
153

154
00:11:54,021 --> 00:12:00,501
directly the function to run.
Fake question. And now let's
154

155
00:12:00,501 --> 00:12:07,441
see. I'm going to refresh. Now
let's wait and let's see if we
155

156
00:12:07,441 --> 00:12:12,001
have an error by default when
we reach zero.
156

157
00:12:13,721 --> 00:12:17,981
And yeah it seems that it's
working and we're moving to the
157

158
00:12:17,981 --> 00:12:22,061
next question so everything is
super fine okay so now we're
158

159
00:12:22,061 --> 00:12:25,341
good for the timer so maybe we
could move to the score screen
159

160
00:12:25,341 --> 00:12:29,261
so let's do that in the next
one