From 26c6c0564ad1926d34ff6f8ed09a7274eb5b903a Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Thu, 21 Mar 2019 14:58:26 +0100
Subject: [PATCH] edit timer notification
---
src/components/Notification.js | 106 +++++++++++++++++++++++++++++++++
src/components/Timer.js | 105 ++++++--------------------------
2 files changed, 125 insertions(+), 86 deletions(-)
create mode 100644 src/components/Notification.js
diff --git a/src/components/Notification.js b/src/components/Notification.js
new file mode 100644
index 0000000..617a6eb
--- /dev/null
+++ b/src/components/Notification.js
@@ -0,0 +1,106 @@
+import React, { Component } from 'react';
+import WebNotification from 'react-web-notification';
+import sound from '../sound.mp3';
+
+class Notification extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ ignore: true,
+ title: ''
+ };
+
+ this.handlePermissionGranted = this.handlePermissionGranted.bind(this);
+ this.handlePermissionDenied = this.handlePermissionDenied.bind(this);
+ this.handleNotSupported = this.handleNotSupported.bind(this);
+ this.sendNotification = this.sendNotification.bind(this);
+ this.handleNotificationOnShow = this.handleNotificationOnShow.bind(this);
+ this.playSound = this.playSound.bind(this);
+ }
+
+ componentDidUpdate() {
+ if(this.props.send) {
+ this.sendNotification()
+ this.props.handleNotification(false)
+ };
+ }
+
+ handlePermissionGranted() {
+ this.setState({
+ ignore: false
+ });
+ }
+
+ handlePermissionDenied() {
+ this.setState({
+ ignore: true
+ });
+ }
+
+ handleNotSupported() {
+ this.setState({
+ ignore: true
+ });
+ }
+
+ handleNotificationOnError(e, tag) {
+ console.log(e, 'Notification error tag:' + tag);
+ }
+
+ handleNotificationOnShow() {
+ this.playSound();
+ }
+
+ sendNotification() {
+ if (this.state.ignore) {
+ return;
+ }
+
+ const title = 'tomadoro';
+ const body = 'Time is Up! 🍅';
+ const tag = Date.now();
+
+ const options = {
+ tag: tag,
+ body: body,
+ lang: 'en',
+ sound: { sound }
+ };
+
+ this.setState({
+ title: title,
+ options: options
+ });
+ }
+
+ playSound() {
+ document.getElementById('sound').play();
+ }
+
+ render() {
+ return(
+
+ );
+ }
+}
+
+export default Notification;
\ No newline at end of file
diff --git a/src/components/Timer.js b/src/components/Timer.js
index dd69b3a..c2da7b0 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -1,100 +1,46 @@
import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
-import Notification from 'react-web-notification';
+import Notification from './Notification';
import ButtonBox from './ButtonBox';
import LogoSpin from './LogoSpin';
import './Timer.css';
-import sound from '../sound.mp3';
-
class Timer extends Component {
constructor(props) {
super(props);
this.state = {
- seconds: 1500,
+ seconds: 4,
started: false,
- ignore: true,
+ send: false,
title: ''
};
+ 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.handlePermissionGranted = this.handlePermissionGranted.bind(this);
- this.handlePermissionDenied = this.handlePermissionDenied.bind(this);
- this.handleNotSupported = this.handleNotSupported.bind(this);
- this.sendNotification = this.sendNotification.bind(this);
- this.handleNotificationOnShow = this.handleNotificationOnShow.bind(this);
- this.playSound = this.playSound.bind(this);
+ }
+
+ handleNotification(flag) {
+ this.setState({
+ send: flag
+ });
}
formatMinute(s) {
return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
}
-
-
- handlePermissionGranted() {
- this.setState({
- ignore: false
- });
- }
-
- handlePermissionDenied() {
- this.setState({
- ignore: true
- });
- }
-
- handleNotSupported() {
- this.setState({
- ignore: true
- });
- }
-
- handleNotificationOnError(e, tag) {
- console.log(e, 'Notification error tag:' + tag);
- }
-
- handleNotificationOnShow() {
- this.playSound();
- }
-
- sendNotification() {
- if (this.state.ignore) {
- return;
- }
-
- const title = 'tomadoro';
- const body = 'Time is Up! 🍅';
- const tag = Date.now();
-
- const options = {
- tag: tag,
- body: body,
- lang: 'en',
- sound: { sound }
- };
-
- this.setState({
- title: title,
- options: options
- });
- }
-
- playSound() {
- document.getElementById('sound').play();
- }
-
-
+
tick() {
this.setState(state => ({
seconds: state.seconds - 1
}));
if (this.state.seconds <= 0) {
- this.sendNotification();
this.stopTimer();
- this.resetTimer();
+ this.setState({
+ send: true
+ });
}
}
@@ -117,7 +63,7 @@ class Timer extends Component {
this.setState({ seconds: 1500 });
}
- render() {
+ render() {
return (
@@ -146,29 +92,16 @@ class Timer extends Component {
stopTimer={this.stopTimer}
isStarted={this.state.started}
resetTimer={this.resetTimer}
+ seconds={this.state.seconds}
/>
-
-
-
-
+ send={this.state.send}
+ handleNotification={this.handleNotification}
+ />
);
}