State Machine Exercise

[00:00:00]
>> Okay, so let's get into the first exercise. What you should do if you're on the main screen over here, go ahead and click Exercise 00, Creating a state machine. And so in this exercise, we're going to be doing the exact same thing that I showed you, which is creating a state machine from scratch and putting it in useReducer.

[00:00:22]
Again, you could either use switch case statements or you could use that Object Notation that I showed you. So our state machine is going to have three states, idle, running and paused. So idle means the timer hasn't started yet. Running means the timer is currently counting down, which is not going to work yet because we haven't added the ticker yet.

[00:00:45]
That's for a future exercise. And, we have the paused state, so that you could pause the timer at any time. The machine should start in the idle stat and then when the toggle event happens, where basically toggling between running and paused. So that's what that play button is going to do here.

[00:01:03]
We also have a reset button here, where it's going to allow you to just start the machine back in idle. And so that should happen in the paused state. And so those toggle events should be dispatched when you click this start timer and pause timer. You'll see that the buttons switches between start and pause.

[00:01:27]
And also if you click this, that should also do the same thing as that button. And honestly, that's where that logic just centralizing that logic becomes really helpful. So that instead of copying and pasting your logic for both this and the button, you could just dispatch the same events and that's going to do the same thing.

[00:01:48]
There's also some restrictions like only show the pause timer when you're in the running state. Obviously, you don't wanna pause in the already paused timer and only show the start timer button when we're either in paused or idle. You don't wanna show the play button when it's already playing.

[00:02:05]
Which sounds like how could anyone make that mistake but honestly, at the time of this workshop, there's a lot of election news sites going on. And some of the videos have that play button, where you keep pressing play and it doesn't go away. Or even if the video is already playing, it shows that play button or it shows the pause button at the wrong time.

[00:02:26]
State machines just make you notice all of these logic problems. So, yeah, all right? The exercise material is going to be in these two files. We have timer.js. And you're going to see a lot of hints on how you should do this just throughout the file, especially these comments with the three dots.

[00:02:48]
That's usually an indication that you should be doing something there. And there's also this timer machine file, which this is going to be that reducer. So you could create this however you want. If you wanna use the objects, there's this timer machine config or you could use a switch statement.