Pomodoro Clock | React | Minutes become negative

Pomodoro Clock | React | Minutes become negative
0

#1

So, when the session ends and the break starts the clock displays negative time despite updating the states of the components… I suspect I need to render the Clock component but I’m not sure… Any suggestions would be appreciated! Here’s my pen so far: https://codepen.io/GiaFil/pen/mGogza and the Clock component code:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.getTime = this.getTime.bind(this);
    resetClock =  resetClock.bind(this);
    this.state = {
      minutes: this.props.minutes,
      seconds: "00"
    };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.getTime(), 1000);
  }
  
  getTime() {
    if (!this.props.isPaused) {
      if (this.state.seconds === "00") {
        let newMin = Number(this.state.minutes) - 1;
        if(newMin >= 10) {
          this.setState({
            minutes: newMin.toString(),
            seconds: "59"
          });
        } else {
          this.setState({
            minutes: "0" + newMin.toString(),
            seconds: "59"
          });
        }
      } else {
        let newSec = Number(this.state.seconds) - 1;
        if(newSec >= 10) {
          this.setState({
            minutes: this.state.minutes,
            seconds: newSec.toString()
          });
        } else {
          this.setState({
            minutes: this.state.minutes,
            seconds: "0" + newSec.toString()
          });
        }
      }
    }
    if(this.state.minutes === "00" && this.state.seconds === "00"){
      if(this.props.parentState.type === "Session") {
        setTimeout(function(){
          this.setState({
            minutes: this.props.parentState.breakLength,
            seconds: "00"
          });
        }, 1000);
        this.props.handler({
          type: "Break",
          len: this.props.parentState.breakLength,
          sessionLength: this.props.parentState.sessionLength,
          breakLength: this.props.parentState.breakLength,
          isPaused: false
        });
      } else {
        setTimeout(function(){
          this.setState({
            minutes: this.props.parentState.sessionLength,
            seconds: "00"
          });
        }, 1000);
        this.props.handler({
          type: "Session",
          len: this.props.parentState.sessionLength,
          sessionLength: this.props.parentState.sessionLength,
          breakLength: this.props.parentState.breakLength,
          isPaused: false
        });
      }
    }
  }

  render() {
    return (
      <h1 id={this.props.id}>
        {this.state.minutes}:{this.state.seconds}
      </h1>
    );
  }
}