franjsco
/
tomadoro
mirror of https://github.com/franjsco/tomadoro
1
0
Fork 0
Code Issues Releases Wiki Activity

Edit app (remove timer)

This commit is contained in:
Francesco Esposito 2019-04-18 17:44:32 +02:00
parent 00409ac11a
commit 05d157c32e
4 changed files with 166 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.css
View File

@ -50,3 +50,10 @@ a:hover {
text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
}
.timer {
font-size: 100px;
font-weight: normal;
text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
color: white;
}

170
src/App.js
View File

@ -1,24 +1,172 @@
import React, { Component } from 'react';
import Timer from './components/Timer';
import { Container, Row, Col } from 'reactstrap';
import Logo from './components/Logo';
import Box from './components/Box';
import Notification from './components/Notification';
import './App.css';
class App extends Component {
render() {
constructor(props) {
super(props);
this.appName = 'tomadoro';
this.pomodoroSeconds = 1500;
this.breakSeconds = 300;
this.state = {
startClickNotification: false, // TODO: refactoring identificativo
seconds: 0,
started: false,
break: false,
sendNotification: false
};
// binding
this.startTimer = this.startTimer.bind(this);
this.stopTimer = this.stopTimer.bind(this);
this.resetTimer = this.resetTimer.bind(this);
this.terminatedTimer = this.terminatedTimer.bind(this);
this.pomodoroMode = this.pomodoroMode.bind(this);
this.breakMode = this.breakMode.bind(this);
this.switchMode = this.switchMode.bind(this);
this.formatMinute = this.formatMinute.bind(this);
this.handleNotification = this.handleNotification.bind(this);
}
componentWillMount() {
this.pomodoroMode();
}
formatMinute(s) {
return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
}
tick() {
this.setState(state => ({
seconds: state.seconds -1
}));
document.title = `(${this.formatMinute(this.state.seconds)}) ${this.appName}`;
if (this.state.seconds === 0) {
this.stopTimer();
this.terminatedTimer();
}
}
startTimer() {
this.setState({
started: true,
startClickNotification: true
});
this.interval = setInterval(() => this.tick(), 1000);
}
stopTimer() {
this.setState({
started: false
});
clearInterval(this.interval);
}
resetTimer() {
if(this.state.break) {
this.breakMode();
} else {
this.pomodoroMode();
}
document.title = this.appName;
}
terminatedTimer() {
this.setState({
sendNotification: true
});
this.switchMode();
}
pomodoroMode() {
this.setState({
seconds: this.pomodoroSeconds,
break: false
});
}
breakMode() {
this.setState({
seconds: this.breakSeconds,
break: true
});
}
switchMode() { // TODO: refactoring naming
if(this.state.break && !this.state.started) {
this.pomodoroMode();
} else if(!this.state.break && !this.state.started) {
this.breakMode();
}
}
handleNotification(flag) {
this.setState({
sendNotification: flag
});
}
render() {
return (
<div className="App">
<div
className="App-header"
>
<div className="App-header">
tomadoro
</div>
<div>
<Timer />
</div>
<Container>
<Row>
<Col>
<Logo
isStarted={this.state.started}
switchMode={this.switchMode}
/>
</Col>
</Row>
<div
className="footer"
>
<Row>
<Col>
<p className="timer">
{this.formatMinute(this.state.seconds)}
</p>
</Col>
</Row>
<Row>
<Col
sm={{size: 10, offset: 1}}
md={{size: 8, offset: 2}}
lg={{ size: 6, offset: 3 }}
>
<Box
startTimer={this.startTimer}
stopTimer={this.stopTimer}
isStarted={this.state.started}
resetTimer={this.resetTimer}
seconds={this.state.seconds}
/>
</Col>
</Row>
</Container>
{ // notification
this.state.startClickNotification ? (
<Notification
send={this.state.sendNotification}
handleNotification={this.handleNotification} />)
: ''}
<div className="footer">
<p>
<a href="https://github.com/frab1t/tomadoro">tomadoro</a>{` `}
by <a href="https://twitter.com/frab1t">@frab1t</a> (Francesco Esposito)

6
src/components/Timer.css
View File

@ -1,6 +0,0 @@
.timer {
font-size: 100px;
font-weight: normal;
text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
color: white;
}

159
src/components/Timer.js
View File

@ -1,159 +0,0 @@
import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import Notification from './Notification';
import Box from './Box';
import Logo from './Logo';
import './Timer.css';
class Timer extends Component {
constructor(props) {
super(props);
this.appName = 'tomadoro';
this.state = {
seconds: 0,
started: 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({
sendNotification: flag
});
}
formatMinute(s) {
return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
}
tick() {
this.setState(state => ({
seconds: state.seconds - 1
}));
document.title=`(${this.formatMinute(this.state.seconds)}) ${this.appName}`;
if (this.state.seconds === 0) {
this.stopTimer();
this.finishedTimer();
}
}
startTimer() {
this.setState({
started: true
});
this.interval = setInterval(() => this.tick(), 1000);
}
stopTimer() {
this.setState({
started: false
});
clearInterval(this.interval);
}
resetTimer() {
if(this.state.break) {
this.breakMode();
} else {
this.pomodoroMode();
}
document.title = this.appName;
}
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 = 1500;
this.setState({
seconds: pomodoroSeconds,
break: false
});
}
breakMode() {
const breakSeconds = 300
this.setState({
seconds: breakSeconds,
break: true
})
}
render() {
return (
<div className="App">
<Container>
<Row>
<Col>
<Logo
isStarted={this.state.started}
switchMode={this.switchMode}
/>
</Col>
</Row>
<Row>
<Col>
<p
className="timer"
>
{this.formatMinute(this.state.seconds)}
</p>
</Col>
</Row>
<Row>
<Col sm={{size: 10, offset: 1}} md={{size: 8, offset: 2}} lg={{ size: 6, offset: 3 }}>
<Box
startTimer={this.startTimer}
stopTimer={this.stopTimer}
isStarted={this.state.started}
resetTimer={this.resetTimer}
seconds={this.state.seconds}
/>
</Col>
</Row>
</Container>
<Notification
send={this.state.sendNotification}
handleNotification={this.handleNotification}
/>
</div>
);
}
}
export default Timer;