Merge pull request #16 from georgeOsdDev/hotfix/#15

georgeOsdDev · georgeOsdDev · commit 7583aa6007fe · 2016-02-04T11:19:41.000+09:00
Fix #15 Add askAgain prop
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ### Ver 0.2.2 (Next Release)
 
+  * [#15 Permission being repeatedly asked for in Safari](https://github.com/georgeOsdDev/react-web-notification/issues/11)
+
 ### Ver 0.2.1
 
   * [#11 depending on library](https://github.com/georgeOsdDev/react-web-notification/issues/11)
diff --git a/README.md b/README.md
@@ -43,6 +43,8 @@ Notification.propTypes = {
 
 * `disableActiveWindow` : if true, nothing will be happen when window is active
 
+* `askAgain` : if true, `window.Notification.requestPermission` will be called on `componentDidMount`, even if it was denied before,
+
 * `notSupported()` : Called when [HTML5 Web Notification API](https://developer.mozilla.org/en/docs/Web/API/notification) is not supported.
 
 * `onPermissionGranted()` : Called when permission granted.
diff --git a/example/app.js b/example/app.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import ReactDom from 'react-dom';
-import Notification  from '../src/components/Notification';
+import Notification  from '../lib/components/Notification';
 
 //allow react dev tools work
 window.React = React;
diff --git a/lib/components/Notification.js b/lib/components/Notification.js
@@ -19,6 +19,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var PERMISSION_GRANTED = 'granted';
+var PERMISSION_DENIED = 'denied';
 
 var seqGen = function seqGen() {
   var i = 0;
@@ -70,10 +71,26 @@ var Notification = (function (_React$Component) {
       this.windowFocus = false;
     }
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
+    key: '_askPermission',
+    value: function _askPermission() {
       var _this2 = this;
 
+      window.Notification.requestPermission(function (permission) {
+        var result = permission === PERMISSION_GRANTED;
+        _this2.setState({
+          granted: result
+        }, function () {
+          if (result) {
+            _this2.props.onPermissionGranted();
+          } else {
+            _this2.props.onPermissionDenied();
+          }
+        });
+      });
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
       if (this.props.disableActiveWindow) {
         if (window.addEventListener) {
           window.addEventListener('focus', this.onWindowFocus);
@@ -86,22 +103,17 @@ var Notification = (function (_React$Component) {
 
       if (!this.state.supported) {
         this.props.notSupported();
+      } else if (this.state.granted) {
+        this.props.onPermissionGranted();
       } else {
-        if (this.state.granted) {
-          this.props.onPermissionGranted();
+        if (window.Notification.permission === PERMISSION_DENIED) {
+          if (this.props.askAgain) {
+            this._askPermission();
+          } else {
+            this.props.onPermissionDenied();
+          }
         } else {
-          window.Notification.requestPermission(function (permission) {
-            var result = permission === PERMISSION_GRANTED;
-            _this2.setState({
-              granted: result
-            }, function () {
-              if (result) {
-                _this2.props.onPermissionGranted();
-              } else {
-                _this2.props.onPermissionDenied();
-              }
-            });
-          });
+          this._askPermission();
         }
       }
     }
@@ -182,6 +194,7 @@ var Notification = (function (_React$Component) {
 Notification.propTypes = {
   ignore: _react2.default.PropTypes.bool,
   disableActiveWindow: _react2.default.PropTypes.bool,
+  askAgain: _react2.default.PropTypes.bool,
   notSupported: _react2.default.PropTypes.func,
   onPermissionGranted: _react2.default.PropTypes.func,
   onPermissionDenied: _react2.default.PropTypes.func,
@@ -197,6 +210,7 @@ Notification.propTypes = {
 Notification.defaultProps = {
   ignore: false,
   disableActiveWindow: false,
+  askAgain: false,
   notSupported: function notSupported() {},
   onPermissionGranted: function onPermissionGranted() {},
   onPermissionDenied: function onPermissionDenied() {},
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-web-notification",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React component with HTML5 Web Notification API",
   "main": "./lib/components/Notification.js",
   "scripts": {
diff --git a/src/components/Notification.js b/src/components/Notification.js
@@ -3,6 +3,7 @@
 import React from 'react';
 
 const PERMISSION_GRANTED = 'granted';
+const PERMISSION_DENIED = 'denied';
 
 const seqGen = () => {
   let i = 0;
@@ -46,6 +47,21 @@ class Notification extends React.Component {
     this.windowFocus = false;
   }
 
+  _askPermission(){
+    window.Notification.requestPermission((permission) => {
+      let result = permission === PERMISSION_GRANTED;
+      this.setState({
+        granted: result
+      }, () => {
+        if (result) {
+          this.props.onPermissionGranted();
+        } else {
+          this.props.onPermissionDenied();
+        }
+      });
+    });
+  }
+
   componentDidMount(){
     if (this.props.disableActiveWindow) {
       if (window.addEventListener){
@@ -59,22 +75,17 @@ class Notification extends React.Component {
 
     if (!this.state.supported) {
       this.props.notSupported();
-    } else {
-      if(this.state.granted) {
+    } else if (this.state.granted) {
       this.props.onPermissionGranted();
+    } else {
+      if (window.Notification.permission === PERMISSION_DENIED){
+        if (this.props.askAgain){
+          this._askPermission();
+        } else {
+          this.props.onPermissionDenied();
+        }
       } else {
-        window.Notification.requestPermission( (permission) => {
-          let result = permission === PERMISSION_GRANTED;
-          this.setState({
-            granted: result
-          }, () => {
-            if (result) {
-              this.props.onPermissionGranted();
-            } else {
-              this.props.onPermissionDenied();
-            }
-          });
-        });
+        this._askPermission();
       }
     }
   }
@@ -91,6 +102,8 @@ class Notification extends React.Component {
     }
   }
 
+
+
   render() {
     let doNotShowOnActiveWindow = this.props.disableActiveWindow && this.windowFocus;
     if (!this.props.ignore && this.props.title && this.state.supported && this.state.granted && !doNotShowOnActiveWindow) {
@@ -138,6 +151,7 @@ class Notification extends React.Component {
 Notification.propTypes = {
   ignore: React.PropTypes.bool,
   disableActiveWindow: React.PropTypes.bool,
+  askAgain: React.PropTypes.bool,
   notSupported: React.PropTypes.func,
   onPermissionGranted: React.PropTypes.func,
   onPermissionDenied: React.PropTypes.func,
@@ -153,6 +167,7 @@ Notification.propTypes = {
 Notification.defaultProps = {
   ignore: false,
   disableActiveWindow: false,
+  askAgain: false,
   notSupported: () => {},
   onPermissionGranted: () => {},
   onPermissionDenied: () => {},
diff --git a/test/components/Notification_spec.js b/test/components/Notification_spec.js
@@ -13,6 +13,7 @@ import Notification from '../../src/components/Notification';
 
 const PERMISSION_GRANTED = 'granted';
 const PERMISSION_DENIED = 'denied';
+const PERMISSION_DEFAULT = 'default';
 
 describe('Test of Notification', () => {
 
@@ -26,6 +27,7 @@ describe('Test of Notification', () => {
       component = TestUtils.renderIntoDocument(<Notification title='test'/>);
       expect(component.props.ignore).to.be.eql(false);
       expect(component.props.disableActiveWindow).to.be.eql(false);
+      expect(component.props.askAgain).to.be.eql(false);
       expect(typeof component.props.notSupported).to.be.eql('function');
       expect(typeof component.props.onPermissionGranted).to.be.eql('function');
       expect(typeof component.props.onPermissionDenied).to.be.eql('function');
@@ -98,6 +100,68 @@ describe('Test of Notification', () => {
           });
         });
 
+        describe('When Notification is already denied', () => {
+          describe('Check callbacks', ()=> {
+
+            let stub1, stub2, spy1, spy2;
+            before(() => {
+              spy1 = sinon.spy();
+              spy2 = sinon.spy();
+              stub1 = sinon.stub(window.Notification, 'permission', { get: function () { return PERMISSION_DENIED; } });
+              stub2 = sinon.stub(window.Notification, 'requestPermission', function(cb){
+                return cb(PERMISSION_DENIED);
+              });
+              component = TestUtils.renderIntoDocument(<Notification title='test' notSupported={spy1} onPermissionDenied={spy2}/>);
+            });
+
+            after(() => {
+              stub1.restore();
+              stub2.restore();
+            });
+
+            it('should not call window.Notification.requestPermission', () => {
+              expect(stub2.calledOnce).to.be.eql(false);
+            });
+
+            it('should call onPermissionDenied prop', () => {
+              expect(spy1.called).to.be.eql(false);
+              expect(spy2.calledOnce).to.be.eql(true);
+            });
+          });
+        });
+
+        describe('When Notification is already denied, but `askAgain` prop is true', () => {
+          describe('Check callbacks', ()=> {
+
+            let stub1, stub2, spy1, spy2, spy3;
+            before(() => {
+              spy1 = sinon.spy();
+              spy2 = sinon.spy();
+              spy3 = sinon.spy();
+              stub1 = sinon.stub(window.Notification, 'permission', { get: function () { return PERMISSION_DENIED; } });
+              stub2 = sinon.stub(window.Notification, 'requestPermission', function(cb){
+                return cb(PERMISSION_GRANTED);
+              });
+              component = TestUtils.renderIntoDocument(<Notification title='test' notSupported={spy1} onPermissionDenied={spy2} onPermissionGranted={spy3} askAgain={true}/>);
+            });
+
+            after(() => {
+              stub1.restore();
+              stub2.restore();
+            });
+
+            it('should call window.Notification.requestPermission', () => {
+              expect(stub2.calledOnce).to.be.eql(true);
+            });
+
+            it('should call onPermissionGranted prop', () => {
+              expect(spy1.called).to.be.eql(false);
+              expect(spy2.called).to.be.eql(false);
+              expect(spy3.calledOnce).to.be.eql(true);
+            });
+          });
+        });
+
         describe('When Notification is granted', () => {
           let stub;
           before(() => {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-web-notification",`
`3`		`- "version": "0.2.1",`
	`3`	`+ "version": "0.2.2",`
`4`	`4`	`"description": "React component with HTML5 Web Notification API",`
`5`	`5`	`"main": "./lib/components/Notification.js",`
`6`	`6`	`"scripts": {`