Pomodoro Clock timer countdown won't start in seconds

Question

I am working on my first big React Project Pomodoro Clock and after many attempts trying, I have successfully converted my display into mm:ss(minutes:seconds) format.

The problem now is that when I click the start button , the displayed time is counting down in the minutes instead of seconds.I tried configuring the code but it's not working. Here is the function that makes my state converts into mm:ss

function millisToMinutesAndSeconds(millis) {
      var minutes = Math.floor(millis / 60000);
      var seconds = ((millis % 60000) / 1000).toFixed(0);
      return (seconds === 60 ? (minutes+1) + ":00" : minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
    }   

and here is my start button function

handleStart() {
    if(this.state.started ===  false ){
      this.interval = setInterval(() => {
        this.setState(prevState => ({
           timer: prevState.timer - 1
        }));
      }, 1000)

      this.setState({
        started: true
      })
    }
  }

Why is it counting down in minutes and how can I make it decrement in seconds and not in minutes?

Please help me. Here is my codepen

https://codepen.io/bradrar1/pen/bmoYXv

Answer 1

This.state.timer is the minute value. One way to fix it is by adding “ * 60000” to the constructor to convert to milliseconds, which you’re now doing in the render function. Then you would just have to modify it to decrement by 1000 instead of 1

Answer 2

the "Main" problem is that you decrements the timer witch is in minutes by 1 each second you should change the timer to seconds.

class Pomodoro extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      breakTime : 5,
      sessionTime : 25*60,
      timer : 25*60,
      started: false,
    }
    this.interval = null;


    this.handleClickBreakDecrement = this.handleClickBreakDecrement.bind(this);
    this.handleClickBreakIncrement = this.handleClickBreakIncrement.bind(this);
    this.handleClickSessionDecrement = this.handleClickSessionDecrement.bind(this);
    this.handleClickSessionIncrement = this.handleClickSessionIncrement.bind(this);
    this.handleStart = this.handleStart.bind(this);
    this.handleStop = this.handleStop.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  handleClickBreakDecrement() {
    this.setState( prevState => ({
      breakTime : Math.max(prevState.breakTime - 1, 0)

    }));
  }

  handleClickBreakIncrement() {
    this.setState(prevState => ({
      breakTime : Math.min(prevState.breakTime + 1 , 10)
    }))
  }

  handleClickSessionDecrement() {
    this.setState(prevState => ({
      sessionTime : Math.max(prevState.sessionTime - 5, 0),
      timer : Math.max(prevState.sessionTime - 5, 0)
    }))
  }

  handleClickSessionIncrement() {
    this.setState(prevState => ({
      sessionTime : Math.min(prevState.sessionTime + 5, 50),
      timer : Math.min(prevState.sessionTime + 5, 50)
    }))
  }

  componentDidMount(){
   console.log('component mounted')
  }

  handleStart() {
    if(this.state.started ===  false ){
      this.interval = setInterval(() => {
        this.setState(prevState => ({
           timer: prevState.timer - 1
        }));
      }, 1000)

      this.setState({
        started: true
      })
    }
  }



 handleStop() {
    clearInterval(this.interval)
    this.setState({
      started: false,
    })
}

handleReset() {
  clearInterval(this.interval)
  this.setState({
    timer: this.state.sessionTime,
    started: false,
  })
}

  render() {

    let timer =   parseFloat(this.state.timer) 

    function millisToMinutesAndSeconds(sec) {
      var minutes = Math.floor(sec / 60);
      var seconds = (sec % 60).toFixed(0);
      return ( minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
    }   

    return (
      <div >
          <div className="Pomodoro">
            <BreakTime breakTime={this.state.breakTime} breakDecrement={this.handleClickBreakDecrement} breakIncrement={this.handleClickBreakIncrement} />
            <SessionTime sessionTime={this.state.sessionTime} sessionDecrement={this.handleClickSessionDecrement} sessionIncrement={this.handleClickSessionIncrement}/>
          </div>
          <div className="Timer">
             <StartStop 
              timer={millisToMinutesAndSeconds(timer)} 
              startTimer={this.handleStart}
              stopTimer={this.handleStop}
              reset={this.handleReset}
              />
          </div>

      </div>
    );
  }
}







{/* PRESENTATION COMPONENTS ONLY*/}
const BreakTime = (props) => {

  return (
    <div className="breakTime">
      <h2 id="break-label"> Break Length </h2>
      <div id="button">
        <button id="break-decrement" onClick={props.breakDecrement}>
          -
        </button>
            <span id="break-length"> {props.breakTime} </span>
        <button id="break-increment" onClick={props.breakIncrement} >          
            +
        </button>
      </div>
    </div>
  )
}
{/* PRESENTATION COMPONENTS ONLY*/}

  {/* PRESENTATION COMPONENTS ONLY*/}
const SessionTime = (props) => {

  return (
    <div className="sessionTime">
    <h2 id="session-label"> Session Length </h2>
      <div id="button" >
      <button id="session-decrement" onClick={props.sessionDecrement} >
          -
      </button>
              <span id="session-length"> {props.sessionTime} </span>
      <button id="session-increment" onClick={props.sessionIncrement} >
          +
      </button>
      </div>
    </div>
  )
}
{/* PRESENTATION COMPONENTS ONLY*/}

{/* PRESENTATION COMPONENTS ONLY*/}
const StartStop = (props) => {
  return (
    <div>
      {/* Timer Label */}
      <div>
        <p id="timer-label"> Session</p>
        <p id="time-left">
           {props.timer}
        </p>
      </div>
        {/* Start, Stop and Reset Button*/}
        <div>
          <button id="start_stop" onClick={props.startTimer} >
              Start
          </button>

          <button id="start_stop" onClick={props.stopTimer} >
             Stop
          </button>
          <button id="reset" onClick={props.reset}>
              Reset
          </button>
        </div>
    </div>
  )
}
{/* PRESENTATION COMPONENTS ONLY*/}

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