HELP - 25+5 Clock - Can't get Clock to start "Break" countdown on its own

JavaScript
1

Hi Campers,

I’ve been struggling with the 25+5 Clock for a while now, which is the last project to clear the Front-End Dev Section (I feel so close :frowning: )

https://codesandbox.io/s/255-clock-65lk1?file=/container/Clock.js

Once the clock runs out on the session, I am using “ComponentDidUpdate” to send the code back to “countdownTimer()”, but no matter what I do I have to manually hit the button “Start” to get the clock moving again. I think I am getting a little confused on the “Start/Pause” toggle. Any help here would be much appreciated!

2

Clock.js:

    if (this.state.startStop === "Start" && this.state[timerSelect] !== 0) {
      this.decrementer = setInterval(() => {
        this.setState((prevState) => ({
          [timerSelect]:
            prevState[timerSelect] > 0 ? prevState[timerSelect] - 1 : 0
        }));
      }, 1000);
    } else {
      clearInterval(this.decrementer);
    }

Once the timer gets to zero, clearInterval() is called, so no timer is running. What you really want to do is to swap from session to break labels (or vice-versa) when zero is reached and reset the time to the correct length (session or break), without calling clearInterval(), so the clock keeps rolling.

At least that’s my best guess.

3

Thanks @jeremy.a.gray ! That really helped!