Merge pull request #9 from ekonstantinidis/notification-read

Read Notifications

Author: ekonstantinidis

images/github-logo.png

@@ -83,7 +83,8 @@ var Login = React.createClass({
       <div className="container-fluid main-container login">
         <div className='row'>
           <div className='col-xs-offset-2 col-xs-8'>
-            <h1>Login</h1>
+            <img className='img-responsive logo' src='images/github-logo.png' />
+            <div className='desc'>GitHub notifications in your menu bar.</div>
             <button className='btn btn-default btn-lg btn-block' onClick={this.authGithub}>
               <i className="fa fa-github" />Login to Gihub
             </button>

images/rocket.png

@@ -8,18 +8,30 @@ var apiRequests = require('../utils/api-requests');
 
 var Notification = React.createClass({
 
+  getInitialState: function() {
+    return {
+      readClass: 'row notification',
+      read: false
+    };
+  },
+
   openBrowser: function () {
     var url = this.props.notification.subject.url.replace('api.github.com/repos', 'www.github.com');
     shell.openExternal(url);
   },
 
   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) {
         if (response && response.ok) {
           // Notification Read
-          // Remove from list?
+          self.setState({
+            readClass: self.state.readClass + ' read',
+            read: true
+          });
         } else {
           // Error - Show messages.
           console.log(err);
@@ -39,12 +51,12 @@ var Notification = React.createClass({
     }
 
     return (
-      <div className='row notification'>
+      <div className={this.state.readClass}>
         <div className='col-xs-1'><span className={typeIconClass} /></div>
         <div className='col-xs-10 subject' onClick={this.openBrowser}>
           {this.props.notification.subject.title}
         </div>
-        <div className='col-xs-1 check-wrapper'><span className="octicon octicon-check" onClick={this.markAsRead} /></div>
+        <div className='col-xs-1 check-wrapper'><span className='octicon octicon-check' onClick={this.markAsRead} /></div>
       </div>
     );
   }

src/js/components/login.js

@@ -31,13 +31,9 @@ var Notifications = React.createClass({
     this.setState( {loading: false } );
   },
 
-  openRepoBrowser: function (e) {
-    var url = this.state.notifications[e][0].repository.html_url;
-    shell.openExternal(url);
-  },
-
   render: function () {
     var notifications;
+    var wrapperClass = 'container-fluid main-container notifications';
     var self = this;
 
     if (!_.isEmpty(this.state.notifications)) {
@@ -48,16 +44,18 @@ var Notifications = React.createClass({
         })
       );
     } else {
+      wrapperClass += ' all-read';
       notifications = (
-        <div className="all-read">
+        <div>
           <h2>There are no notifications for you.</h2>
           <h3>All clean!</h3>
+          <img className='img-responsive emoji' src='images/rocket.png' />
         </div>
       );
     }
 
     return (
-      <div className="container-fluid main-container notifications">
+      <div className={wrapperClass}>
         <Loading className='loading-container' shouldShow={this.state.loading}>
           <div className='loading-text'>working on it</div>
         </Loading>

src/js/components/notification.js

@@ -1,13 +1,21 @@
 var React = require('react');
-var SingleNotification = require('../components/notification');
 var _ = require('underscore');
+var remote = window.require('remote');
+var shell = remote.require('shell');
+
+var SingleNotification = require('../components/notification');
 
 var Repository = React.createClass({
 
   getAvatar: function () {
     return this.props.repo[0].repository.owner.avatar_url;
   },
 
+  openBrowser: function () {
+    var url = this.props.repo[0].repository.html_url;
+    shell.openExternal(url);
+  },
+
   render: function () {
     var notifications = (
       _.map(this.props.repo, function(notification, i) {
@@ -21,7 +29,7 @@ var Repository = React.createClass({
       <div>
         <div className='row repository'>
           <div className='col-xs-2'><img className='avatar' src={this.getAvatar()} /></div>
-          <div className='col-xs-10 name'>{this.props.repoName}</div>
+          <div className='col-xs-10 name' onClick={this.openBrowser}>{this.props.repoName}</div>
         </div>
         {notifications}
       </div>

src/js/components/notifications.js

@@ -8,33 +8,29 @@ var apiRequests = {
       .set('Accept', 'application/json');
   },
 
-  getAuth: function (url) {
-    return request
-      .get(url)
-      .set('Accept', 'application/json')
-      .set('Authorization', 'token ' + AuthStore.authStatus());
-  },
-
   post: function (url, params) {
     return request
       .post(url)
       .send(params)
-      .set('Accept', 'application/json');
+      .set('Accept', 'application/json')
+      .set('User-Agent', 'Gitify');
   },
 
-  putAuth: function (url, params) {
+  getAuth: function (url) {
     return request
-      .put(url)
-      .send(params)
-      .set('Accept', 'application/json')
-      .set('Authorization', 'token ' + AuthStore.authStatus());
+      .get(url)
+      .set('Accept', 'application/vnd.github.v3+json')
+      .set('Authorization', 'token ' + AuthStore.authStatus())
+      .set('User-Agent', 'Gitify');
   },
 
   patchAuth: function (url, params) {
     return request
       .patch(url)
       .send(params)
-      .set('Authorization', 'token ' + AuthStore.authStatus());
+      .set('Accept', 'application/vnd.github.v3+json')
+      .set('Authorization', 'token ' + AuthStore.authStatus())
+      .set('User-Agent', 'Gitify');
   }
 };
 

src/js/components/repository.js

@@ -13,6 +13,8 @@
 @ThemeBlack: #262626;
 @ThemeGreen: #6cc644;
 
+@ThemeBlue: #4183c4;
+
 @White: #ffffff;
 
 /* @end Colors */
@@ -89,6 +91,13 @@
     text-overflow: ellipsis;
 }
 
+// Opacity
+.Opacity(@opacity: 0.5) {
+    -webkit-opacity:    @opacity;
+    -moz-opacity:       @opacity;
+    opacity:        @opacity;
+}
+
 /* @end Mixins */
 
 
@@ -219,7 +228,7 @@ html, body {
 /* @group Component / Login  */
 
 .login {
-    background-color: @ThemeGreen;
+    background-color: @ThemeBlack;
     color: @White;
     position: absolute;
     top: @navbar-height;
@@ -232,6 +241,12 @@ html, body {
         max-width: 150px;
         margin: 10px auto 20px;
     }
+
+    .desc {
+      font-size: 20px;
+      text-align: center;
+      margin-bottom: 20px;
+    }
 }
 
 /* @end Component / Login  */
@@ -266,10 +281,19 @@ html, body {
   margin: 0;
   padding: 0;
 
-  .all-read {
+  &.all-read {
+    background-color: @ThemeBlack;
+    color: @White;
+    padding: 30px 20px;
+
     h2, h3 {
       text-align: center;
     }
+
+    .emoji {
+      margin: 15px auto;
+
+    }
   }
 }
 
@@ -283,6 +307,10 @@ html, body {
   padding: 3px 20px;
   border-bottom: 1px solid darken(#f5f5f5, 10%);
 
+  transition: opacity .25s ease-in-out;
+  -moz-transition: opacity .25s ease-in-out;
+  -webkit-transition: opacity .25s ease-in-out;
+
   .col-xs-1,
   .col-xs-10 {
     padding: 5px 0;
@@ -301,6 +329,20 @@ html, body {
   .octicon {
     margin-right: 10px;
     font-size: 20px;
+
+    &.octicon-check {
+      -webkit-transition: all .8s;
+      -moz-transition: all .8s;
+      transition: all .8s;
+
+      &:hover {
+        color: @ThemeBlue;
+      }
+    }
+  }
+
+  &.read {
+    .Opacity(0.4);
   }
 }