Inside of our order show component, we're not going to work on showing a little timer to the user.
This timer is going to update once per second.
It's going to start off at 60 seconds and eventually count down to zero.
As soon as it hits zero, we're then going to hide.
The timer and hide the pay button.
And we'll show some message instead that says something like, sorry about your order has been canceled
or has been expired or something similar to that.
Now, first thing I want to do is show you how we can very easily get the time that we have left to
actually pay for the order.
So back over here, I'm going to refresh my.
I'm going to go back to the ticket creation page.
I'm going to make sure I've got my network request log open and I'll click on purchase.
So I just made an order and I can see it inside of my network request log.
Don't we fetch that order?
Remember that it has the expires at property.
And that is a timestamp.
So to calculate the number of seconds until expires that comes or passes or elapses, however you want
to refer to that, we can write out new dates, then paste in the expires at time.
And that front that I'm going to subtract.
New date like so, and that's going to give me the number of milliseconds until that time.
Right there is, I suppose, in the present or right now.
So I run again.
It's at seventeen, sixteen, fifteen, fourteen and so on.
Now I say fifteen.
That means this is again fourteen thousand milliseconds.
Divide that by a thousand.
That gives us seconds.
So that's pretty much the calculation we need to do and we need to run that calculation once per second
every time we run the calculation and figure out how many milliseconds are left.
We're going to update a piece of state inside of our auto show component and simply show that piece
of state on the screen.
That's pretty much it.
It's not the worst thing in the world.
They're back inside of order, so we first need to get access to the order that we're trying to show
on the screen.
And so once again, that means we have to define a get initial props function and fetch the order.
Don't put in order so that get initial props.
Again, this will be an async function.
That's going to receive context and wyant.
I'll then pull the order I.D..
Out of context, dot query.
And again, it is specifically order I.D., because that is how we named our file square brackets.
Order I.D..
Then defense details about the order are going to pull out data from the Axios response coming from
a wait Wyandotte get.
We'll use a template string right here and put an API orders.
Order I.D..
And then at the bottom, I'm going to return.
As data now, again, we've spoken about this several times, this object is gonna be merged with all
the different prompts going to auto show.
So we should now be able to restructure out the order like so.
Get.
So to get started.
Let's just try to calculate the number of seconds left before this order expires and just show that
as a fixed value inside Esteve.
So to calculate the number of seconds we have left, we would put in.
Imus left, which is going to stand for milliseconds left, and that will be new date Rahmah order DOT
expires at.
And also check from that new date.
Then inside the d'Hiv.
I'm going to delete order show and I will replace it with.
Square curly braces.
Imus left divided by a thousand just to turn it into seconds and then seconds until order expires.
OK, let's save that and do another test.
So back over here, we might immediately have a little bit of an issue, and you might also notice that
we've got a negative time right here.
So don't worry too much about the warning that we have down here that's related to some behind the scenes
stuff going on with next J.S. Toli.
Fine.
The reason we're seeing a negative value right here and chance are you see a negative one as well?
Is that.
Well, the order itself has already expired.
Let's go and create another order.
And we should see it initially start off at about sixty or fifty nine seconds or so.
It's going to go back to my main ticket listing.
I'll view one of these tickets.
I'll purchase it.
And there we go.
I get fifty nine point nine nine seconds until the order expires.
OK, so not the worst thing the world once again.
So now let's put together a Intervale function.
So, again, you set interval to essentially run this calculation once per second and every second we're
going to recalculate the number of milliseconds left.
And then, like I said, update a piece of state which will cause the entire component to re render.
To set up the interval, we're going to make use of the use effect hook as well to make sure that we
only attempt to set the interval up exactly one time.
It's up to file.
I'm going to import use effect and use state.
Well, then create a new piece of states that I will call, I am left.
And got a deep thought that to be an anti string.
I'm then going to create.
A U.S.
Effect took.
When my component first renders I want to call this function right here.
Only one time we're going to put together a set interval call inside of here.
That's gonna make sure that we calculate the amount of time left.
Once per second, I only want to set up that interval exactly once.
So to make sure that I run this function only one time when the components first displayed on the screen,
I gonna put in an empty array like so.
Then inside of here, I'm going to write out a function that is going to actually calculate the amount
of time that we have remaining.
So I will put in find time left.
I'm going to take the Imus left line that we just put together right here.
I'm going to cut it and put it into find time left.
And then after finding the number of milliseconds left, I'm going to use that millisecond value right
there to update the time left piece of state.
Those set time left are going to pass in M.S. left are going to divide that by 1000 to convert it into
seconds.
And I'm also going to round this value so we don't get the fifty nine point nine nine.
Instead, we'll round it to just 60 seconds.
So going around the little calculation right there with a math dot round.
It's now every time we call.
Find time left.
We're going to update our time left piece of state.
Now, we just need to make sure that we call that little helper function once per second.
So right after that function, I'm going to set up at a interval, so set interval.
I'm gonna to tell this thing to call find time left once every second, though, once every 1000 milliseconds.
Once again, notice that I do not have any parentheses after find time left.
If we put parentheses on there, then that is going to invoke that function and then pass the results
off to set interval.
That's not what we want.
We want to provide a reference to the find time line function to set interval instead.
OK.
Now, this right here is going to more or less work.
We do have to update the render or the actual G.S. expert turning down here.
But before we actually test this out, there are two little short comings around it.
First off, set interval is going to run for the first time, 1000 milliseconds into the future.
So, in other words, if you call set interval, it's going to wait that amount of time before calling
that function for the very first time.
That means that inside of our app, we're going to essentially have to wait one second.
When this components first rendered before we're going to see any time appear.
Probably not what we want.
We do not want to go one second without showing any time.
We want to show a time remaining up your instantly.
So I'm going to manually invoke bind.
I'm left immediately.
That's going to update our time left right away.
And then one second later, start to call it again and again and again.
That's first fixed number one, the second little fix whenever he calls that interval.
That's going to set up an interval or timer that's going to run for ever unless we actually stop it.
So if we ever navigate away from this components, the timer is still going to be running.
So we need to make sure that if we ever navigate away, we stop the interval entirely.
So to do so, whenever we set up an interval, we're going to get back a timer I.D..
This is an integer that is going to identify the interval that we just created.
Then to make sure that we turn off or stop this interval, as soon as we navigate away from this component,
I'm going to return a function from use effect.
And inside there, I will call clear into role and pass in the timer idee.
Whenever we return a function from USIE effect, that function will be invoked.
If you're about to navigate away from this component or if the component is going to be re rendered,
it's only going to call it if the components about to be re rendered.
If we have a dependency listed inside of this array right here.
But since we have an empty array.
This function is only going to be called if we navigate away or stop showing this component.
For some reason.
OK, so that should work.
Listen, we have to make her take care of, though.
We have to make sure that we actually use time left inside of our day down here instead of the mess
left.
So let's update that div.
And we'll say, well, time left to pay.
And we'll stick in here.
I'm left seconds.
And I should be at.
Now, just, you know, we might get a little warning when we try to run this code because we are referencing
some kind of dependency inside of your.
Without reference to get inside of that array.
So if you see a warning inside of your console that says something like, oh, you have to provide a
dependency list to use effect.
We've got to do is add inside of your order like.
So that should make that little warning that might pop up, go away.
Gets let's save that, you know, flip back over.
I can refresh and there we go.
So we're going further and further negative right now.
Well, let's try to create another order and make sure that just counts down from 60.
So I'll go back to my list of tickets.
Going to create a new order.
There we go.
60, 59, 58, 57 and so on.
Well, Taimur definitely works.
Devlin looks good.
Now, all we have to do is make sure that once this thing hits zero seconds, we update the entire component.
And presumably it shows something that instead of says time left to pay, we should instead just say
sorry, but the order has expired.
Let's give that a shot in just a moment.