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 { .App-logo {
height: 25vmin; height: 25vmin;
pointer-events: none;
filter: drop-shadow(0 0 0.50rem #f8ff9c); filter: drop-shadow(0 0 0.50rem #f8ff9c);
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View File

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

View File

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