Although I can visibly see that my decrement and increment buttons are functioning as intended, the tests are failing. I could not be using a best practice and/or be failing to see something. Could anybody elaborate on why these tests are failing? Also, this is very much still a work in progress and not complete. Thanks in advance!
let clock;
class App extends React.Component {
constructor(props){
super(props)
this.state ={
breakLength: 5,
sessionLength: 25,
timeRemaining: 25 * 60,
timer: this.setTimer(25*60),
isStarted: false
}
this.initialState = this.state
this.handleChange = this.handleChange.bind(this);
this.handleStart = this.handleStart.bind(this);
this.handleRestart = this.handleRestart.bind(this);
this.setTimer = this.setTimer.bind(this);
this.startTimer = this.startTimer.bind(this);
}
handleChange = (label, value) => {
if(label === "break") {
this.setState({
labelLength: this.state.breakLength + value
})
}
if(label === "session") {
this.setState({
sessionLength: this.state.sessionLength + value
})
}
}
handleStart() {
if(this.state.isStarted){
$("#start_stop").html("Start");
this.setState({
isStarted: false
})
clearInterval(clock)
} else {
$("#start_stop").html("Stop");
this.setState({
isStarted: true
})
this.startTimer()
}
}
handleRestart() {
clearInterval(clock)
this.setState(this.initialState)
}
setTimer(remainingTime) {
let minutes = Math.floor(remainingTime / 60);
let seconds = remainingTime % 60;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
let timer = minutes + ":" + seconds;
return timer.toString()
}
startTimer() {
clock = setInterval(() => {
this.setState({
timeRemaining: this.state.timeRemaining - 1,
timer: this.setTimer(this.state.timeRemaining - 1)
})
}, 1000)
}
render() {
return (
<div id="parent">
<div id="label-section">
<button id="break-decrement" onClick={() => this.handleChange("break", -1)} disabled={this.state.breakLength === 1}>Bd</button>
<div id="break-label">Break Length</div>
<div id="break-length">{this.state.breakLength}</div>
<button id="break-increment" onClick={() => this.handleChange("break", 1)} disabled={this.state.breakLength === 60}>BI</button>
<button id="session-decrement" onClick={() => this.handleChange("session", -1)} disabled={this.state.sessionLength === 1}>SD</button>
<div id="session-label">Session Length</div>
<div id="session-length">{this.state.sessionLength}</div>
<button id="session-increment" onClick={() => this.handleChange("session", 1)} disabled={this.state.sessionLength === 60}>SI</button>
</div>
<div id="timer-section">
<div id="timer-label">Session</div>
<div id="time-left">{this.state.timer}</div>
<button id="start_stop" onClick={this.handleStart}>Start</button>
<button id="reset" onClick={this.handleRestart}>Reset</button>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));