1
0
mirror of https://github.com/franjsco/tomadoro synced 2025-01-18 16:29:47 +01:00

refactoring Timer

This commit is contained in:
Francesco Esposito 2019-03-15 19:07:55 +01:00
parent c2e41bdd44
commit 04839fd549

View File

@ -1,29 +1,27 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Button, Container, Row, Col } from 'reactstrap'; import { Button, Container, Row, Col } from 'reactstrap';
import Notification from 'react-web-notification';
import './Timer.css'; import './Timer.css';
import logo from '../logo.svg'; import logo from '../logo.svg';
import Notification from 'react-web-notification';
import sound from '../sound.mp3'; import sound from '../sound.mp3';
class Timer extends Component { class Timer extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.defaultSeconds = 1500; this.seconds = 1500;
this.defaultLogoSpin = 'App-logo-rotation'; this.logoSpingCSS = 'App-logo-rotation';
this.state = { this.state = {
seconds: this.defaultSeconds, seconds: this.seconds,
started: false, started: false,
logoSpin: '', logoSpin: '',
ignore: true, ignore: true,
title: '' title: ''
}; };
// binding
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.handlePermissionGranted = this.handlePermissionGranted.bind(this); this.handlePermissionGranted = this.handlePermissionGranted.bind(this);
this.handlePermissionDenied = this.handlePermissionDenied.bind(this); this.handlePermissionDenied = this.handlePermissionDenied.bind(this);
this.handleNotSupported = this.handleNotSupported.bind(this); this.handleNotSupported = this.handleNotSupported.bind(this);
@ -36,7 +34,7 @@ class Timer extends Component {
return ( s - ( s%=60 )) / 60 + ( 9 < s ?':':':0') +s; return ( s - ( s%=60 )) / 60 + ( 9 < s ?':':':0') +s;
} }
// handleNotification
handlePermissionGranted() { handlePermissionGranted() {
this.setState({ this.setState({
ignore: false ignore: false
@ -59,10 +57,6 @@ class Timer extends Component {
console.log(e, 'Notification error tag:' + tag); console.log(e, 'Notification error tag:' + tag);
} }
playSound(){
document.getElementById('sound').play();
}
handleNotificationOnShow() { handleNotificationOnShow() {
this.playSound(); this.playSound();
} }
@ -89,6 +83,11 @@ class Timer extends Component {
}); });
} }
playSound(){
document.getElementById('sound').play();
}
tick() { tick() {
this.setState(state => ({ this.setState(state => ({
seconds: state.seconds -1 seconds: state.seconds -1
@ -104,7 +103,7 @@ class Timer extends Component {
startTimer() { startTimer() {
this.setState({ this.setState({
started: true, started: true,
logoSpin: this.defaultLogoSpin logoSpin: this.logoSpingCSS
}); });
this.interval = setInterval(() => this.tick(), 1000); this.interval = setInterval(() => this.tick(), 1000);
} }
@ -119,79 +118,84 @@ class Timer extends Component {
resetTimer() { resetTimer() {
this.stopTimer(); this.stopTimer();
this.setState({ seconds: this.defaultSeconds}); this.setState({ seconds: this.seconds});
} }
render() { render() {
return ( return (
<div className="App"> <div className="App">
<Container> <Container>
<Row> <Row>
<Col> <Col>
<img <img
className={`App-logo ${this.state.logoSpin}`} className={`App-logo ${this.state.logoSpin}`}
src={logo} src={logo}
alt="Tomato" alt="Tomato"
> ></img>
</img> </Col>
</Col> </Row>
</Row>
<Row>
<Col>
<p
className="timer"
>
{this.formatMinute(this.state.seconds)}
</p>
</Col>
</Row>
<div className="buttons-box">
<Row>
<Col>
<Button
className="buttons"
block
size="lg"
color="success"
onClick={this.startTimer}
disabled={this.state.started}
>
START
</Button>
</Col>
</Row>
<Row
className="top-margin"
>
<Col>
<Button
className="buttons"
block
color="danger"
size="lg"
onClick={this.stopTimer}
disabled={!this.state.started}
>
STOP
</Button>
</Col>
<Col> <Row>
<Button <Col>
className="buttons" <p
block className="timer"
color="secondary" >
size="lg" {this.formatMinute(this.state.seconds)}
onClick={this.resetTimer} </p>
disabled={this.state.started || this.state.seconds === this.defaultSeconds} </Col>
> </Row>
RESET
</Button> <div className="buttons-box">
</Col> <Row>
</Row> <Col>
<Button
</div> className="buttons"
block
size="lg"
color="success"
onClick={this.startTimer}
disabled={this.state.started}
>
START
</Button>
</Col>
</Row>
<Row
className="top-margin"
>
<Col>
<Button
className="buttons"
block
color="danger"
size="lg"
onClick={this.stopTimer}
disabled={!this.state.started}
>
STOP
</Button>
</Col>
<Col>
<Button
className="buttons"
block
color="secondary"
size="lg"
onClick={this.resetTimer}
disabled={this.state.started || this.state.seconds === this.seconds}
>
RESET
</Button>
</Col>
</Row>
</div>
<Row>
</Row>
</Container> </Container>
<Notification <Notification
ignore={this.state.ignore} ignore={this.state.ignore}
onPermissionGranted = {this.handlePermissionGranted} onPermissionGranted = {this.handlePermissionGranted}
@ -209,6 +213,7 @@ class Timer extends Component {
<source src={sound} type='audio/mpeg' /> <source src={sound} type='audio/mpeg' />
<embed hidden src={sound} /> <embed hidden src={sound} />
</audio> </audio>
</div> </div>
); );
} }