class Clock255 extends React.Component {
constructor(props) {
super(props);
this.state = {
"false": ["Break", 5],
"true": ["Session", 25],
mode: true,
duration: 25 * 60 * 1000, // in min.
intervalId: 0,
}
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
this.reset = this.reset.bind(this);
this.play = this.play.bind(this);
this.switch = this.switch.bind(this)
}
// this function handle the start/stop timer button
play = () => {
if (this.state.intervalId) {
clearInterval(this.state.intervalId);
this.setState((state) => {
let newDuration = state.duration;
return {
...state,
duration: newDuration,
// duration: newDuration + 2000(ms) always pass the first test run, not the subsequent ones
intervalId: 0,
};
});
return;
}
const newIntervalId = setInterval(() => {
this.setState((state) => {
let newDuration = state.duration - 1000;
// if duration = 0, we invoke switch()
if (newDuration === -1000) {
// -1000 to let test spec see 00:00 for 1 sec.
return this.switch();
}
else {
return {
...state,
duration: newDuration
};
}
});
}, 1000);
this.setState((state) => {
return {
...state,
intervalId: newIntervalId,
};
});
/* const setTimeoutID = setTimeout(this.switch, this.state.duration + 900);
is removed and replaced with a 'listener' in newIntervalId, if duration
is -1000, invoke switch. We can't have setTimeout as it works outside of
this.state, thus they might conflicting each other.
*/
}
/* FLAWED METHOD. Replaced. See remarks below.
switch() {
const currentState = {...this.state};
const newMode = !currentState.mode;
const beep = document.getElementById("beep");
beep.play();
let resetState = {
"false": [...currentState["false"]],
"true": [...currentState["true"]],
mode: newMode,
duration: currentState[newMode][1] * 60 * 1000,
intervalId: 0
};
clearInterval(this.state.intervalId);
this.setState(resetState);
return this.play();
}
This method is flawed, thus replaced with the one below.
If we put beep.play() and clearInterval outside of this.setState,
it became a chained process, thus, a lag for a couple ms. should
be expected between one invocation and the others, causing them
to not completely synchronized. When we put everything inside of
this.setState, they all became synchronized because they all got
invoked together with the state updating at once (in parallel to
each other)
*/
switch() {
const currentState = {...this.state};
const newMode = !currentState.mode;
const beep = document.getElementById("beep");
this.setState((state) => {
beep.play();
clearInterval(state.intervalId);
state.mode = newMode;
state.duration = currentState[newMode][1] * 60 * 1000;
state.intervalId = 0;
this.play();
return;
})
}
increment(event) {
this.setState((state) => {
if (event.target.id === "break-increment" && state["false"][1] < 60) {
if (state.mode === false && state.intervalId === 0) {
let newFalse = [...state["false"]];
newFalse[1] += 1;
state["false"] = newFalse;
state.duration = state["false"][1] * 60 * 1000;
return state;
}
else if (state.mode === true) {
let newFalse = [...state["false"]];
newFalse[1] += 1;
state["false"] = newFalse;
return state;
}
}
else if (event.target.id ==="session-increment" && state["true"][1] < 60) {
if (state.mode === true && state.intervalId === 0) {
let newTrue = [...state["true"]];
newTrue[1] += 1;
state["true"] = newTrue;
state.duration = state["true"][1] * 60 * 1000;
return state;
}
else if (state.mode === false && state.intervalId === 0) {
let newTrue = [...state["true"]];
newTrue[1] += 1;
state["true"] = newTrue;
return state;
}
}
else {
return;
}
})
}
decrement(event) {
this.setState((state) => {
if (event.target.id === "break-decrement" && state["false"][1] > 1) {
if (state.mode === false && state.intervalId === 0) {
let newFalse = [...state["false"]];
newFalse[1] -= 1;
state["false"] = newFalse;
state.duration = state["false"][1] * 60 * 1000;
return state;
}
else if (state.mode === true) {
let newFalse = [...state["false"]];
newFalse[1] -= 1;
state["false"] = newFalse;
return state;
}
}
else if (event.target.id ==="session-decrement" && state["true"][1] > 1) {
if (state.mode === true && state.intervalId === 0) {
let newTrue = [...state["true"]];
newTrue[1] -= 1;
state["true"] = newTrue;
state.duration = state["true"][1] * 60 * 1000;
return state;
}
else if (state.mode === false && state.intervalId === 0) {
let newTrue = [...state["true"]];
newTrue[1] -= 1;
state["true"] = newTrue;
return state;
}
}
else {
return;
}
})
}
reset = () => {
const beep = document.getElementById("beep");
beep.pause();
beep.currentTime = 0;
clearInterval(this.state.intervalId);
if (this.state.intervalId && this.state.duration === 0) {
this.setState((state) => {
return {
"false": ["Break", 5],
"true": ["Session", 25],
mode: true,
duration: 25 * 60 * 1000,
intervalId: 0
}
})
}
else {
this.setState((state) => {
return {
"false": ["Break", 5],
"true": ["Session", 25],
mode: true,
duration: 25 * 60 * 1000,
intervalId: 0
}
})
}
}
render() {
// console.log("mode: " + this.state.mode, "duration: " + this.state.duration / 1000, );
return (
<div id="root">
<div id="audio">
<audio id="beep" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"></audio>
</div>
<div id="container">
<h1 id="title">25 + 5 Clock</h1>
<div id="settings">
<section id="break-container">
<h2 id="break-label">Break Length</h2>
<button id="break-decrement" onClick={this.decrement}>down</button>
<div id="break-length">{this.state["false"][1]}</div>
<button id="break-increment" onClick={this.increment}>up</button>
</section>
<section id="session-container">
<h2 id="session-label">Session Length</h2>
<button id="session-decrement" onClick={this.decrement}>down</button>
<div id="session-length">{this.state["true"][1]}</div>
<button id="session-increment" onClick={this.increment}>up</button>
</section>
</div>
<section id="timer-container">
<h2 id="timer-label">{this.state[this.state.mode][0]}</h2>
<div id="time-left">
{Math.floor(this.state.duration / (1000 * 60)).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false
})}
:
{Math.floor((this.state.duration % (1000 * 60)) / 1000).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false
})}
</div>
</section>
<section id="todo">
<button id="start_stop" onClick={this.play}>{this.state.intervalId ? "stop" : "start"}</button>
<button id="reset" onClick={this.reset}>reset</button>
</section>
</div>
<p id="footer">Shugyoza, 2021, with React based on <a href="https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-25--5-clock" target="_blank">User Stories</a> and <a href="https://codepen.io/freeCodeCamp/full/XpKrrW" target="_blank">Model</a></p>
</div>
)
}
}
ReactDOM.render(<Clock255 />, document.getElementById("root"));
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
/*
Play and tick only works to the extend of starting countdown, but unable to stop/reset
// play() {
// let dt = new Date();
// let future = d.setMinutes(dt.getMinutes() + this.state[this.state.session][1]);
// this.tick(future);
// }
// tick(future) {
// setInterval(() => {
// let distance = future - Date.now();
// let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
// let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// this.setState((state) => {
// return state.display = [minutes, seconds]
// })
// }, 1000);
// }
// timeLeft(future) {
// let distance = future - Date.now();
// let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
// let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// this.setState((state) => {
// state.display = [minutes, seconds]
// })
// }
*/
!
