Merge pull request #52 from ekonstantinidis/participating

Settings - Participating Notifications

Author: ekonstantinidis

package.json

@@ -69,9 +69,11 @@
       "src/js/components/notification.js": true,
       "src/js/components/notifications.js": true,
       "src/js/components/repository.js": true,
+      "src/js/components/settings.js": true,
       "src/js/components/footer.js": true,
       "src/js/stores/auth.js": true,
-      "src/js/stores/notifications.js": true
+      "src/js/stores/notifications.js": true,
+      "src/js/stores/settings.js": true
     },
     "unmockedModulePathPatterns": [
       "node_modules/react",
@@ -111,6 +113,7 @@
     "octicons": "=2.2.0",
     "react": "=0.13.3",
     "react-router": "=0.13.3",
+    "react-toggle": "=1.2.3",
     "react-tools": "=0.13.3",
     "reactify": "=1.1.1",
     "reflux": "=0.2.7",

src/js/__tests__/__mocks__/react-router.js

@@ -22,4 +22,11 @@ Router.Link = React.createClass({
   }
 });
 
+Router.State = {
+  getPath: function () {
+    return '/settings';
+  },
+  getCurrentPath: function () {}
+};
+
 module.exports = Router;

src/js/__tests__/components/navigation.js

@@ -50,11 +50,15 @@ describe('Test for Navigation', function () {
     expect(instance.refreshNotifications).toBeDefined();
     expect(instance.refreshDone).toBeDefined();
     expect(instance.logOut).toBeDefined();
+    expect(instance.goBack).toBeDefined();
+    expect(instance.goToSettings).toBeDefined();
     expect(instance.appQuit).toBeDefined();
 
     var logoutIcon = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'fa-sign-out');
     expect(logoutIcon.length).toBe(0);
 
+    var quitIcon = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'fa-power-off');
+    expect(quitIcon.length).toBe(1);
   });
 
   it('Should load the navigation component for logged in users', function () {
@@ -72,6 +76,8 @@ describe('Test for Navigation', function () {
     expect(instance.refreshNotifications).toBeDefined();
     expect(instance.refreshDone).toBeDefined();
     expect(instance.logOut).toBeDefined();
+    expect(instance.goBack).toBeDefined();
+    expect(instance.goToSettings).toBeDefined();
     expect(instance.appQuit).toBeDefined();
 
     var logoutIcon = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'fa-sign-out');
@@ -124,4 +130,24 @@ describe('Test for Navigation', function () {
 
   });
 
+  it('Should test the transitions', function () {
+
+    spyOn(Actions, 'getNotifications');
+
+    AuthStore.authStatus = function () {
+      return true;
+    };
+
+    var instance;
+    React.withContext({router: new Router()}, function () {
+      instance = TestUtils.renderIntoDocument(<Navigation />);
+    });
+
+    expect(instance.componentDidMount).toBeDefined();
+
+    instance.goBack();
+    instance.goToSettings();
+
+  });
+
 });

src/js/__tests__/stores/settings.js

@@ -0,0 +1,97 @@
+/*global jest, describe, it, expect, spyOn, beforeEach */
+
+'use strict';
+
+jest.dontMock('reflux');
+jest.dontMock('../../stores/settings.js');
+jest.dontMock('../../actions/actions.js');
+
+describe('Tests for SettingsStore', function () {
+
+  var SettingsStore, Actions;
+
+  beforeEach(function () {
+
+    // Mock Electron's window.require
+    window.require = function () {
+      return {
+        sendChannel: function () {
+          return;
+        }
+      };
+    };
+
+    // Mock localStorage
+    window.localStorage = {
+      item: false,
+      getItem: function () {
+        return this.item;
+      },
+      setItem: function (item) {
+        this.item = item;
+      }
+    };
+
+    Actions = require('../../actions/actions.js');
+    SettingsStore = require('../../stores/settings.js');
+  });
+
+  it('should get the settings', function () {
+
+    spyOn(SettingsStore, 'trigger');
+
+    expect(SettingsStore.getSettings().participating).toBe(false);
+
+  });
+
+  it('should set a setting', function () {
+
+    spyOn(SettingsStore, 'trigger');
+
+    SettingsStore.onSetSetting('participating', true);
+
+    expect(SettingsStore.getSettings().participating).toBe(true);
+
+  });
+
+});
+
+describe('Tests for SettingsStore', function () {
+
+  var SettingsStore, Actions;
+
+  beforeEach(function () {
+
+    // Mock Electron's window.require
+    window.require = function () {
+      return {
+        sendChannel: function () {
+          return;
+        }
+      };
+    };
+
+    // Mock localStorage
+    window.localStorage = {
+      item: false,
+      getItem: function () {
+        return '{}';
+      },
+      setItem: function (item) {
+        this.item = item;
+      }
+    };
+
+    Actions = require('../../actions/actions.js');
+    SettingsStore = require('../../stores/settings.js');
+  });
+
+  it('should get the settings as string', function () {
+
+    spyOn(SettingsStore, 'trigger');
+
+    SettingsStore.getSettings();
+
+  });
+
+});

src/js/actions/actions.js

@@ -4,7 +4,8 @@ var Actions = Reflux.createActions({
 
   'login': {},
   'logout': {},
-  'getNotifications': {asyncResult: true}
+  'getNotifications': {asyncResult: true},
+  'setSetting': {}
 
 });
 

src/js/app.js

@@ -6,6 +6,7 @@ var Navigation = require('./components/navigation');
 var Footer = require('./components/footer');
 var LoginPage = require('./components/login');
 var NotificationsPage = require('./components/notifications');
+var SettingsPage = require('./components/settings');
 
 var Route = Router.Route;
 var NotFoundRoute = Router.NotFoundRoute;
@@ -42,8 +43,9 @@ var NotFound = React.createClass({
 var routes = (
   <Route handler={App} path="/">
     <DefaultRoute handler={NotificationsPage} />
-    <Route name="notifications" handler={NotificationsPage}/>
     <Route name="login" handler={LoginPage}/>
+    <Route name="notifications" handler={NotificationsPage}/>
+    <Route name="settings" handler={SettingsPage}/>
     <NotFoundRoute handler={NotFound}/>
   </Route>
 );

src/js/components/navigation.js

@@ -1,12 +1,15 @@
 var React = require('react');
 var Reflux = require('reflux');
+var Router = require('react-router');
+
 var ipc = window.require('ipc');
 
 var Actions = require('../actions/actions');
 var AuthStore = require('../stores/auth');
 
 var Navigation = React.createClass({
   mixins: [
+    Router.State,
     Reflux.connect(AuthStore, 'authStatus'),
     Reflux.listenTo(Actions.getNotifications.completed, 'refreshDone'),
     Reflux.listenTo(Actions.getNotifications.failed, 'refreshDone')
@@ -42,18 +45,26 @@ var Navigation = React.createClass({
     this.setState( {loading: false } );
   },
 
+  goToSettings: function () {
+    this.context.router.transitionTo('settings');
+  },
+
   logOut: function () {
     Actions.logout();
     this.context.router.transitionTo('login');
     ipc.sendChannel('update-icon', 'IconPlain');
   },
 
+  goBack: function () {
+    this.context.router.transitionTo('notifications');
+  },
+
   appQuit: function () {
     ipc.sendChannel('app-quit');
   },
 
   render: function () {
-    var refreshIcon, logoutIcon;
+    var refreshIcon, logoutIcon, backIcon, settingsIcon, quitIcon;
     var loadingClass = this.state.loading ? 'fa fa-refresh fa-spin' : 'fa fa-refresh';
 
     if (this.state.authStatus) {
@@ -63,18 +74,34 @@ var Navigation = React.createClass({
       logoutIcon = (
         <i className='fa fa-sign-out' onClick={this.logOut} />
       );
+      settingsIcon = (
+        <i className='fa fa-cog' onClick={this.goToSettings} />
+      );
+    } else {
+      quitIcon = (
+        <i className='fa fa-power-off' onClick={this.appQuit} />
+      );
+    }
+    if (this.getPath() === '/settings') {
+      backIcon = (
+        <i onClick={this.goBack} className='fa fa-chevron-left' />
+      );
     }
 
     return (
       <div className='container-fluid'>
         <div className='row navigation'>
-          <div className='col-xs-4 left'>{refreshIcon}</div>
+          <div className='col-xs-4 left'>
+            {backIcon}
+            {refreshIcon}
+          </div>
           <div className='col-xs-4 logo'>
             <img className='img-responsive' src='images/logo-hor-white.png' />
           </div>
           <div className='col-xs-4 right'>
+            {settingsIcon}
             {logoutIcon}
-            <i className="fa fa-power-off" onClick={this.appQuit} />
+            {quitIcon}
           </div>
         </div>
       </div>

src/js/components/settings.js

@@ -0,0 +1,48 @@
+var React = require('react');
+var Toggle = require('react-toggle');
+
+var ipc = window.require('ipc');
+
+var Actions = require('../actions/actions');
+var SettingsStore = require('../stores/settings');
+
+var SettingsPage = React.createClass({
+  getInitialState: function () {
+    return {
+      participating: SettingsStore.getSettings().participating
+    };
+  },
+
+  toggleParticipating: function (event) {
+    Actions.setSetting('participating', event.target.checked);
+  },
+
+  appQuit: function () {
+    ipc.sendChannel('app-quit');
+  },
+
+  render: function () {
+    return (
+      <div className="container-fluid main-container settings">
+        <div className='row'>
+          <div className='col-xs-8'>Show only participating</div>
+          <div className='col-xs-4'>
+            <Toggle
+              defaultChecked={this.state.participating}
+              onChange={this.toggleParticipating} />
+          </div>
+        </div>
+        <div className='row'>
+          <button
+            className='btn btn-block btn-danger btn-close'
+            onClick={this.appQuit}>
+            <i className="fa fa-power-off" />
+            Quit Gitify
+          </button>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = SettingsPage;

src/js/stores/notifications.js

@@ -4,6 +4,7 @@ var _ = require('underscore');
 var Reflux = require('reflux');
 var Actions = require('../actions/actions');
 var apiRequests = require('../utils/api-requests');
+var SettingsStore = require('../stores/settings');
 
 var NotificationsStore = Reflux.createStore({
   listenables: Actions,
@@ -22,9 +23,11 @@ var NotificationsStore = Reflux.createStore({
 
   onGetNotifications: function () {
     var self = this;
+    var participating = SettingsStore.getSettings().participating;
 
     apiRequests
-      .getAuth('https://api.github.com/notifications')
+      .getAuth('https://api.github.com/notifications?participating=' +
+        (participating ? 'true' : 'false'))
       .end(function (err, response) {
         if (response && response.ok) {
           // Success - Do Something.

src/js/stores/settings.js

@@ -0,0 +1,35 @@
+var Reflux = require('reflux');
+var Actions = require('../actions/actions');
+
+var SettingsStore = Reflux.createStore({
+  listenables: Actions,
+
+  init: function () {
+    var settings = window.localStorage.getItem('settings');
+
+    if (!settings) {
+      settings = {
+        'participating': false
+      };
+    }
+
+    if (settings[0] === '{') {
+      settings = JSON.parse(settings);
+    }
+
+    this._settings = settings;
+  },
+
+  getSettings: function () {
+    return this._settings;
+  },
+
+  onSetSetting: function (setting, value) {
+    this._settings[setting] = value;
+    window.localStorage.setItem('settings', JSON.stringify(this._settings));
+    this.trigger(this._settings);
+  }
+
+});
+
+module.exports = SettingsStore;