test

src/components/Timer.js

@@ -2,29 +2,103 @@ import React, { Component } from 'react';
 import { Button, Container, Row, Col } from 'reactstrap';
 import './Timer.css';
 import logo from '../logo.svg';
+import Notification from 'react-web-notification';
+import sound from '../sound.mp3';
 
 
 class Timer extends Component {
   constructor(props) {
     super(props);
-    this.defaultSeconds = 1500;
+    this.defaultSeconds = 4;
     this.defaultLogoSpin = 'App-logo-rotation';
     this.state = { 
       seconds: this.defaultSeconds,
       started: false,
-      logoSpin: ''
+      logoSpin: '',
+      ignore: true,
+      title: ''
     };
+
+    // binding
     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);
   }
   
-  fmtMSS(s){return(s-(s%=60))/60+(9<s?':':':0')+s}
+  formatMinute(s){
+    return ( s - ( s%=60 )) / 60 + ( 9 < s ?':':':0') +s;
+  }
+
+  // handleNotification
+  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);
+  }
+
+  playSound(){
+    document.getElementById('sound').play();
+  }
+
+  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
+    });
+  }
 
   tick() {
     this.setState(state => ({
       seconds: state.seconds -1
     }));
+
+    if (this.state.seconds <= 0) {
+      this.sendNotification();
+      this.stopTimer();
+      this.resetTimer();
+    }
   }
 
   startTimer() {
@@ -54,22 +128,27 @@ class Timer extends Component {
         <Container>
         <Row>
           <Col>
-            <img className={`App-logo ${this.state.logoSpin}`} src={logo}/>
+            <img 
+              className={`App-logo ${this.state.logoSpin}`} 
+              src={logo}
+              alt="Tomato"
+            >
+            </img>
           </Col>
         </Row>
         <Row>
           <Col>
           <p 
-            class="timer"
+            className="timer"
           >
-            {this.fmtMSS(this.state.seconds)}
+            {this.formatMinute(this.state.seconds)}
           </p>
           </Col>
         </Row>
         <div className="buttons-box">
         <Row>
           <Col>
-          <Button 
+          <Button
             className="buttons" 
             block
             size="lg"
@@ -77,13 +156,15 @@ class Timer extends Component {
             onClick={this.startTimer}
             disabled={this.state.started}
           >
-            Start
+            START
           </Button>
           </Col>
         </Row>
-        <Row  className="top-buffer">
+        <Row  
+          className="top-margin"
+        >
           <Col>
-          <Button 
+          <Button
           className="buttons"
           block
           color="danger"
@@ -91,26 +172,43 @@ class Timer extends Component {
           onClick={this.stopTimer}
           disabled={!this.state.started}
           >
-            Stop
+            STOP
           </Button>
           </Col>
 
           <Col>
-          <Button 
+          <Button
             className="buttons" 
             block
             color="secondary"
             size="lg"
             onClick={this.resetTimer}
-            disabled={this.state.started}
+            disabled={this.state.started || this.state.seconds === this.defaultSeconds}
           >
-            Reset
+            RESET
           </Button>
           </Col>
         </Row>
     
         </div>
         </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>
       </div>
     );
   }