Add switch pomodoro<->break

This commit is contained in:
Francesco Esposito 2019-03-30 18:53:12 +01:00
parent 7600188e50
commit 2459d691bc
3 changed files with 58 additions and 15 deletions

View File

@ -1,10 +1,5 @@
img {
pointer-events: none;
}
.App-logo {
height: 25vmin;
pointer-events: none;
filter: drop-shadow(0 0 0.50rem #f8ff9c);
align-items: center;
justify-content: center;

View File

@ -14,6 +14,7 @@ class LogoSpin extends Component {
className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
src={logo}
alt="Tomato"
onClick={this.props.switchMode}
></img>
)
}

View File

@ -9,20 +9,31 @@ class Timer extends Component {
constructor(props) {
super(props);
this.state = {
seconds: 1500,
seconds: 0,
started: false,
send: false
break: false,
sendNotification: false
};
this.handleNotification = this.handleNotification.bind(this);
this.startTimer = this.startTimer.bind(this);
this.stopTimer = this.stopTimer.bind(this);
this.resetTimer = this.resetTimer.bind(this);
this.finishedTimer = this.finishedTimer.bind(this);
this.switchMode = this.switchMode.bind(this);
this.pomodoroMode = this.pomodoroMode.bind(this);
this.breakMode = this.breakMode.bind(this);
}
componentWillMount() {
this.pomodoroMode();
}
handleNotification(flag) {
this.setState({
send: flag
sendNotification: flag
});
}
@ -35,11 +46,9 @@ class Timer extends Component {
seconds: state.seconds - 1
}));
if (this.state.seconds <= 0) {
if (this.state.seconds === 0) {
this.stopTimer();
this.setState({
send: true
});
this.finishedTimer();
}
}
@ -47,6 +56,7 @@ class Timer extends Component {
this.setState({
started: true
});
this.interval = setInterval(() => this.tick(), 1000);
}
@ -54,12 +64,48 @@ class Timer extends Component {
this.setState({
started: false
});
clearInterval(this.interval);
}
resetTimer() {
this.stopTimer();
this.setState({ seconds: 1500 });
if(this.state.break) {
this.breakMode();
} else {
this.pomodoroMode();
}
}
finishedTimer() {
this.setState({
sendNotification: true,
});
this.switchMode();
}
switchMode() {
if(this.state.break && !this.state.started) {
this.pomodoroMode();
} else if(!this.state.break && !this.state.started) {
this.breakMode();
}
}
pomodoroMode() {
const pomodoroSeconds = 22;
this.setState({
seconds: pomodoroSeconds,
break: false
});
}
breakMode() {
const breakSeconds = 5
this.setState({
seconds: breakSeconds,
break: true
})
}
render() {
@ -70,6 +116,7 @@ class Timer extends Component {
<Col>
<LogoSpin
isStarted={this.state.started}
switchMode={this.switchMode}
/>
</Col>
</Row>
@ -98,7 +145,7 @@ class Timer extends Component {
</Container>
<Notification
send={this.state.send}
send={this.state.sendNotification}
handleNotification={this.handleNotification}
/>
</div>