Merge pull request #78 from ekonstantinidis/animated-hide

Animation for marking notification as read

Author: ekonstantinidis

README.md

@@ -26,7 +26,6 @@ You can download Gitify from the [releases](https://github.com/ekonstantinidis/g
 
 
 ### Installation
-If you encounter any issues with `npm install`, then run `ulimit -n 512`.
 
     npm install
 

package.json

@@ -5,7 +5,7 @@
   "main": "main.js",
   "scripts": {
     "build-js": "mkdir -p build/js && browserify -t reactify src/js/app.js -o build/js/app.js",
-    "build": "ulimit -n 512 && npm install && ulimit -n 512 && grunt build && npm run build-js",
+    "build": "ulimit -n 512 && npm install && grunt build && npm run build-js",
     "watch-js": "watchify -t reactify src/js/app.js -o build/js/app.js -v",
     "watch": "grunt build && npm build && npm run watch-js | grunt watch",
     "start": "electron .",

src/js/__tests__/components/notification.js

@@ -157,6 +157,8 @@ describe('Test for Notification Component', function () {
 
     instance.markAsRead();
 
+    jest.runAllTimers();
+
   });
 
   it('Should fail to mark a notification as read succesfully', function () {
@@ -181,9 +183,10 @@ describe('Test for Notification Component', function () {
         key={notification.id} />);
 
     var superagent = require('superagent');
-    superagent.__setResponse(400, 'notOk', {}, false);
+    superagent.__setResponse(400, false, {}, false);
 
     instance.markAsRead();
+    expect(instance.isRead).toBeFalsy();
 
   });
 

src/js/__tests__/components/notifications.js

@@ -55,7 +55,7 @@ describe('Test for Notifications Component', function () {
     var instance = TestUtils.renderIntoDocument(<Notifications />);
     expect(instance.state.loading).toBeTruthy();
 
-    var response = [[{
+    var response = [{
       'repository': {
         'full_name': 'ekonstantinidis/gitify',
         'owner': {
@@ -65,7 +65,7 @@ describe('Test for Notifications Component', function () {
       'subject': {
         'type': 'Issue'
       }
-    }]];
+    }];
 
     NotificationsStore.trigger(response);
     expect(instance.state.notifications.length).toBe(1);
@@ -104,7 +104,7 @@ describe('Test for Notifications Component', function () {
 
     var instance = TestUtils.renderIntoDocument(<Notifications />);
 
-    var response = [[{
+    var response = [{
       'repository': {
         'full_name': 'ekonstantinidis/gitify',
         'owner': {
@@ -114,7 +114,7 @@ describe('Test for Notifications Component', function () {
       'subject': {
         'type': 'Issue'
       }
-    }]];
+    }];
 
     NotificationsStore.trigger(response);
 

src/js/__tests__/components/repository.js

@@ -45,6 +45,7 @@ describe('Test for Repository Component', function () {
   it('Should render the Repository component', function () {
 
     var repoDetails = [{
+      'id': '123',
       'repository': {
         'full_name': 'ekonstantinidis/gitify',
         'owner': {
@@ -81,6 +82,7 @@ describe('Test for Repository Component', function () {
   it('Should mark a repo as read - successfully', function () {
 
     var repoDetails = [{
+      'id': '123',
       'repository': {
         'name': 'gitify',
         'full_name': 'ekonstantinidis/gitify',
@@ -118,6 +120,7 @@ describe('Test for Repository Component', function () {
   it('Should mark a repo as read - fail', function () {
 
     var repoDetails = [{
+      'id': '123',
       'repository': {
         'name': 'gitify',
         'full_name': 'ekonstantinidis/gitify',

src/js/__tests__/stores/notifications.js

@@ -107,10 +107,10 @@ describe('Tests for NotificationsStore', function () {
 
     jest.runAllTimers();
 
-    var repository = NotificationsStore._notifications[0][0].repository;
-    var subject = NotificationsStore._notifications[0][0].subject;
+    var repository = NotificationsStore._notifications[0].repository;
+    var subjectTitle = NotificationsStore._notifications[0].subject.title;
     expect(repository.full_name).toBe('octocat/Hello-World');
-    expect(subject.title).toBe('Greetings');
+    expect(subjectTitle).toBe('Greetings');
     expect(NotificationsStore.trigger).toHaveBeenCalled();
 
   });
@@ -133,7 +133,7 @@ describe('Tests for NotificationsStore', function () {
 
   });
 
-  it('should FAIL to create a booking via the API', function () {
+  it('should FAIL to get the notifications from the GitHub API', function () {
 
     spyOn(NotificationsStore, 'trigger');
     spyOn(NotificationsStore, 'onGetNotificationsFailed');
@@ -149,4 +149,53 @@ describe('Tests for NotificationsStore', function () {
 
   });
 
+  it('should mark a notification as read - remove single notification from store', function () {
+
+    spyOn(NotificationsStore, 'trigger');
+
+    NotificationsStore._notifications = ['abc', 'def'];
+
+    expect(NotificationsStore._notifications.length).toBe(2);
+
+    Actions.removeNotification('abc');
+
+    jest.runAllTimers();
+
+    expect(NotificationsStore._notifications.length).toBe(1);
+    expect(NotificationsStore.trigger).toHaveBeenCalled();
+
+  });
+
+  it('should mark a repo as read - remove notifications from store', function () {
+
+    spyOn(NotificationsStore, 'trigger');
+
+    NotificationsStore._notifications = [
+      {
+        'id': '1',
+        'repository': {
+          'full_name': 'ekonstantinidis/gitify'
+        },
+        'unread': true
+      },
+      {
+        'id': '2',
+        'repository': {
+          'full_name': 'ekonstantinidis/gitify'
+        },
+        'reason': 'subscribed'
+      }
+    ];
+
+    expect(NotificationsStore._notifications.length).toBe(2);
+
+    Actions.removeRepoNotifications('ekonstantinidis/gitify');
+
+    jest.runAllTimers();
+
+    expect(NotificationsStore._notifications.length).toBe(0);
+    expect(NotificationsStore.trigger).toHaveBeenCalled();
+
+  });
+
 });

src/js/actions/actions.js

@@ -5,6 +5,8 @@ var Actions = Reflux.createActions({
   'login': {},
   'logout': {},
   'getNotifications': {asyncResult: true},
+  'removeNotification': {},
+  'removeRepoNotifications': {},
   'isNewNotification': {},
   'updateSearchTerm': {},
   'clearSearchTerm': {},

src/js/components/notification.js

@@ -2,6 +2,7 @@ var React = require('react');
 var remote = window.require('remote');
 var shell = remote.require('shell');
 
+var Actions = require('../actions/actions');
 var apiRequests = require('../utils/api-requests');
 
 var NotificationItem = React.createClass({
@@ -28,7 +29,9 @@ var NotificationItem = React.createClass({
 
   markAsRead: function () {
     var self = this;
+
     if (this.state.read) { return; }
+
     apiRequests
       .patchAuth('https://api.github.com/notifications/threads/' + this.props.notification.id)
       .end(function (err, response) {
@@ -37,9 +40,13 @@ var NotificationItem = React.createClass({
           self.setState({
             isRead: true
           });
+          Actions.removeNotification(self.props.notification);
         } else {
           // Error - Show messages.
           // Show appropriate message
+          self.setState({
+            isRead: false
+          });
         }
       });
   },

src/js/components/notifications.js

@@ -14,11 +14,9 @@ var Notifications = React.createClass({
   },
 
   matchesSearchTerm: function (obj) {
-    var repoFullName = obj[0].repository.full_name;
     var searchTerm = this.state.searchTerm.replace(/^\s+/, '').replace(/\s+$/, '');
     var searchTerms = searchTerm.split(/\s+/);
-
-    return _.all(searchTerms, this.areIn.bind(null, repoFullName));
+    return _.all(searchTerms, this.areIn.bind(null, obj.repository.full_name));
   },
 
   mixins: [
@@ -84,8 +82,13 @@ var Notifications = React.createClass({
         }
 
         if (notifications.length) {
+
+          var groupedNotifications = _.groupBy(notifications, function (object) {
+            return object.repository.full_name;
+          });
+
           notifications = (
-            notifications.map(function (obj) {
+            _.map(groupedNotifications, function (obj) {
               var repoFullName = obj[0].repository.full_name;
               return <Repository repo={obj} repoName={repoFullName} key={repoFullName} />;
             })

src/js/components/repository.js

@@ -3,6 +3,7 @@ var remote = window.require('remote');
 var shell = remote.require('shell');
 
 var SingleNotification = require('../components/notification');
+var Actions = require('../actions/actions');
 var apiRequests = require('../utils/api-requests');
 
 var Repository = React.createClass({
@@ -27,6 +28,7 @@ var Repository = React.createClass({
     var self = this;
     var loginId = this.props.repo[0].repository.owner.login;
     var repoId = this.props.repo[0].repository.name;
+    var fullName = this.props.repo[0].repository.full_name;
 
     apiRequests
       .putAuth('https://api.github.com/repos/' + loginId + '/' + repoId + '/notifications', {})
@@ -37,6 +39,8 @@ var Repository = React.createClass({
             isRead: true,
             errors: false
           });
+
+          Actions.removeRepoNotifications(fullName);
         } else {
           self.setState({
             isRead: false,

src/js/stores/notifications.js

@@ -44,22 +44,35 @@ var NotificationsStore = Reflux.createStore({
   },
 
   onGetNotificationsCompleted: function (notifications) {
-    var groupedNotifications = _.groupBy(notifications, function (object) {
-      return object.repository.full_name;
-    });
-
-    var array = [];
-    _.map(groupedNotifications, function (obj) {
-      array.push(obj);
-    });
-
-    this._notifications = array;
+    this._notifications = notifications;
     this.trigger(this._notifications);
   },
 
   onGetNotificationsFailed: function () {
     this._notifications = [];
     this.trigger(this._notifications);
+  },
+
+  onRemoveNotification: function (notification) {
+    var self = this;
+
+    this._notifications = _.without(this._notifications, notification);
+
+    setTimeout(function () {
+      self.trigger(self._notifications);
+    }, 800);
+  },
+
+  onRemoveRepoNotifications: function (repoFullName) {
+    var self = this;
+
+    this._notifications = _.reject(this._notifications, function (obj) {
+      return obj.repository.full_name == repoFullName;
+    });
+
+    setTimeout(function () {
+      self.trigger(self._notifications);
+    }, 800);
   }
 
 });

src/less/style.less

@@ -114,6 +114,36 @@
   }
 }
 
+.ReadMixin() {
+  &.read {
+    // Amazing CSS3 tutorial by Sara Soueidan
+    // http://sarasoueidan.com/blog/creative-list-effects/
+    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
+  }
+
+  @keyframes removed-item-animation {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    30% {
+      opacity: 1;
+      transform: translateX(50px);
+    }
+   
+    80% {
+      opacity: 1;
+      transform: translateX(-800px);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateX(-800px);
+    }
+  }
+}
+
 /* @end Mixins */
 
 
@@ -314,10 +344,7 @@ input {
   padding: 10px 20px;
   margin: 0;
   background-color: @LightGray;
-
-  &.read {
-    .Opacity(0.4);
-  }
+  .ReadMixin();
 
   .col-xs-2,
   .col-xs-10 {
@@ -391,10 +418,7 @@ input {
   margin: 0;
   padding: 3px 20px;
   border-bottom: 1px solid darken(@LightGray, 10%);
-
-  transition: opacity .25s ease-in-out;
-  -moz-transition: opacity .25s ease-in-out;
-  -webkit-transition: opacity .25s ease-in-out;
+  .ReadMixin();
 
   .col-xs-1,
   .col-xs-10 {
@@ -421,10 +445,6 @@ input {
     .CheckOcticon();
   }
 
-  &.read {
-    .Opacity(0.4);
-  }
-
   &:hover {
     background-color: @LightGray;
   }