Context Solution

[00:00:00]
>> All right, so let's get on to the exercise that we did previously, we had a few things to do because we needed to keep track of a bunch of things. Namely, we need to keep track of the duration, the elapsed time and the interval. So let's start with that.

[00:00:17]
If we go to the timer machine, we're going to be adding our initial context here, which is the duration, we'll just set it to 60 for now. Elapsed which is 0 because the timer hasn't been running yet. And the interval, which is 0.1 or one-tenth of a second.

[00:00:39]
Now we're going to be using state.context like you saw in the scratchpad example to display that elapsed time. So if we go to timer, we want to show that time in elapsed. So if we go to elapsed over here, we already have that duration in elapsed being pulled in from here, but this needs to be the state.context.

[00:01:04]
This is where we're going to be grabbing those values. So if we console.log state.context. You'll be able to see in Exercise 02, you'll be able to see what each of those values are, which is the values that we set it to. So remember, there's two properties that are important, state.value and state.context.

[00:01:28]
State.value shows you the finite state. State.context shows you the extended states. All right, so now we have to make this ADD_MINUTE button work. And so this ADD_MINUTE of course is going to be adding one minute or 60 seconds to the duration. So let's go to that add button or that plus one button and we're going to be sending that ADD_MINUTE event.

[00:02:01]
Now let's go to our timer machine and make sure that that event actually adds one minute. So when it's running, on ADD_MINUTE we want to increment the context duration by 60 seconds. So just like we saw in the scratchpad example, we could make an ADD_MINUTE transition. And it's not gonna have a target.

[00:02:25]
The target's going to be undefined and the reason is because we still want to be in the running state. We don't wanna pause it or restart it or anything different when we add a minute. We want it to be doing the exact same thing that it's currently doing but we also want to increment the duration at the same time.

[00:02:43]
So we're gonna say actions. And we're going to assign the duration to, we pull in the context and this is going to be the context.duration + 60. So let's see if that works. If we go back here and we click + 1, we're not in the running state so that shouldn't be doing anything.

[00:03:09]
But once we're in the running state and we click that, it should be updating the context. So let's reload. So click +1. Now you see it goes to 120 and we could keep making this go up. And so this is what I mean by infinite states. There's infinite ways of representing integers or numbers or any extended data like that.

[00:03:33]
Now, if we want to reset it, we want to basically just set elapsed back to 0 and do a couple of other things. So when we're in the running state, we have ADD_MINUTE. And when we're in the idle state, we reset the duration in the lapsed values back to their original values.

[00:03:59]
So we could do that right over here. So on entry, which is this entry property, we are going to assign [COUGH] duration back to 60, and elapsed back to 0. In this case, elapsed isn't changing because there's nothing that changes that. We're gonna see that in a future lesson.

[00:04:29]
But essentially, we're saying every single time, no matter what transition causes us to go back to idle, whenever we reach this idle state we want to set the duration in elapsed back. All right, so doing this again. If we click play, add minute. If we pause and we click Reset, it goes back to 60.

[00:04:55]
Now as always, you could go to the workshop. And you could see the final version by going to timer.final and see that everything is working the exact same way. So we could add a minute and modify that context. We could reset it back to 60 and that's how everything should work.

[00:05:25]
Were there any questions on that exercise?
>> Just about the target being undefined? Do you have to explicitly set that or were you just demonstrating to show that you don't need to change it?
>> So the question was about the target being undefined. When you don't want to transition away from that state, by default, the target is going to be undefined.

[00:05:48]
So you could just remove that there. And essentially this becomes a transition where the only thing that's happening is you have these actions being executed. But yeah, by default, the target is undefined and so you don't need to explicitly put that there.