Hi guys,
Going insane trying to figure out why/what bug is causing my Pomodoro Clock to fail the test suite tests, specifically timer not reaching 00:00.
I have rewritten this code probably 4 times now, trying both functional components with hooks and now stateful components and keep running into the same error.
If someone could have a look over my code and give me an idea where I am going wrong that would be a big help, cheers.
Can view a live version here on codesandbox: https://codesandbox.io/s/fcc-pomodoro-clock-lmqsd.
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
secondsRemaining: 0,
sessionLength: 25,
breakLength: 5,
displaySession: 25,
displayBreak: 5,
intervalId: "",
timerRunning: false,
breakRunning: false,
timerPaused: false
};
this.start = this.start.bind(this);
this.pause = this.pause.bind(this);
this.reset = this.reset.bind(this);
this.playAudio = this.playAudio.bind(this);
this.stopAudio = this.stopAudio.bind(this);
this.incrementBreak = this.incrementBreak.bind(this);
this.incrementSession = this.incrementSession.bind(this);
this.decrementBreak = this.decrementBreak.bind(this);
this.decrementSession = this.decrementSession.bind(this);
this.formatTimer = this.formatTimer.bind(this);
}
start() {
if (this.state.timerRunning === true) {
this.pause();
return;
} else if (
this.state.timerRunning === false &&
this.state.timerPaused === true
) {
this.setState({
timerRunning: true,
timerPaused: false
});
} else if (
this.state.timerRunning === false &&
this.state.timerPaused === false
) {
clearInterval(this.state.intervalId);
this.setState({
secondsRemaining: 60,
sessionLength: this.state.sessionLength - 1,
timerRunning: true,
timerPaused: false
});
}
let interval = setInterval(() => {
this.setState({ secondsRemaining: this.state.secondsRemaining - 1 });
if (this.state.secondsRemaining === 0 && this.state.sessionLength !== 0) {
this.setState({
sessionLength: this.state.sessionLength - 1,
secondsRemaining: 60
});
} else if (
this.state.secondsRemaining === 0 &&
this.state.sessionLength === 0 &&
this.state.breakRunning === false
) {
this.setState({
sessionLength: this.state.breakLength - 1,
secondsRemaining: 60,
breakRunning: true
});
this.playAudio();
} else if (
this.state.secondsRemaining === 0 &&
this.state.sessionLength === 0 &&
this.state.breakRunning === true
) {
this.setState({
sessionLength: this.state.sessionLength,
secondsRemaining: 60,
breakRunning: false
});
this.playAudio();
}
}, 1000);
this.setState({ intervalId: interval });
}
pause() {
clearInterval(this.state.intervalId);
this.setState({
timerPaused: true,
timerRunning: false,
sessionLength: this.state.sessionLength,
secondsRemaining: this.state.secondsRemaining
});
console.log("pause");
}
reset() {
clearInterval(this.state.intervalId);
this.stopAudio();
this.setState({
sessionLength: 25,
secondsRemaining: 0,
breakLength: 5,
displaySession: 25,
displayBreak: 5,
intervalId: "",
timerRunning: false,
timerPaused: false
});
}
formatTimer() {
let minutes = this.state.sessionLength;
let seconds = this.state.secondsRemaining;
seconds = seconds < 10 ? '0' + seconds : seconds;
minutes = minutes < 10 ? '0' + minutes : minutes;
return minutes + ':' + seconds;
}
incrementBreak() {
if (this.state.timerRunning === true || this.state.timerPaused === true) {
return;
} else if (this.state.breakLength >= 1 && this.state.breakLength < 60) {
this.setState({
breakLength: this.state.breakLength + 1,
displayBreak: this.state.displayBreak + 1
});
}
}
decrementBreak() {
if (this.state.timerRunning === true || this.state.timerPaused === true) {
return;
} else if (this.state.breakLength > 1 && this.state.breakLength <= 60) {
this.setState({
breakLength: this.state.breakLength - 1,
displayBreak: this.state.displayBreak - 1
});
}
}
incrementSession() {
if (this.state.timerRunning === true || this.state.timerPaused === true) {
return;
} else if (this.state.sessionLength >= 1 && this.state.sessionLength < 60) {
this.setState({
sessionLength: this.state.sessionLength + 1,
displaySession: this.state.displaySession + 1
});
}
}
decrementSession() {
if (this.state.timerRunning === true || this.state.timerPaused === true) {
return;
} else if (this.state.sessionLength > 1 && this.state.sessionLength <= 60) {
this.setState({
sessionLength: this.state.sessionLength - 1,
displaySession: this.state.displaySession - 1
});
}
}
playAudio = () => {
document.getElementById("beep").play();
};
stopAudio = () => {
document.getElementById("beep").pause();
document.getElementById("beep").currentTime = 0;
};
render() {
return (
<div className="App">
<div id="timer-label">
{this.state.breakRunning === false ? `Work` : `Break`}
<p id="time-left">
{this.formatTimer()}
</p>
</div>
<button id="start_stop" onClick={this.start}>
Start
</button>
<button id="reset" onClick={this.reset}>
Reset
</button>
<audio
src={
"https://www.pacdv.com/sounds/interface_sound_effects/sound98.wav"
}
type="audio/mp3"
className="clip"
id="beep"
/>
<div id="break-label">
Break Length:
<p id="break-length">{this.state.displayBreak}</p>
</div>
<button id="break-decrement" onClick={this.decrementBreak}>
Decrement
</button>
<button id="break-increment" onClick={this.incrementBreak}>
Increment
</button>
<div id="session-label">
Session Length:
<p id="session-length">{this.state.displaySession}</p>
</div>
<button id="session-decrement" onClick={this.decrementSession}>
Decrement
</button>
<button id="session-increment" onClick={this.incrementSession}>
Increment
</button>
</div>
);
}
}