Tracking Countdown & Overdue Time

[00:00:00]
>> Kadi Kraman: All right, so the next thing is this little segment which renders this number and the seconds underneath and actually created this component for us. So we could just copy it because it's things that we've built already, so there's no point. I'm not going to type it live.

[00:00:21]
But in your components if you create a file called time segment. I called it time segment here, but it should be time segment. So let's go to the components and time segment.tx.
>> Kadi Kraman: And I will just copy this file,
>> Kadi Kraman: So we've kind of a similar style as, so we've used all of these things before, I think, so we have properties.

[00:01:02]
This is the react thing where you can do structure properties, it takes the number, the unit, so day, month, whatever. And I've also optionally passed in a text style.
>> Kadi Kraman: I passed in the text style, so it would be flexible, so we could make the text white or black depending on the UI that we need.

[00:01:29]
So this is actually a handy thing that you can use if you are using touch script, and I hope you can use this text style prop, which is exported for type, which is exported from React Native. So this guarantees that you are not going to pass nonsense in there that isn't actually a style.

[00:01:48]
So we need to distinguish between our overdue state and our not overdue state. So let's start by creating a type, for what we want to store. So we want to store a countdown status, and we want to know whether it's overdue. So whether we're entering a big old red screen or not, this will be a boolean.

[00:02:20]
>> Kadi Kraman: We also want to have a distance, and we're going to use a utility function from date functions to calculate this. This is going to be the return type of interval to duration. This is probably the most complicated TypeScript thing we're going to show, but you can use ReturnType and typeof, interval to duration, which is imported from date function.

[00:02:57]
And this is handy because I don't need so interval to duration, so it has a return type here it says a ReturnType of duration so if we go in here so this is what it looks like so it will have years, so it will be an object that will have years, months, weeks, days, hours, minutes, seconds as optional numbers.

[00:03:16]
To derive the numbers or zero, so I could actually do duration here and import it from date function. Maybe that would be nicer. Well, now you know. So if you need, so this will give you the return type of this function that I've called, but actually now that I've gone all the way through it, I think it looks a little bit clearer if I actually just do duration here.

[00:03:50]
>> Kadi Kraman: All right, and then let's do a useState to store our current countdown status. So let's do a const, so this will be status, and set status. I'll do a useState and if you wanna tell the useState, so this is a touch script thing. If you wanna tell the useState what type it's going to be, use these angle brackets and you can put the type in here.

[00:04:23]
Saying that everything posted has to be of that type and we're going to give it a value which should be not overdue.
>> Kadi Kraman: And let's do a distance of an empty object, so everything will be null. So let's also do a timestamp. So this is going to be dynamic eventually.

[00:04:48]
But let's start with a timestamp, so const, timestamp, timestamp, which is date dot now, plus ten times 1000, okay, so this is basically our due date timestamp. So this will be for our testing purposes, so I made it quite small so I made it ten seconds, this is ten seconds from now, and I've hard coded it so it will be ten seconds from when I load the app.

[00:05:27]
And we're gonna use this as our deadline date for testing purposes. So in our useEffect, when we set our interval we want to set the initial value of this countdown status, so this thing here. So for this we want to check whether the thing that we are checking for is overdue or not.

[00:05:48]
So whether this timestamp is in the future or in the past. So const is overdue. And this is where the date functions comes in. So we can use a utility function from here called isBefore, and basically this tells us whether the first date we passed in is before the second one.

[00:06:12]
So timestamp and date dot now.
>> Kadi Kraman: I've forgot to actually call the function, there we go. So this will return a Boolean, and now we can also, we can use another utility function from data functions, which is interval to duration. So this is what we're using this duration from, so that was why I was using the return type of the function.

[00:06:49]
But if we do interva lto duration, so const distance [COUGH]. Interval to duration and the duration that we're calculating it actually depends on whether the thing was overdue or not. So let's do if it is overdue,
>> Kadi Kraman: Then we need to pass in a start and the end.

[00:07:16]
So start from the timestamp and end, so the distance needs to be linear. So if current time is after the timestamp, then we start from this timestamp and we end at date.now. And otherwise we do the converse, so we start at date.now and we end at the timestamp.

[00:07:56]
>> Kadi Kraman: And we'll call setStatus. So is overdue, and the distance. Lovely, now we can get rid of our seconds elapsed code as well, cuz we're not going to be using that anymore.
>> Kadi Kraman: Okay, so if I just console log the status, just to make sure that everything is working.

[00:08:28]
Console log programming is where it's at, there we go. So it's ticking away and there we go. So I got to one second and it's saying that it is overdue and now it overdue switch to true and now it is ticking away, so our UI will update every second as well.

[00:08:48]
We have the data for it. We need to build the actual UI to update.