Hi all, needed some help with building the Pomodoro application. I’m using React and Moment.js to handle the countdown and updating the page with a new time value. For the last couple of days, I’ve been struggling with figuring out how to successfully update the page without running into numerous errors.
I have this class component, called Timer, with a method called startTimer
and a comopentDidUpdate
method that calls startTimer if the prop timerStatus
is set to true. In the startTimer
method, I have a setInterval
method which basically takes the duration of time selected by the user, and subtracts it by one second every second. Whenever I trigger the countdown, the timer starts behaving veyr strangely. If I start at 25 minutes, it will go from 24:59 to 24:59 back to 24:59 very quickly, and it seems like it’s not really following the rules of setInterval
. Does anyone have any insight or a suggested fix? Here’s my code below:
import React, { Component } from "react";
var moment = require('moment');
moment().format();
class Timer extends Component {
constructor(props) {
super(props);
this.state = {
time: 0
}
this.startTimer = this.startTimer.bind(this)
}
startTimer = () => {
const currentTime = moment().valueOf()
let workTime = this.props.workTime * 60000
const timeDone = currentTime + workTime
const diffTime = timeDone - currentTime
let duration = moment.duration(workTime, 'milliseconds')
const interval = 1000
let newTime;
const workTimeLimit = setInterval(() => {
if (duration <= 0) {
return clearInterval(workTimeLimit)
}
duration = moment.duration(duration.asSeconds() - 1, 'seconds')
let minutes = duration.minutes()
let seconds = duration.seconds()
if (duration.hours() == 1) {
minutes = minutes + 60
}
if (String(duration.seconds()).length == 1) {
seconds = "0" + seconds
}
console.log(minutes + ':' + seconds)
newTime = minutes + ":" + seconds
return this.setState({time: newTime})
}, interval)
}
componentDidUpdate() {
if (this.props.timerStatus) {
this.startTimer()
}
}
render() {
if (!this.props.timerStatus) {
return (
<div class="timer__container">
<p class="timer__display" id="time-left">{this.props.workTime + ":00"}</p>
</div>
)
}
return (
<div class="timer__container">
<p className="timer__display" id="time-left" >{this.state.time}</p>
</div>
)
}
}
export default Timer