1
00:00:01,100 --> 00:00:04,970
Inside of our order show component, we're not going to work on showing a little timer to the user.

2
00:00:05,420 --> 00:00:07,490
This timer is going to update once per second.

3
00:00:07,760 --> 00:00:11,120
It's going to start off at 60 seconds and eventually count down to zero.

4
00:00:11,630 --> 00:00:13,650
As soon as it hits zero, we're then going to hide.

5
00:00:13,730 --> 00:00:15,880
The timer and hide the pay button.

6
00:00:16,100 --> 00:00:19,880
And we'll show some message instead that says something like, sorry about your order has been canceled

7
00:00:20,150 --> 00:00:22,310
or has been expired or something similar to that.

8
00:00:23,380 --> 00:00:27,720
Now, first thing I want to do is show you how we can very easily get the time that we have left to

9
00:00:27,720 --> 00:00:28,770
actually pay for the order.

10
00:00:29,640 --> 00:00:33,670
So back over here, I'm going to refresh my.

11
00:00:33,960 --> 00:00:35,890
I'm going to go back to the ticket creation page.

12
00:00:36,860 --> 00:00:40,930
I'm going to make sure I've got my network request log open and I'll click on purchase.

13
00:00:41,530 --> 00:00:44,270
So I just made an order and I can see it inside of my network request log.

14
00:00:45,190 --> 00:00:46,540
Don't we fetch that order?

15
00:00:46,660 --> 00:00:49,200
Remember that it has the expires at property.

16
00:00:49,450 --> 00:00:50,560
And that is a timestamp.

17
00:00:51,350 --> 00:00:57,760
So to calculate the number of seconds until expires that comes or passes or elapses, however you want

18
00:00:57,760 --> 00:01:04,420
to refer to that, we can write out new dates, then paste in the expires at time.

19
00:01:08,970 --> 00:01:10,800
And that front that I'm going to subtract.

20
00:01:12,020 --> 00:01:19,250
New date like so, and that's going to give me the number of milliseconds until that time.

21
00:01:19,310 --> 00:01:22,250
Right there is, I suppose, in the present or right now.

22
00:01:22,550 --> 00:01:23,300
So I run again.

23
00:01:23,340 --> 00:01:26,780
It's at seventeen, sixteen, fifteen, fourteen and so on.

24
00:01:27,290 --> 00:01:28,560
Now I say fifteen.

25
00:01:28,850 --> 00:01:31,760
That means this is again fourteen thousand milliseconds.

26
00:01:31,760 --> 00:01:32,890
Divide that by a thousand.

27
00:01:32,900 --> 00:01:33,860
That gives us seconds.

28
00:01:34,160 --> 00:01:38,270
So that's pretty much the calculation we need to do and we need to run that calculation once per second

29
00:01:39,050 --> 00:01:42,170
every time we run the calculation and figure out how many milliseconds are left.

30
00:01:42,410 --> 00:01:46,880
We're going to update a piece of state inside of our auto show component and simply show that piece

31
00:01:46,880 --> 00:01:47,810
of state on the screen.

32
00:01:48,050 --> 00:01:48,680
That's pretty much it.

33
00:01:48,780 --> 00:01:49,820
It's not the worst thing in the world.

34
00:01:52,790 --> 00:01:57,870
They're back inside of order, so we first need to get access to the order that we're trying to show

35
00:01:57,870 --> 00:01:58,380
on the screen.

36
00:01:59,010 --> 00:02:03,450
And so once again, that means we have to define a get initial props function and fetch the order.

37
00:02:04,750 --> 00:02:08,350
Don't put in order so that get initial props.

38
00:02:09,760 --> 00:02:11,320
Again, this will be an async function.

39
00:02:13,350 --> 00:02:16,050
That's going to receive context and wyant.

40
00:02:17,620 --> 00:02:19,710
I'll then pull the order I.D..

41
00:02:21,640 --> 00:02:23,200
Out of context, dot query.

42
00:02:23,260 --> 00:02:27,820
And again, it is specifically order I.D., because that is how we named our file square brackets.

43
00:02:27,850 --> 00:02:28,420
Order I.D..

44
00:02:30,910 --> 00:02:35,710
Then defense details about the order are going to pull out data from the Axios response coming from

45
00:02:35,770 --> 00:02:37,570
a wait Wyandotte get.

46
00:02:39,240 --> 00:02:42,510
We'll use a template string right here and put an API orders.

47
00:02:43,870 --> 00:02:44,740
Order I.D..

48
00:02:47,040 --> 00:02:48,600
And then at the bottom, I'm going to return.

49
00:02:51,920 --> 00:02:56,450
As data now, again, we've spoken about this several times, this object is gonna be merged with all

50
00:02:56,450 --> 00:02:57,890
the different prompts going to auto show.

51
00:02:58,100 --> 00:03:02,210
So we should now be able to restructure out the order like so.

52
00:03:04,640 --> 00:03:04,840
Get.

53
00:03:04,960 --> 00:03:05,650
So to get started.

54
00:03:05,710 --> 00:03:11,470
Let's just try to calculate the number of seconds left before this order expires and just show that

55
00:03:11,500 --> 00:03:13,690
as a fixed value inside Esteve.

56
00:03:14,580 --> 00:03:17,540
So to calculate the number of seconds we have left, we would put in.

57
00:03:18,850 --> 00:03:26,800
Imus left, which is going to stand for milliseconds left, and that will be new date Rahmah order DOT

58
00:03:27,100 --> 00:03:28,060
expires at.

59
00:03:28,660 --> 00:03:30,870
And also check from that new date.

60
00:03:32,750 --> 00:03:33,620
Then inside the d'Hiv.

61
00:03:33,670 --> 00:03:36,500
I'm going to delete order show and I will replace it with.

62
00:03:38,490 --> 00:03:39,900
Square curly braces.

63
00:03:42,230 --> 00:03:49,380
Imus left divided by a thousand just to turn it into seconds and then seconds until order expires.

64
00:03:52,760 --> 00:03:55,380
OK, let's save that and do another test.

65
00:03:56,610 --> 00:04:02,690
So back over here, we might immediately have a little bit of an issue, and you might also notice that

66
00:04:02,690 --> 00:04:04,250
we've got a negative time right here.

67
00:04:04,820 --> 00:04:08,930
So don't worry too much about the warning that we have down here that's related to some behind the scenes

68
00:04:08,930 --> 00:04:10,470
stuff going on with next J.S. Toli.

69
00:04:10,610 --> 00:04:10,930
Fine.

70
00:04:11,630 --> 00:04:15,170
The reason we're seeing a negative value right here and chance are you see a negative one as well?

71
00:04:15,230 --> 00:04:15,590
Is that.

72
00:04:15,620 --> 00:04:17,420
Well, the order itself has already expired.

73
00:04:17,960 --> 00:04:19,160
Let's go and create another order.

74
00:04:19,190 --> 00:04:23,360
And we should see it initially start off at about sixty or fifty nine seconds or so.

75
00:04:24,620 --> 00:04:26,200
It's going to go back to my main ticket listing.

76
00:04:26,770 --> 00:04:28,030
I'll view one of these tickets.

77
00:04:28,090 --> 00:04:28,840
I'll purchase it.

78
00:04:29,290 --> 00:04:29,870
And there we go.

79
00:04:29,890 --> 00:04:32,890
I get fifty nine point nine nine seconds until the order expires.

80
00:04:33,890 --> 00:04:36,140
OK, so not the worst thing the world once again.

81
00:04:37,860 --> 00:04:40,410
So now let's put together a Intervale function.

82
00:04:40,470 --> 00:04:45,960
So, again, you set interval to essentially run this calculation once per second and every second we're

83
00:04:45,960 --> 00:04:48,030
going to recalculate the number of milliseconds left.

84
00:04:48,390 --> 00:04:52,380
And then, like I said, update a piece of state which will cause the entire component to re render.

85
00:04:53,680 --> 00:04:58,300
To set up the interval, we're going to make use of the use effect hook as well to make sure that we

86
00:04:58,300 --> 00:05:01,060
only attempt to set the interval up exactly one time.

87
00:05:02,170 --> 00:05:02,950
It's up to file.

88
00:05:04,770 --> 00:05:08,780
I'm going to import use effect and use state.

89
00:05:12,290 --> 00:05:16,590
Well, then create a new piece of states that I will call, I am left.

90
00:05:21,520 --> 00:05:23,380
And got a deep thought that to be an anti string.

91
00:05:25,770 --> 00:05:26,910
I'm then going to create.

92
00:05:28,310 --> 00:05:28,700
A U.S.

93
00:05:28,760 --> 00:05:29,360
Effect took.

94
00:05:33,100 --> 00:05:36,810
When my component first renders I want to call this function right here.

95
00:05:36,850 --> 00:05:40,360
Only one time we're going to put together a set interval call inside of here.

96
00:05:40,580 --> 00:05:42,620
That's gonna make sure that we calculate the amount of time left.

97
00:05:42,640 --> 00:05:46,360
Once per second, I only want to set up that interval exactly once.

98
00:05:46,780 --> 00:05:50,950
So to make sure that I run this function only one time when the components first displayed on the screen,

99
00:05:51,320 --> 00:05:53,290
I gonna put in an empty array like so.

100
00:05:55,190 --> 00:05:58,820
Then inside of here, I'm going to write out a function that is going to actually calculate the amount

101
00:05:58,820 --> 00:05:59,990
of time that we have remaining.

102
00:06:00,590 --> 00:06:03,080
So I will put in find time left.

103
00:06:07,340 --> 00:06:10,070
I'm going to take the Imus left line that we just put together right here.

104
00:06:10,350 --> 00:06:12,770
I'm going to cut it and put it into find time left.

105
00:06:14,040 --> 00:06:18,010
And then after finding the number of milliseconds left, I'm going to use that millisecond value right

106
00:06:18,010 --> 00:06:21,520
there to update the time left piece of state.

107
00:06:24,000 --> 00:06:30,780
Those set time left are going to pass in M.S. left are going to divide that by 1000 to convert it into

108
00:06:30,780 --> 00:06:31,380
seconds.

109
00:06:31,910 --> 00:06:36,120
And I'm also going to round this value so we don't get the fifty nine point nine nine.

110
00:06:36,180 --> 00:06:38,460
Instead, we'll round it to just 60 seconds.

111
00:06:39,460 --> 00:06:43,460
So going around the little calculation right there with a math dot round.

112
00:06:46,870 --> 00:06:48,060
It's now every time we call.

113
00:06:48,170 --> 00:06:49,010
Find time left.

114
00:06:49,340 --> 00:06:51,400
We're going to update our time left piece of state.

115
00:06:51,950 --> 00:06:55,350
Now, we just need to make sure that we call that little helper function once per second.

116
00:06:56,860 --> 00:07:00,590
So right after that function, I'm going to set up at a interval, so set interval.

117
00:07:02,690 --> 00:07:09,760
I'm gonna to tell this thing to call find time left once every second, though, once every 1000 milliseconds.

118
00:07:10,820 --> 00:07:14,300
Once again, notice that I do not have any parentheses after find time left.

119
00:07:14,330 --> 00:07:19,010
If we put parentheses on there, then that is going to invoke that function and then pass the results

120
00:07:19,010 --> 00:07:19,940
off to set interval.

121
00:07:20,120 --> 00:07:20,900
That's not what we want.

122
00:07:21,200 --> 00:07:25,190
We want to provide a reference to the find time line function to set interval instead.

123
00:07:26,760 --> 00:07:26,950
OK.

124
00:07:27,000 --> 00:07:29,250
Now, this right here is going to more or less work.

125
00:07:29,340 --> 00:07:33,330
We do have to update the render or the actual G.S. expert turning down here.

126
00:07:33,840 --> 00:07:37,260
But before we actually test this out, there are two little short comings around it.

127
00:07:37,890 --> 00:07:43,590
First off, set interval is going to run for the first time, 1000 milliseconds into the future.

128
00:07:43,890 --> 00:07:48,750
So, in other words, if you call set interval, it's going to wait that amount of time before calling

129
00:07:48,750 --> 00:07:50,340
that function for the very first time.

130
00:07:51,210 --> 00:07:54,510
That means that inside of our app, we're going to essentially have to wait one second.

131
00:07:54,780 --> 00:07:58,160
When this components first rendered before we're going to see any time appear.

132
00:07:59,210 --> 00:08:00,200
Probably not what we want.

133
00:08:00,260 --> 00:08:02,660
We do not want to go one second without showing any time.

134
00:08:02,720 --> 00:08:04,940
We want to show a time remaining up your instantly.

135
00:08:05,550 --> 00:08:08,000
So I'm going to manually invoke bind.

136
00:08:08,300 --> 00:08:09,930
I'm left immediately.

137
00:08:10,790 --> 00:08:12,800
That's going to update our time left right away.

138
00:08:13,040 --> 00:08:16,670
And then one second later, start to call it again and again and again.

139
00:08:18,550 --> 00:08:22,930
That's first fixed number one, the second little fix whenever he calls that interval.

140
00:08:22,990 --> 00:08:28,030
That's going to set up an interval or timer that's going to run for ever unless we actually stop it.

141
00:08:28,780 --> 00:08:32,740
So if we ever navigate away from this components, the timer is still going to be running.

142
00:08:33,190 --> 00:08:37,630
So we need to make sure that if we ever navigate away, we stop the interval entirely.

143
00:08:39,210 --> 00:08:43,460
So to do so, whenever we set up an interval, we're going to get back a timer I.D..

144
00:08:44,250 --> 00:08:48,060
This is an integer that is going to identify the interval that we just created.

145
00:08:49,080 --> 00:08:53,670
Then to make sure that we turn off or stop this interval, as soon as we navigate away from this component,

146
00:08:53,880 --> 00:08:57,030
I'm going to return a function from use effect.

147
00:08:58,310 --> 00:09:02,320
And inside there, I will call clear into role and pass in the timer idee.

148
00:09:03,700 --> 00:09:07,630
Whenever we return a function from USIE effect, that function will be invoked.

149
00:09:07,750 --> 00:09:12,280
If you're about to navigate away from this component or if the component is going to be re rendered,

150
00:09:13,240 --> 00:09:15,520
it's only going to call it if the components about to be re rendered.

151
00:09:15,910 --> 00:09:19,360
If we have a dependency listed inside of this array right here.

152
00:09:19,870 --> 00:09:21,130
But since we have an empty array.

153
00:09:21,640 --> 00:09:25,460
This function is only going to be called if we navigate away or stop showing this component.

154
00:09:25,480 --> 00:09:26,140
For some reason.

155
00:09:27,830 --> 00:09:28,820
OK, so that should work.

156
00:09:29,010 --> 00:09:30,770
Listen, we have to make her take care of, though.

157
00:09:30,980 --> 00:09:35,240
We have to make sure that we actually use time left inside of our day down here instead of the mess

158
00:09:35,240 --> 00:09:35,570
left.

159
00:09:35,970 --> 00:09:36,890
So let's update that div.

160
00:09:38,760 --> 00:09:42,110
And we'll say, well, time left to pay.

161
00:09:43,720 --> 00:09:44,860
And we'll stick in here.

162
00:09:45,850 --> 00:09:47,980
I'm left seconds.

163
00:09:49,750 --> 00:09:50,590
And I should be at.

164
00:09:52,290 --> 00:09:56,810
Now, just, you know, we might get a little warning when we try to run this code because we are referencing

165
00:09:56,870 --> 00:09:58,580
some kind of dependency inside of your.

166
00:09:59,660 --> 00:10:01,700
Without reference to get inside of that array.

167
00:10:01,880 --> 00:10:05,660
So if you see a warning inside of your console that says something like, oh, you have to provide a

168
00:10:05,660 --> 00:10:07,160
dependency list to use effect.

169
00:10:07,490 --> 00:10:09,980
We've got to do is add inside of your order like.

170
00:10:09,980 --> 00:10:12,680
So that should make that little warning that might pop up, go away.

171
00:10:14,240 --> 00:10:16,050
Gets let's save that, you know, flip back over.

172
00:10:17,170 --> 00:10:19,450
I can refresh and there we go.

173
00:10:19,900 --> 00:10:22,060
So we're going further and further negative right now.

174
00:10:23,410 --> 00:10:27,070
Well, let's try to create another order and make sure that just counts down from 60.

175
00:10:28,070 --> 00:10:29,460
So I'll go back to my list of tickets.

176
00:10:29,830 --> 00:10:30,960
Going to create a new order.

177
00:10:31,050 --> 00:10:31,590
There we go.

178
00:10:31,620 --> 00:10:34,530
60, 59, 58, 57 and so on.

179
00:10:35,590 --> 00:10:36,790
Well, Taimur definitely works.

180
00:10:36,900 --> 00:10:37,600
Devlin looks good.

181
00:10:38,140 --> 00:10:44,590
Now, all we have to do is make sure that once this thing hits zero seconds, we update the entire component.

182
00:10:44,650 --> 00:10:49,660
And presumably it shows something that instead of says time left to pay, we should instead just say

183
00:10:49,690 --> 00:10:51,130
sorry, but the order has expired.

184
00:10:52,080 --> 00:10:53,670
Let's give that a shot in just a moment.