From 7600188e5022836cca81c0d48f606791a8540936 Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Sat, 30 Mar 2019 18:17:33 +0100
Subject: [PATCH 1/5] Text unselectable
---
src/App.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/App.css b/src/App.css
index 7c32202..e970317 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
body {
background-color: #db4f4a;
+ user-select: none;
}
.title {
From 2459d691bcb825288e75fa5284bee1c4af86b938 Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Sat, 30 Mar 2019 18:53:12 +0100
Subject: [PATCH 2/5] Add switch pomodoro<->break
---
src/components/LogoSpin.css | 5 ---
src/components/LogoSpin.js | 1 +
src/components/Timer.js | 67 +++++++++++++++++++++++++++++++------
3 files changed, 58 insertions(+), 15 deletions(-)
diff --git a/src/components/LogoSpin.css b/src/components/LogoSpin.css
index e6244ab..1029942 100644
--- a/src/components/LogoSpin.css
+++ b/src/components/LogoSpin.css
@@ -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;
diff --git a/src/components/LogoSpin.js b/src/components/LogoSpin.js
index 22280ab..ed12e46 100644
--- a/src/components/LogoSpin.js
+++ b/src/components/LogoSpin.js
@@ -14,6 +14,7 @@ class LogoSpin extends Component {
className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
src={logo}
alt="Tomato"
+ onClick={this.props.switchMode}
>
)
}
diff --git a/src/components/Timer.js b/src/components/Timer.js
index a87fa1d..4c476b9 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -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 {
@@ -98,7 +145,7 @@ class Timer extends Component {
From 5acd2292d26f3b03303469947473d13c05178411 Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Sat, 30 Mar 2019 19:00:06 +0100
Subject: [PATCH 3/5] Fix seconds
---
src/components/Timer.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/Timer.js b/src/components/Timer.js
index 4c476b9..5342c77 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -93,7 +93,7 @@ class Timer extends Component {
pomodoroMode() {
- const pomodoroSeconds = 22;
+ const pomodoroSeconds = 1500;
this.setState({
seconds: pomodoroSeconds,
break: false
@@ -101,7 +101,7 @@ class Timer extends Component {
}
breakMode() {
- const breakSeconds = 5
+ const breakSeconds = 300
this.setState({
seconds: breakSeconds,
break: true
From b569733f4355ed7c2fa78b9994ea1cc190a3eacc Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Sat, 30 Mar 2019 19:04:49 +0100
Subject: [PATCH 4/5] Add dynamic title (timer)
---
src/components/Timer.js | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/src/components/Timer.js b/src/components/Timer.js
index 5342c77..b0e1c5e 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -8,6 +8,7 @@ import './Timer.css';
class Timer extends Component {
constructor(props) {
super(props);
+ this.appName = 'tomadoro';
this.state = {
seconds: 0,
started: false,
@@ -46,6 +47,8 @@ class Timer extends Component {
seconds: state.seconds - 1
}));
+ document.title=`(${this.formatMinute(this.state.seconds)}) ${this.appName}`;
+
if (this.state.seconds === 0) {
this.stopTimer();
this.finishedTimer();
@@ -74,6 +77,8 @@ class Timer extends Component {
} else {
this.pomodoroMode();
}
+
+ document.title = this.appName;
}
finishedTimer() {
From a90b1dc63508f4ce706ac4da8843156f55b21c6d Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Sat, 30 Mar 2019 19:11:48 +0100
Subject: [PATCH 5/5] Add a simple tooltip
---
src/components/LogoSpin.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/LogoSpin.js b/src/components/LogoSpin.js
index ed12e46..b65aead 100644
--- a/src/components/LogoSpin.js
+++ b/src/components/LogoSpin.js
@@ -14,6 +14,7 @@ class LogoSpin extends Component {
className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
src={logo}
alt="Tomato"
+ title="Click on the tomato to change modes"
onClick={this.props.switchMode}
>
)