edit timer notification

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(
+      <div>
+        <WebNotification
+          ignore={this.state.ignore}
+          onPermissionGranted={this.handlePermissionGranted}
+          onPermissionDenied={this.handlePermissionDenied}
+          notSupported={this.handleNotSupported}
+          onError={this.onError}
+          timeout={5000}
+          title={this.state.title}
+          options={this.state.options}
+          onShow={this.handleNotificationOnShow}
+        >
+        </WebNotification>
+
+        <audio id='sound' preload='auto'>
+          <source src={sound} type='audio/mpeg' />
+          <embed hidden src={sound} />
+        </audio>
+    </div>
+    );
+  }
+}
+
+export default Notification;

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 (
       <div className="App">
         <Container>
@@ -146,29 +92,16 @@ class Timer extends Component {
                 stopTimer={this.stopTimer}
                 isStarted={this.state.started}
                 resetTimer={this.resetTimer}
+                seconds={this.state.seconds}
               />
             </Col>
           </Row>
         </Container>
 
         <Notification
-          ignore={this.state.ignore}
-          onPermissionGranted={this.handlePermissionGranted}
-          onPermissionDenied={this.handlePermissionDenied}
-          notSupported={this.handleNotSupported}
-          onError={this.onError}
-          timeout={5000}
-          title={this.state.title}
-          options={this.state.options}
-          onShow={this.handleNotificationOnShow}
-        >
-        </Notification>
-
-        <audio id='sound' preload='auto'>
-          <source src={sound} type='audio/mpeg' />
-          <embed hidden src={sound} />
-        </audio>
-
+          send={this.state.send} 
+          handleNotification={this.handleNotification} 
+          />
       </div>
     );
   }