Pomodoro Timer - Please Help!

Hi there! Stuck on 2 remaining sections of the Pomodoro Timer.

Please, spare me any design critiques, haha, I need to go through and tweak that to look nice. Working on functionality for now.

Link to codepen:

https://codepen.io/paalpwmd/pen/yLNJEMv?editors=1112

I’m failing on #5 and #16

  1. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of “timer-label” should display a string indicating a session has begun.

  2. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id=“session-length” element.

I’m a little confused by this - because my application seems to be doing what the tests are claiming it’s not. Is there something I’m missing?

Here’s the code block that handles whats throwing the error…

tick() {

    this.intervalID = setInterval(() => {
    if (this.state.length > 0) {
      this.setState({
     length: this.state.length - 1000
   }, this.clockify)
    }
    //this the code that needs to be fixed!
    else if (this.state.length == 0 && this.state.currentAction == "Session") {
      clearInterval(this.intervalID);
      document.getElementById('beep').play();
      this.setState({
        currentAction: "Break",
        length: this.state.break
      },this.clockify)
      this.clockify();
      this.intervalID = setInterval(() => {
        this.setState({
          length: this.state.length - 1000
        }, this.clockify)
      }, 1000)
      
    }
    else if (this.state.length == 0 && this.state.currentAction == "Break"){
      clearInterval(this.intervalID);
      document.getElementById('beep').play();
      this.setState({
        currentAction: "Session",
        length: this.state.timerLength
      })
      this.intervalID = setInterval(() => {
        this.setState({
          length: this.state.length - 1000
        }, this.clockify)
      }, 1000)

    }
      else {
      clearInterval(this.intervalID);
    }
    }, 1000)

    }

There seems to be a bug in your timer. I just tried it setting session and break lengths to 1. The session timer counts down to zero properly and then switches to a break timer. The break timer starts out fine but once it reaches zero it remains a “Break” timer and counts down into negative numbers.

Yeah - Upon further inspection this part of my code is never evaluating to true.

else if (this.state.length == 0 && this.state.currentAction == "Break"){

I can’t figure out why, though. I tried listing out all of the state in paragraph elements below, and the state appears to be accurate, but the code is never reaching that point… there is something about the lifecycle of react and the way that its updating state that I’m clearly not understanding.