Merge pull request #105 from ekonstantinidis/on-click-mark-read

Settings - "On Click, Mark as Read"

Author: ekonstantinidis

src/js/__tests__/components/notification.js

@@ -6,6 +6,7 @@ jest.dontMock('../../utils/api-requests');
 jest.dontMock('../../components/notification.js');
 jest.dontMock('../../stores/auth.js');
 jest.dontMock('../../stores/notifications.js');
+jest.dontMock('../../stores/settings.js');
 
 var React = require('react/addons');
 var TestUtils = React.addons.TestUtils;
@@ -48,6 +49,7 @@ describe('Test for Notification Component', function () {
     AuthStore = require('../../stores/auth.js');
     SingleNotification = require('../../components/notification.js');
     NotificationsStore = require('../../stores/notifications.js');
+    SettingsStore = require('../../stores/settings.js');
   });
 
   it('Should render a notification component (Issue)', function () {
@@ -72,12 +74,28 @@ describe('Test for Notification Component', function () {
         key={notification.id} />);
 
     expect(instance.state.isRead).toBeFalsy();
+    expect(instance.pressTitle).toBeDefined();
     expect(instance.openBrowser).toBeDefined();
     expect(instance.markAsRead).toBeDefined();
 
+    spyOn(instance, 'openBrowser');
+    spyOn(instance, 'markAsRead');
+
+    instance.pressTitle();
+    expect(instance.openBrowser).toHaveBeenCalled();
+
     // Open Browser
     instance.openBrowser();
 
+    // If 'markOnClick' is ON
+    SettingsStore.onSetSetting('markOnClick', true);
+
+    instance.pressTitle();
+
+    expect(instance.openBrowser).toHaveBeenCalled();
+    expect(instance.markAsRead).toHaveBeenCalled();
+    jest.runAllTimers();
+
   });
 
   it('Should render a notification component (PullRequest)', function () {
@@ -105,6 +123,9 @@ describe('Test for Notification Component', function () {
     expect(instance.openBrowser).toBeDefined();
     expect(instance.markAsRead).toBeDefined();
 
+    // Open Browser
+    instance.openBrowser();
+
   });
 
   it('Should render a notification component (OtherType)', function () {

src/js/__tests__/components/repository.js

@@ -34,6 +34,9 @@ describe('Test for Repository Component', function () {
       item: false,
       getItem: function () {
         return this.item;
+      },
+      setItem: function (item) {
+        this.item = item;
       }
     };
 

src/js/components/notification.js

@@ -4,6 +4,7 @@ var shell = remote.require('shell');
 
 var Actions = require('../actions/actions');
 var apiRequests = require('../utils/api-requests');
+var SettingsStore = require('../stores/settings');
 
 var NotificationItem = React.createClass({
 
@@ -19,6 +20,16 @@ var NotificationItem = React.createClass({
     });
   },
 
+  pressTitle: function () {
+    var markOnClick = SettingsStore.getSettings().markOnClick;
+    if (markOnClick) {
+      this.openBrowser();
+      this.markAsRead();
+    } else {
+      this.openBrowser();
+    }
+  },
+
   openBrowser: function () {
     var url = this.props.notification.subject.url.replace('api.github.com/repos', 'www.github.com');
     if (url.indexOf('/pulls/') != -1) {
@@ -67,7 +78,7 @@ var NotificationItem = React.createClass({
     return (
       <div className={this.state.isRead ? 'row notification read' : 'row notification'}>
         <div className='col-xs-1'><span className={typeIconClass} /></div>
-        <div className='col-xs-10 subject' onClick={this.openBrowser}>
+        <div className='col-xs-10 subject' onClick={this.pressTitle}>
           {this.props.notification.subject.title}
         </div>
         <div className='col-xs-1 check-wrapper'>

src/js/components/settings.js

@@ -13,6 +13,7 @@ var SettingsPage = React.createClass({
       participating: settings.participating,
       playSound: settings.playSound,
       showNotifications: settings.showNotifications,
+      markOnClick: settings.markOnClick,
       openAtStartup: settings.openAtStartup
     };
   },
@@ -56,6 +57,16 @@ var SettingsPage = React.createClass({
               onChange={this.toggleSetting.bind(this, 'showNotifications')} />
           </div>
         </div>
+
+        <div className='row'>
+          <div className='col-xs-8'>On Click, Mark as Read</div>
+          <div className='col-xs-4'>
+            <Toggle
+              defaultChecked={this.state.markOnClick}
+              onChange={this.toggleSetting.bind(this, 'markOnClick')} />
+          </div>
+        </div>
+
         <div className='row'>
           <div className='col-xs-8'>Open at startup</div>
           <div className='col-xs-4'>

src/js/stores/settings.js

@@ -14,6 +14,7 @@ var SettingsStore = Reflux.createStore({
         participating: false,
         playSound: true,
         showNotifications: true,
+        markOnClick: false,
         openAtStartup: false
       };
     }
@@ -34,6 +35,10 @@ var SettingsStore = Reflux.createStore({
       settings.showNotifications = true;
     }
 
+    if (typeof settings.markOnClick !== 'boolean') {
+      settings.markOnClick = false;
+    }
+
     if (typeof settings.openAtStartup !== 'boolean') {
       settings.openAtStartup = false;
     }

src/less/style.less

@@ -320,10 +320,10 @@ input {
 .settings {
   background-color: @ThemePrimary;
   color: @White;
-  padding: 20px;
+  padding: 15px 20px;
 
   .row {
-    margin: 20px 10px;
+    margin: 12px 10px;
 
     .col-xs-4 {
       text-align: right;