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>
);
}
}