Pomdoro Clock issues - timer not reaching 00:00 mm:ss

Hi guys,

Going insane trying to figure out why/what bug is causing my Pomodoro Clock to fail the test suite tests, specifically timer not reaching 00:00.

I have rewritten this code probably 4 times now, trying both functional components with hooks and now stateful components and keep running into the same error.

If someone could have a look over my code and give me an idea where I am going wrong that would be a big help, cheers.

Can view a live version here on codesandbox: https://codesandbox.io/s/fcc-pomodoro-clock-lmqsd.

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      secondsRemaining: 0,
      sessionLength: 25,
      breakLength: 5,
      displaySession: 25,
      displayBreak: 5,
      intervalId: "",
      timerRunning: false,
      breakRunning: false,
      timerPaused: false
    };
    this.start = this.start.bind(this);
    this.pause = this.pause.bind(this);
    this.reset = this.reset.bind(this);
    this.playAudio = this.playAudio.bind(this);
    this.stopAudio = this.stopAudio.bind(this);
    this.incrementBreak = this.incrementBreak.bind(this);
    this.incrementSession = this.incrementSession.bind(this);
    this.decrementBreak = this.decrementBreak.bind(this);
    this.decrementSession = this.decrementSession.bind(this);
    this.formatTimer = this.formatTimer.bind(this);
  }

  start() {
    if (this.state.timerRunning === true) {
      this.pause();
      return;
    } else if (
      this.state.timerRunning === false &&
      this.state.timerPaused === true
    ) {
      this.setState({
        timerRunning: true,
        timerPaused: false
      });
    } else if (
      this.state.timerRunning === false &&
      this.state.timerPaused === false
    ) {
      clearInterval(this.state.intervalId);
      this.setState({
        secondsRemaining: 60,
        sessionLength: this.state.sessionLength - 1,
        timerRunning: true,
        timerPaused: false
      });
    }

    let interval = setInterval(() => {
      this.setState({ secondsRemaining: this.state.secondsRemaining - 1 });

      if (this.state.secondsRemaining === 0 && this.state.sessionLength !== 0) {
        this.setState({
          sessionLength: this.state.sessionLength - 1,
          secondsRemaining: 60
        });
      } else if (
        this.state.secondsRemaining === 0 &&
        this.state.sessionLength === 0 &&
        this.state.breakRunning === false
      ) {
        this.setState({
          sessionLength: this.state.breakLength - 1,
          secondsRemaining: 60,
          breakRunning: true
        });
        this.playAudio();
      } else if (
        this.state.secondsRemaining === 0 &&
        this.state.sessionLength === 0 &&
        this.state.breakRunning === true
      ) {
        this.setState({
          sessionLength: this.state.sessionLength,
          secondsRemaining: 60,
          breakRunning: false
        });
        this.playAudio();
      }
    }, 1000);

    this.setState({ intervalId: interval });
  }

  pause() {
    clearInterval(this.state.intervalId);
    this.setState({
      timerPaused: true,
      timerRunning: false,
      sessionLength: this.state.sessionLength,
      secondsRemaining: this.state.secondsRemaining
    });
    console.log("pause");
  }

  reset() {
    clearInterval(this.state.intervalId);
    this.stopAudio();
    this.setState({
      sessionLength: 25,
      secondsRemaining: 0,
      breakLength: 5,
      displaySession: 25,
      displayBreak: 5,
      intervalId: "",
      timerRunning: false,
      timerPaused: false
    });
  }

  formatTimer() {
    let minutes = this.state.sessionLength;
    let seconds = this.state.secondsRemaining;

    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return minutes + ':' + seconds;
  }

  incrementBreak() {
    if (this.state.timerRunning === true || this.state.timerPaused === true) {
      return;
    } else if (this.state.breakLength >= 1 && this.state.breakLength < 60) {
      this.setState({
        breakLength: this.state.breakLength + 1,
        displayBreak: this.state.displayBreak + 1
      });
    }
  }

  decrementBreak() {
    if (this.state.timerRunning === true || this.state.timerPaused === true) {
      return;
    } else if (this.state.breakLength > 1 && this.state.breakLength <= 60) {
      this.setState({
        breakLength: this.state.breakLength - 1,
        displayBreak: this.state.displayBreak - 1
      });
    }
  }

  incrementSession() {
    if (this.state.timerRunning === true || this.state.timerPaused === true) {
      return;
    } else if (this.state.sessionLength >= 1 && this.state.sessionLength < 60) {
      this.setState({
        sessionLength: this.state.sessionLength + 1,
        displaySession: this.state.displaySession + 1
      });
    }
  }

  decrementSession() {
    if (this.state.timerRunning === true || this.state.timerPaused === true) {
      return;
    } else if (this.state.sessionLength > 1 && this.state.sessionLength <= 60) {
      this.setState({
        sessionLength: this.state.sessionLength - 1,
        displaySession: this.state.displaySession - 1
      });
    }
  }

  playAudio = () => {
    document.getElementById("beep").play();
  };

  stopAudio = () => {
    document.getElementById("beep").pause();
    document.getElementById("beep").currentTime = 0;
  };

  render() {
    return (
      <div className="App">
        <div id="timer-label">
          {this.state.breakRunning === false ? `Work` : `Break`}
          <p id="time-left">
            {this.formatTimer()}
          </p>
        </div>
        <button id="start_stop" onClick={this.start}>
          Start
        </button>
        <button id="reset" onClick={this.reset}>
          Reset
        </button>
        <audio
          src={
            "https://www.pacdv.com/sounds/interface_sound_effects/sound98.wav"
          }
          type="audio/mp3"
          className="clip"
          id="beep"
        />
        <div id="break-label">
          Break Length:
          <p id="break-length">{this.state.displayBreak}</p>
        </div>
        <button id="break-decrement" onClick={this.decrementBreak}>
          Decrement
        </button>
        <button id="break-increment" onClick={this.incrementBreak}>
          Increment
        </button>
        <div id="session-label">
          Session Length:
          <p id="session-length">{this.state.displaySession}</p>
        </div>
        <button id="session-decrement" onClick={this.decrementSession}>
          Decrement
        </button>
        <button id="session-increment" onClick={this.incrementSession}>
          Increment
        </button>
      </div>
    );
  }
}