Problem with Clock project and test11

Tell us what’s happening:
Hello, i’m working on the project of the 25+5 clock. My code needs to be cleaned, but at this time the test#11 doesn’t pass and I don’t know why. The timer works and change, but in the testing, goes to an infinite loop. Any help?
So many thanks

Your code so far

import React, { Component } from 'react';
import beep from '../assets/sounds/BeepSound.wav';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      displayTime: 25*60,
      setSessionTime: 25*60,
      setBreakTime: 5*60,
      session: 'Working',
      timerOn: false,
      timerID: null
    }
   this.formatTime = this.formatTime.bind(this);
   this.changeTime = this.changeTime.bind(this);
   this.countdown = this.countdown.bind(this);
   this.reset = this.reset.bind(this);
   }

  formatTime(time, type){
    if(type == "set"){
      let min = Math.floor(time / 60);
      return(min);
    }else{
      let min = Math.floor(time / 60);
      let sec = time % 60;
      return((min<10?"0"+min:min)+":"+(sec<10?"0"+sec:sec));
    }
  };

  changeTime(amount, type){
    //Para el breakTime o el sessionTime
    if(type == "break"){
      //No puede ser menor que cero o mayor que 60
      if((this.state.setBreakTime<=60 && amount <0) || (this.state.setBreakTime>=3600 && amount >0)){
        return;
      }
      this.setState((state) => {
        // Importante: lee `state` en vez de `this.state` al actualizar.
        return {setBreakTime: state.setBreakTime + amount}
      });
    }else if(type == "display"){
      if(((this.state.displayTime+amount)<0) || (this.state.displayTime>=3600 && amount >0)){
        return;
      }
      this.setState((state) => {
          return {displayTime: state.displayTime + amount}
      });
    }else{
      //Para setear el tiempo de Display con Session
      if((this.state.setSessionTime<=60 && amount <0) || (this.state.setSessionTime>=3600 && amount >0)){
        return;
      }
      if(!this.state.timerOn){
        this.setState((state) => {
          return {displayTime: state.setSessionTime + amount, setSessionTime: state.setSessionTime + amount}
        });
      }
      //Solo actualiza el display si no está en marcha
    }
  };

  toggleTimer() {
    this.setState((state) => {
        return {timerOn: !state.timerOn}
    });
  }

  toggleSession() {
    if(this.state.session === 'Working'){
        this.setState((state) => {
          return {session: 'Brake', displayTime: state.setBreakTime}
      });
    }else{
        this.setState((state) => {
          return {session: 'Working', displayTime: state.setSessionTime}
      });
    }
  }

  countdown(){
    if(!this.state.timerOn){
      //En intervalos de 1 seg, en ms
      this.state.timerID = setInterval(()=>{
        this.changeTime(-1, "display");
        //Si el contador llega a 0
        if(this.state.displayTime == 0){
          //Suena el pitido
          this.playAudio();
          //Si estabamos trabajando, cambiamos a descanso y al revés
          this.toggleSession(); //IF I COMMENT THIS LINE, THE TEST#11 PASS
        }
      }, 1000);

    }else{
      clearInterval(this.state.timerID);
    }
    //Cambiamos el bool a el contrario, indicando que el temporizador está funcionando
    this.toggleTimer();

  };

  reset(){
    this.stopAudio();
    clearInterval(this.state.timerID);
    this.setState((state) => {
        // Importante: lee `state` en vez de `this.state` al actualizar.
        return {displayTime: 25*60,
                setSessionTime: 25*60,
                setBreakTime: 5*60, 
                session: 'Working',
                timerOn: false,
                timerID: null
        }
    });
  };

  playAudio() {
    let audio = document.querySelector("#beep");
    audio.play();
  }

  stopAudio() {
    let audio = document.querySelector("#beep");
    if(!audio.paused) {
      audio.pause();
      audio.currentTime = 0;
    }
  }


  render() {
    return(
    <div className="appcontainer">

      <div className="clockcontainer">
      <div className="digitalclock">
        <div className="front"></div>
        <div className="feet"></div>
        <div className="shadow"></div>
      </div>
      <div id="timer-label" className="timeLabel">{this.state.session}</div>
      <div id="time-left" className="time">{this.formatTime(this.state.displayTime, "display")}</div>
      <audio id="beep" preload="auto" src={beep} type="audio/wav"></audio>


      <div id="controls" className="controlscontainer">

      <div className="length-control">
        <div className="btn-name" id="break-label">Break Length</div>
        <div className="btns">
          <div className="btn"><button className="btn-level" id="break-decrement" value="-" onClick={() => this.changeTime(-60, "break")}><i className="fa fa-arrow-down"></i></button></div>
          <div className="btn-level" id="break-length">{this.formatTime(this.state.setBreakTime, "set")}</div>
          <div className="btn"><button className="btn-level" id="break-increment" value="+" onClick={() => this.changeTime(60, "break")}><i className="fa fa-arrow-up"></i></button></div>
        </div>
      </div>

      <div className="timer-control">
        <button id="start_stop" onClick={this.countdown}>{this.state.timerOn?(<i className="fa fa-pause"></i>):(<i className="fa fa-play"></i>)}</button>
        <button id="reset" onClick={this.reset}><i className="fa fa-sync"></i></button>
      </div>
      
      <div className="length-control">
        <div className="btn-name" id="session-label">Session Length</div>
        <div className="btns">
          <div className="btn"><button className="btn-level" id="session-decrement" value="-" onClick={() => this.changeTime(-60, "session")}><i className="fa fa-arrow-down"></i></button></div>
          <div className="btn-level" id="session-length">{this.formatTime(this.state.setSessionTime, "set")}</div>
          <div className="btn"><button className="btn-level" id="session-increment" value="+" onClick={() => this.changeTime(60, "session")}><i className="fa fa-arrow-up"></i></button></div>
        </div>
      </div>

      </div>

      </div>

    </div>
    );
  }
}

export default App;

Your browser information:

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

Challenge: Build a 25 + 5 Clock

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Ok, so many thanks! :slight_smile:

It’s solved! Now time to clean the code.