Help with clearInterval and scope

JavaScript
1

I have been racking my brain over this particular issue for way too long now. I am working on the Pomodoro project. On clicking the start/stop button, the stopStart() function inside the Pomodoro component is called, which then calls sessionInterval() to set a timer and execute updateSession(). This is all working fine.

Where I’m stuck is the clearInterval() within pauseSession(), which will not clear the interval. I’m pretty sure the issue is to do with scoping, I’ve hit a dead end with solving it.

My code is below, with part that I’m failing at labelled with “BEGINNING OF THE MESS”

I would really love some help on this.

class Pomodoro extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: "session",
      running: false,
      initialBreakLength: 5,
      calculatedBreakRemaining: 300,
      displayBreakRemaining: "05:00",
      initialSessionLength: 25,
      calculatedSessionRemaining: 1500,
      displaySessionRemaining: "25:00"
    }
    this.decrementBreak = this.decrementBreak.bind(this)
    this.incrementBreak = this.incrementBreak.bind(this)
    this.decrementSession = this.decrementSession.bind(this)
    this.incrementSession = this.incrementSession.bind(this)
    this.reset = this.reset.bind(this)
    this.stopStart = this.stopStart.bind(this)
    this.updateSession = this.updateSession.bind(this);
    this.sessionInterval = this.sessionInterval.bind(this);
    this.pauseSession = this.pauseSession.bind(this);
  }

  decrementBreak() {
    if (this.state.initialBreakLength >= 2 && this.state.running == false) {
      let minutes = Math.floor((this.state.calculatedBreakRemaining-60) / 60);
      minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
      let seconds = Math.max(((this.state.calculatedBreakRemaining-60) % 60),0);
      seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
      this.setState({
        initialBreakLength: (this.state.initialBreakLength - 1),
        displayBreakRemaining: (minutes + ":" + seconds),
        calculatedBreakRemaining: (this.state.calculatedBreakRemaining - 60) 
      })
  }
}

incrementBreak() {
  if (this.state.initialBreakLength <= 59 && this.state.running == false) {
    let minutes = Math.floor((this.state.calculatedBreakRemaining+60) / 60);
    minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
    let seconds = Math.max(((this.state.calculatedBreakRemaining+60) % 60),0);
    seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
    this.setState({
      initialBreakLength: (this.state.initialBreakLength + 1),
      displayBreakRemaining: (minutes + ":" + seconds),
      calculatedBreakRemaining: (this.state.calculatedBreakRemaining + 60) 
    })
}
}

decrementSession() {
  if (this.state.initialSessionLength >= 2 && this.state.running == false) {
    let minutes = Math.floor((this.state.calculatedSessionRemaining-60) / 60);
    minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
    let seconds = Math.max(((this.state.calculatedSessionRemaining-60) % 60),0);
    seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
    this.setState({
      initialSessionLength: (this.state.initialSessionLength - 1),
      displaySessionRemaining: (minutes + ":" + seconds),
      calculatedSessionRemaining: (this.state.calculatedSessionRemaining - 60) 
    })
}
}

incrementSession() {
if (this.state.initialSessionLength <= 59 && this.state.running == false) {
  let minutes = Math.floor((this.state.calculatedSessionRemaining+60) / 60);
  minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
  let seconds = Math.max(((this.state.calculatedSessionRemaining+60) % 60),0);
  seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
  this.setState({
    initialSessionLength: (this.state.initialSessionLength + 1),
    displaySessionRemaining: (minutes + ":" + seconds),
    calculatedSessionRemaining: (this.state.calculatedSessionRemaining + 60) 
  })
}
}

reset() {
  document.getElementById('beep').pause();
  document.getElementById('beep').currentTime = 0;
  // ADD clearInterval break
  // ADD clearInterval session
  
  this.setState({
    display: "session",
    running: false,
    initialBreakLength: 5,
    calculatedBreakRemaining: 300,
    displayBreakRemaining: "05:00",
    initialSessionLength: 25,
    calculatedSessionRemaining: 1500,
    displaySessionRemaining: "25:00"
  })
}

//
// BEGINNING OF THE MESS
//


  updateSession() {
    console.log('update')
  }

  sessionInterval() {
    sessionTimer = setInterval(this.updateSession, 1000)
  }

  pauseSession() {
    const sessionTimer = sessionTimer.bind(this)
    clearInterval(sessionTimer)
  }

  stopStart() {
    if (this.state.display == "session" && !this.state.running) {
      this.sessionInterval();
    } else if (this.state.display == "session" && this.state.running) {
      this.pauseSession();
    } else if (this.state.display == "break" && !this.state.running) {
      breakInterval();
    } else if (this.state.display == "break" && this.state.running) {
      pauseBreak();
    }
}

  
//
// END OF THE MESS 
//

render() {
  return(
    <div id="pomodoro">
      <p>{this.state.calculatedSessionRemaining}</p>
      <p>{this.state.calculatedBreakRemaining}</p>
      <Display display={this.state.display} running={this.state.running} breakRemaining={this.state.displayBreakRemaining} sessionRemaining={this.state.displaySessionRemaining} reset={this.reset} stopstart={this.stopStart}/>
      <Break breakLength={this.state.initialBreakLength} decrement={this.decrementBreak} increment={this.incrementBreak}/>
      <Session sessionLength={this.state.initialSessionLength} decrement={this.decrementSession} increment={this.incrementSession}/>
    </div>
  )
}
}

ReactDOM.render(<Pomodoro/>, document.getElementById('root'))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock