From c69c86ff47802471b66f4653d1934cac0210037a Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Fri, 19 Jun 2015 20:08:30 +0100 Subject: [PATCH 01/10] Mark repo as read --- src/js/components/repository.js | 27 ++++++++++++++++++++++++++- src/js/utils/api-requests.js | 10 ++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/src/js/components/repository.js b/src/js/components/repository.js index 0b9ee1856..c5d0fda6b 100644 --- a/src/js/components/repository.js +++ b/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 apiRequests = require('../utils/api-requests'); var Repository = React.createClass({ @@ -15,6 +16,27 @@ var Repository = React.createClass({ shell.openExternal(url); }, + markRepoAsRead: function () { + // var self = this; + var loginId = this.props.repo[0].repository.owner.login; + var repoId = this.props.repo[0].repository.name; + + // /repos/:owner/:repo/notifications + console.log('https://api.github.com/repos/' + loginId + '/' + repoId + '/notifications'); + apiRequests + .putAuth('https://api.github.com/repos/' + loginId + '/' + repoId + '/notifications', {}) + .end(function (err, response) { + if (response && response.ok) { + // Notification Read + console.log("SUCCESS!"); + } else { + // Error - Show messages. + // Show appropriate message + } + }); + + }, + render: function () { var organisationName, repositoryName; @@ -28,10 +50,13 @@ var Repository = React.createClass({
-
+
{'/' + repositoryName} {organisationName}
+
+ +
{this.props.repo.map(function (obj) { diff --git a/src/js/utils/api-requests.js b/src/js/utils/api-requests.js index ee3294ca2..de302c5db 100644 --- a/src/js/utils/api-requests.js +++ b/src/js/utils/api-requests.js @@ -25,6 +25,16 @@ var apiRequests = { .set('User-Agent', 'Gitify'); }, + putAuth: function (url, params) { + return request + .put(url) + .send(params) + .set('Accept', 'application/vnd.github.v3+json') + .set('Authorization', 'token ' + AuthStore.authStatus()) + .set('Cache-Control', 'no-cache') + .set('User-Agent', 'Gitify'); + }, + patchAuth: function (url, params) { return request .patch(url) From e6bc99ae27b73973ffbab1c827e50e5413ce6bb9 Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Fri, 19 Jun 2015 20:26:43 +0100 Subject: [PATCH 02/10] Opacity of repositories' notifications --- src/js/components/notification.js | 14 +++++++++----- src/js/components/repository.js | 18 +++++++++++++----- src/less/style.less | 4 ++++ 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/js/components/notification.js b/src/js/components/notification.js index 7436d6b97..d2e380b8c 100644 --- a/src/js/components/notification.js +++ b/src/js/components/notification.js @@ -8,11 +8,16 @@ var NotificationItem = React.createClass({ getInitialState: function () { return { - readClass: 'row notification', - read: false + isRead: this.props.isRead }; }, + componentWillReceiveProps: function(nextProps) { + this.setState({ + isRead: nextProps.isRead + }); + }, + openBrowser: function () { var url = this.props.notification.subject.url.replace('api.github.com/repos', 'www.github.com'); if (url.indexOf('/pulls/') != -1) { @@ -30,8 +35,7 @@ var NotificationItem = React.createClass({ if (response && response.ok) { // Notification Read self.setState({ - readClass: self.state.readClass + ' read', - read: true + isRead: true }); } else { // Error - Show messages. @@ -54,7 +58,7 @@ var NotificationItem = React.createClass({ } return ( -
+
{this.props.notification.subject.title} diff --git a/src/js/components/repository.js b/src/js/components/repository.js index c5d0fda6b..121597908 100644 --- a/src/js/components/repository.js +++ b/src/js/components/repository.js @@ -7,6 +7,12 @@ var apiRequests = require('../utils/api-requests'); var Repository = React.createClass({ + getInitialState: function() { + return { + isRead: false + }; + }, + getAvatar: function () { return this.props.repo[0].repository.owner.avatar_url; }, @@ -17,18 +23,19 @@ var Repository = React.createClass({ }, markRepoAsRead: function () { - // var self = this; + var self = this; var loginId = this.props.repo[0].repository.owner.login; var repoId = this.props.repo[0].repository.name; - // /repos/:owner/:repo/notifications - console.log('https://api.github.com/repos/' + loginId + '/' + repoId + '/notifications'); apiRequests .putAuth('https://api.github.com/repos/' + loginId + '/' + repoId + '/notifications', {}) .end(function (err, response) { if (response && response.ok) { // Notification Read console.log("SUCCESS!"); + self.setState({ + isRead: true + }); } else { // Error - Show messages. // Show appropriate message @@ -38,6 +45,7 @@ var Repository = React.createClass({ }, render: function () { + var self = this; var organisationName, repositoryName; if (typeof this.props.repoName === 'string') { @@ -48,7 +56,7 @@ var Repository = React.createClass({ return (
-
+
{'/' + repositoryName} @@ -60,7 +68,7 @@ var Repository = React.createClass({
{this.props.repo.map(function (obj) { - return ; + return ; })}
diff --git a/src/less/style.less b/src/less/style.less index e6b9c1c20..fcbd8f777 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -287,6 +287,10 @@ input { margin: 0; background-color: @LightGray; + &.read { + .Opacity(0.4); + } + .col-xs-2, .col-xs-10 { padding: 0; From c55339193cc24327ebd4212262ae6e3dc82384ba Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Fri, 19 Jun 2015 20:31:39 +0100 Subject: [PATCH 03/10] Fix tests --- src/js/__tests__/components/notification.js | 9 +++------ src/js/components/notification.js | 2 +- src/js/components/repository.js | 3 +-- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/js/__tests__/components/notification.js b/src/js/__tests__/components/notification.js index 8d6ae2b32..7030bf63d 100644 --- a/src/js/__tests__/components/notification.js +++ b/src/js/__tests__/components/notification.js @@ -68,8 +68,7 @@ describe('Test for Notification Component', function () { notification={notification} key={notification.id} />); - expect(instance.state.readClass).toBe('row notification'); - expect(instance.state.read).toBeFalsy(); + expect(instance.state.isRead).toBeFalsy(); expect(instance.openBrowser).toBeDefined(); expect(instance.markAsRead).toBeDefined(); @@ -99,8 +98,7 @@ describe('Test for Notification Component', function () { notification={notification} key={notification.id} />); - expect(instance.state.readClass).toBe('row notification'); - expect(instance.state.read).toBeFalsy(); + expect(instance.state.isRead).toBeFalsy(); expect(instance.openBrowser).toBeDefined(); expect(instance.markAsRead).toBeDefined(); @@ -127,8 +125,7 @@ describe('Test for Notification Component', function () { notification={notification} key={notification.id} />); - expect(instance.state.readClass).toBe('row notification'); - expect(instance.state.read).toBeFalsy(); + expect(instance.state.isRead).toBeFalsy(); expect(instance.openBrowser).toBeDefined(); expect(instance.markAsRead).toBeDefined(); diff --git a/src/js/components/notification.js b/src/js/components/notification.js index d2e380b8c..49af4da8d 100644 --- a/src/js/components/notification.js +++ b/src/js/components/notification.js @@ -12,7 +12,7 @@ var NotificationItem = React.createClass({ }; }, - componentWillReceiveProps: function(nextProps) { + componentWillReceiveProps: function (nextProps) { this.setState({ isRead: nextProps.isRead }); diff --git a/src/js/components/repository.js b/src/js/components/repository.js index 121597908..f5ca313f9 100644 --- a/src/js/components/repository.js +++ b/src/js/components/repository.js @@ -7,7 +7,7 @@ var apiRequests = require('../utils/api-requests'); var Repository = React.createClass({ - getInitialState: function() { + getInitialState: function () { return { isRead: false }; @@ -32,7 +32,6 @@ var Repository = React.createClass({ .end(function (err, response) { if (response && response.ok) { // Notification Read - console.log("SUCCESS!"); self.setState({ isRead: true }); From fd20d93546711b18378a96b11853d1427e7e7192 Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Fri, 19 Jun 2015 20:56:51 +0100 Subject: [PATCH 04/10] Style Check Octicons --- src/less/style.less | 40 +++++++++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/src/less/style.less b/src/less/style.less index fcbd8f777..bc8f6397e 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -98,6 +98,20 @@ opacity: @opacity; } +.CheckOcticon() { + &.octicon-check { + -webkit-transition: all .4s; + -moz-transition: all .4s; + transition: all .4s; + color: darken(@LightGray, 20%); + + &:hover { + color: @ThemeGreen; + cursor: pointer; + } + } +} + /* @end Mixins */ @@ -290,7 +304,7 @@ input { &.read { .Opacity(0.4); } - + .col-xs-2, .col-xs-10 { padding: 0; @@ -303,9 +317,10 @@ input { } .name { - font-size: 18px; .FontOpenSansSemibold(); + font-size: 18px; text-align: right; + padding: 0 5px; span { display: inline-block; @@ -316,6 +331,15 @@ input { overflow: hidden; } } + + .check-wrapper { + padding: 0 5px; + + .octicon { + font-size: 22px; + .CheckOcticon(); + } + } } /* @end Component / Repository */ @@ -380,17 +404,7 @@ input { .octicon { margin-right: 10px; font-size: 20px; - - &.octicon-check { - -webkit-transition: all .4s; - -moz-transition: all .4s; - transition: all .4s; - - &:hover { - color: @ThemeGreen; - cursor: pointer; - } - } + .CheckOcticon(); } &.read { From 9460afd8a2668ce971cc22f928a43989b911329d Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Fri, 19 Jun 2015 21:07:38 +0100 Subject: [PATCH 05/10] Test & Coverage 100% --- src/js/__tests__/components/repository.js | 42 ++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/src/js/__tests__/components/repository.js b/src/js/__tests__/components/repository.js index 8e95a0e74..de8c50591 100644 --- a/src/js/__tests__/components/repository.js +++ b/src/js/__tests__/components/repository.js @@ -12,7 +12,7 @@ var TestUtils = React.addons.TestUtils; describe('Test for Repository Component', function () { - var Actions, Repository; + var apiRequests, Actions, Repository; beforeEach(function () { // Mock Electron's window.require @@ -37,6 +37,7 @@ describe('Test for Repository Component', function () { } }; + apiRequests = require('../../utils/api-requests.js'); Actions = require('../../actions/actions.js'); Repository = require('../../components/repository.js'); }); @@ -63,8 +64,10 @@ describe('Test for Repository Component', function () { ); expect(instance.props.repo[0].repository.full_name).toBe('ekonstantinidis/gitify'); + expect(instance.isRead).toBeFalsy(); expect(instance.getAvatar).toBeDefined(); expect(instance.openBrowser).toBeDefined(); + expect(instance.markRepoAsRead).toBeDefined(); // Get Avatar var avatar = instance.getAvatar(); @@ -75,4 +78,41 @@ describe('Test for Repository Component', function () { }); + it('Should mark a repo as read - succsfully', function () { + + var repoDetails = [{ + 'repository': { + 'name': 'gitify', + 'full_name': 'ekonstantinidis/gitify', + 'owner': { + 'login': 'ekonstantinidis', + 'avatar_url': 'http://avatar.url' + } + }, + 'subject': { + 'type': 'Issue' + } + }]; + + var instance = TestUtils.renderIntoDocument( + + ); + + expect(instance.state.isRead).toBeFalsy(); + expect(instance.markRepoAsRead).toBeDefined(); + + var superagent = require('superagent'); + superagent.__setResponse(200, 'ok', {}, false); + + // Mark Repo as Read + instance.markRepoAsRead(); + jest.runAllTimers(); + + expect(instance.state.isRead).toBeTruthy(); + + }); + }); From c44ced2a40746068d57a22244b24813a7631ba1b Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Sat, 20 Jun 2015 20:38:15 +0300 Subject: [PATCH 06/10] Show a nice error message on fail --- src/js/components/repository.js | 20 +++++++++++++++----- src/less/style.less | 14 ++++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/js/components/repository.js b/src/js/components/repository.js index f5ca313f9..fdcefbf87 100644 --- a/src/js/components/repository.js +++ b/src/js/components/repository.js @@ -9,7 +9,8 @@ var Repository = React.createClass({ getInitialState: function () { return { - isRead: false + isRead: false, + errors: false }; }, @@ -28,16 +29,19 @@ var Repository = React.createClass({ var repoId = this.props.repo[0].repository.name; apiRequests - .putAuth('https://api.github.com/repos/' + loginId + '/' + repoId + '/notifications', {}) + .putAuth('https://api.github.com/repos22/' + loginId + '/' + repoId + '/notifications', {}) .end(function (err, response) { if (response && response.ok) { // Notification Read self.setState({ - isRead: true + isRead: true, + erros: false }); } else { - // Error - Show messages. - // Show appropriate message + self.setState({ + isRead: false, + errors: true + }); } }); @@ -66,6 +70,12 @@ var Repository = React.createClass({
+ {this.state.errors ? +
+ Oops! We couldn't mark this repo +
: null + } + {this.props.repo.map(function (obj) { return ; })} diff --git a/src/less/style.less b/src/less/style.less index bc8f6397e..b79a9127d 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -17,6 +17,8 @@ @White: #ffffff; @LightGray: #f5f5f5; +@ErrorColor: #DB423C; + /* @end Colors */ /* @group Typography */ @@ -118,6 +120,12 @@ /* @group Bootstrap Overrides */ @navbar-height: 35px; + +@alert-padding: 8px; +@alert-border-radius: 0; +@alert-danger-bg: @ErrorColor; +@alert-danger-text: @White; + @octicons-font-path: "../../build/fonts"; /* @end Bootstrap Overrides */ @@ -169,6 +177,12 @@ input { outline: none; } +.alert { + border: 0; + text-align: center; + margin-bottom: 0; +} + /* @end Misc */ From ec78b080888af35e4230def357b74d1a2428e08e Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Sat, 20 Jun 2015 20:39:02 +0300 Subject: [PATCH 07/10] Change the error message --- src/js/components/repository.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/components/repository.js b/src/js/components/repository.js index fdcefbf87..1a0fd46f1 100644 --- a/src/js/components/repository.js +++ b/src/js/components/repository.js @@ -72,7 +72,7 @@ var Repository = React.createClass({ {this.state.errors ?
- Oops! We couldn't mark this repo + Oops! We couldn't mark this repo as read.
: null } From 4190d34d640ac8643b93c7942831543362e0bae8 Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Sat, 20 Jun 2015 20:43:39 +0300 Subject: [PATCH 08/10] Remove url causing error --- src/js/components/repository.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/components/repository.js b/src/js/components/repository.js index 1a0fd46f1..4016bd69b 100644 --- a/src/js/components/repository.js +++ b/src/js/components/repository.js @@ -29,7 +29,7 @@ var Repository = React.createClass({ var repoId = this.props.repo[0].repository.name; apiRequests - .putAuth('https://api.github.com/repos22/' + loginId + '/' + repoId + '/notifications', {}) + .putAuth('https://api.github.com/repos/' + loginId + '/' + repoId + '/notifications', {}) .end(function (err, response) { if (response && response.ok) { // Notification Read From 0a9f228a3bd2880c5eff25d1500d35b871aad49b Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Sat, 20 Jun 2015 20:50:21 +0300 Subject: [PATCH 09/10] Coverage 100% --- src/js/__tests__/components/repository.js | 41 ++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/js/__tests__/components/repository.js b/src/js/__tests__/components/repository.js index de8c50591..baeca0660 100644 --- a/src/js/__tests__/components/repository.js +++ b/src/js/__tests__/components/repository.js @@ -78,7 +78,7 @@ describe('Test for Repository Component', function () { }); - it('Should mark a repo as read - succsfully', function () { + it('Should mark a repo as read - successfully', function () { var repoDetails = [{ 'repository': { @@ -115,4 +115,43 @@ describe('Test for Repository Component', function () { }); + it('Should mark a repo as read - fail', function () { + + var repoDetails = [{ + 'repository': { + 'name': 'gitify', + 'full_name': 'ekonstantinidis/gitify', + 'owner': { + 'login': 'ekonstantinidis', + 'avatar_url': 'http://avatar.url' + } + }, + 'subject': { + 'type': 'Issue' + } + }]; + + var instance = TestUtils.renderIntoDocument( + + ); + + expect(instance.state.isRead).toBeFalsy(); + expect(instance.state.errors).toBeFalsy(); + expect(instance.markRepoAsRead).toBeDefined(); + + var superagent = require('superagent'); + superagent.__setResponse(400, false); + + // Mark Repo as Read + instance.markRepoAsRead(); + jest.runAllTimers(); + + expect(instance.state.isRead).toBeFalsy(); + expect(instance.state.errors).toBeTruthy(); + + }); + }); From 009afa806e8829c8608f84bd3d8e016da7fb968a Mon Sep 17 00:00:00 2001 From: Emmanouil Konstantinidis Date: Sat, 20 Jun 2015 21:08:48 +0300 Subject: [PATCH 10/10] Typo --- src/js/components/repository.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/components/repository.js b/src/js/components/repository.js index 4016bd69b..59d286c42 100644 --- a/src/js/components/repository.js +++ b/src/js/components/repository.js @@ -35,7 +35,7 @@ var Repository = React.createClass({ // Notification Read self.setState({ isRead: true, - erros: false + errors: false }); } else { self.setState({