Merge pull request #215 from ekonstantinidis/starred-already

186 - Hide "Star on GitHub"

Author: ekonstantinidis

src/js/__tests__/actions/index.js

@@ -1,7 +1,9 @@
 import { expect } from 'chai';
 import nock from 'nock';
-import { apiMiddleware } from 'redux-api-middleware';
+import { apiMiddleware, ApiError } from 'redux-api-middleware';
 import configureMockStore from 'redux-mock-store';
+
+import Constants from '../../utils/constants';
 import * as actions from '../../actions';
 
 const middlewares = [ apiMiddleware ];
@@ -186,7 +188,6 @@ describe('actions/index.js', () => {
 
   });
 
-
   it('should mark a repository\'s notifications as read with success', () => {
     const loginId = 'ekonstantinidis';
     const repoId = 'gitify';
@@ -249,6 +250,44 @@ describe('actions/index.js', () => {
 
   });
 
+  it('should check if the user has starred the repository', () => {
+    nock('https://api.github.com/')
+      .get(`/user/starred/${Constants.REPO_SLUG}`)
+      .reply(200);
+
+    const expectedActions = [
+      { type: actions.HAS_STARRED_REQUEST, payload: undefined, meta: undefined },
+      { type: actions.HAS_STARRED_SUCCESS, payload: undefined, meta: undefined }
+    ];
+
+    const store = createMockStore({ response: [] }, expectedActions);
+
+    return store.dispatch(actions.checkHasStarred())
+      .then(() => { // return of async actions
+        expect(store.getActions()).to.eql(expectedActions);
+      });
+
+  });
+
+  it('should check if the user has starred the repository', () => {
+    nock('https://api.github.com/')
+      .get(`/user/starred/${Constants.REPO_SLUG}`)
+      .reply(404);
+
+    const apiError = new ApiError(404, 'Not Found', undefined);
+    const expectedActions = [
+      { type: actions.HAS_STARRED_REQUEST, payload: undefined, meta: undefined },
+      { type: actions.HAS_STARRED_FAILURE, payload: apiError, error: true, meta: undefined }
+    ];
+
+    const store = createMockStore({ response: [] }, expectedActions);
+
+    return store.dispatch(actions.checkHasStarred())
+      .then(() => { // return of async actions
+        expect(store.getActions()).to.eql(expectedActions);
+      });
+
+  });
 
   it('should search the notifications with a query', () => {
 

src/js/__tests__/reducers/settings.js

@@ -1,14 +1,15 @@
 import { expect } from 'chai';
 import reducer from '../../reducers/settings';
-import { UPDATE_SETTING } from '../../actions';
+import { UPDATE_SETTING, HAS_STARRED_SUCCESS, HAS_STARRED_FAILURE } from '../../actions';
 
 describe('reducers/settings.js', () => {
   const initialState = {
     participating: false,
     playSound: true,
     showNotifications: true,
     markOnClick: false,
-    openAtStartup: false
+    openAtStartup: false,
+    hasStarred: false
   };
 
   it('should return the initial state', () => {
@@ -42,4 +43,31 @@ describe('reducers/settings.js', () => {
     });
 
   });
+
+  it('should handle HAS_STARRED_SUCCESS', () => {
+
+    const actionParticipating = {
+      type: HAS_STARRED_SUCCESS
+    };
+
+    expect(reducer(undefined, actionParticipating)).to.eql({
+      ...initialState,
+      hasStarred: true
+    });
+
+  });
+
+  it('should handle HAS_STARRED_SUCCESS', () => {
+
+    const actionParticipating = {
+      type: HAS_STARRED_FAILURE
+    };
+
+    expect(reducer(undefined, actionParticipating)).to.eql({
+      ...initialState,
+      hasStarred: false
+    });
+
+  });
+
 });

src/js/actions/index.js

@@ -115,6 +115,27 @@ export function markRepoNotifications(loginId, repoId, repoFullName) {
 };
 
 
+// Starred
+
+export const HAS_STARRED_REQUEST = 'HAS_STARRED_REQUEST';
+export const HAS_STARRED_SUCCESS = 'HAS_STARRED_SUCCESS';
+export const HAS_STARRED_FAILURE = 'HAS_STARRED_FAILURE';
+export function checkHasStarred() {
+  return {
+    [CALL_API]: {
+      endpoint: `https://api.github.com/user/starred/${Constants.REPO_SLUG}`,
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Cache-Control': 'no-cache',
+        'Content-Type': 'application/json'
+      },
+      types: [HAS_STARRED_REQUEST, HAS_STARRED_SUCCESS, HAS_STARRED_FAILURE]
+    }
+  };
+};
+
+
 // Search
 
 export const SEARCH_NOTIFICATIONS = 'SEARCH_NOTIFICATIONS';

src/js/components/login.js

@@ -75,7 +75,7 @@ export class LoginPage extends React.Component {
     return (
       <div className="container-fluid main-container login">
         <div className="row">
-          <div className="col-xs-offset-2 col-xs-8">
+          <div className="offset-xs-2 col-xs-8">
             <img className="img-responsive logo" src="images/gitify-logo-outline-dark.png" />
             <div className="desc">GitHub Notifications<br />in your menu bar.</div>
             <button className="btn btn-lg btn-block" onClick={this.authGithub.bind(this)}>

src/js/components/notifications.js

@@ -62,7 +62,7 @@ export class NotificationsPage extends React.Component {
           })}
         </ReactCSSTransitionGroup>
 
-        {!_.isEmpty(groupedNotifications) ? (
+        {!_.isEmpty(groupedNotifications) && !this.props.hasStarred ? (
           <div className="fork" onClick={this.openBrowser}>
             <i className="fa fa-github" /> Star Gitify on GitHub
           </div>
@@ -74,6 +74,7 @@ export class NotificationsPage extends React.Component {
 
 function mapStateToProps(state) {
   return {
+    hasStarred: state.settings.hasStarred,
     failed: state.notifications.failed,
     notifications: state.notifications.response,
     searchQuery: state.searchFilter.query

src/js/middleware/requests.js

@@ -1,5 +1,10 @@
 import { CALL_API, isRSAA } from 'redux-api-middleware';
-import { NOTIFICATIONS_REQUEST, MARK_NOTIFICATION_REQUEST, MARK_REPO_NOTIFICATION_REQUEST } from '../actions';
+import {
+  HAS_STARRED_REQUEST,
+  NOTIFICATIONS_REQUEST,
+  MARK_NOTIFICATION_REQUEST,
+  MARK_REPO_NOTIFICATION_REQUEST
+} from '../actions';
 
 export default store => next => action => {
   if (!isRSAA(action)) {
@@ -12,6 +17,7 @@ export default store => next => action => {
       const endpoint = action[CALL_API].endpoint + '?participating=';
       action[CALL_API].endpoint = endpoint + (settings.participating ? 'true' : 'false');
 
+    case HAS_STARRED_REQUEST:
     case NOTIFICATIONS_REQUEST:
     case MARK_NOTIFICATION_REQUEST:
     case MARK_REPO_NOTIFICATION_REQUEST:

src/js/reducers/settings.js

@@ -1,13 +1,16 @@
 import {
-  UPDATE_SETTING
+  UPDATE_SETTING,
+  HAS_STARRED_SUCCESS,
+  HAS_STARRED_FAILURE
 } from '../actions';
 
 const initialState = {
   participating: false,
   playSound: true,
   showNotifications: true,
   markOnClick: false,
-  openAtStartup: false
+  openAtStartup: false,
+  hasStarred: false
 };
 
 export default function reducer(state = initialState, action) {
@@ -17,6 +20,16 @@ export default function reducer(state = initialState, action) {
         ...state,
         [action.setting]: action.value
       };
+    case HAS_STARRED_SUCCESS:
+      return {
+        ...state,
+        hasStarred: true
+      };
+    case HAS_STARRED_FAILURE:
+      return {
+        ...state,
+        hasStarred: false
+      };
     default:
       return state;
   }

src/js/store/configureStore.js

@@ -5,15 +5,19 @@ import * as storage from 'redux-storage';
 import createEngine from 'redux-storage-engine-localstorage';
 import filter from 'redux-storage-decorator-filter';
 
-import { fetchNotifications, UPDATE_SETTING, LOGIN_SUCCESS, LOGOUT } from '../actions';
+import { checkHasStarred, fetchNotifications, UPDATE_SETTING, LOGIN_SUCCESS, LOGOUT } from '../actions';
 import constants from '../utils/constants';
 import notifications from '../middleware/notifications';
 import settings from '../middleware/settings';
 import requests from '../middleware/requests';
 import rootReducer from '../reducers';
 
 export default function configureStore(initialState) {
-  const engine = filter(createEngine(constants.STORAGE_KEY), ['settings', ['auth', 'token']]);
+  const engine = filter(
+    createEngine(constants.STORAGE_KEY),
+    ['settings', ['auth', 'token']],
+    [['settings', 'hasStarred']]
+  );
   const storageMiddleware = storage.createMiddleware(engine, [], [UPDATE_SETTING, LOGIN_SUCCESS, LOGOUT]);
 
   const createStoreWithMiddleware = applyMiddleware(
@@ -32,7 +36,10 @@ export default function configureStore(initialState) {
     .then(function (newState) {
       // Check if the user is logged in
       const isLoggedIn = store.getState().auth.token !== null;
-      if (isLoggedIn) { store.dispatch(fetchNotifications()); }
+      if (isLoggedIn) {
+        store.dispatch(checkHasStarred());
+        store.dispatch(fetchNotifications());
+      }
     });
 
   return store;

src/js/utils/constants.js

@@ -4,6 +4,8 @@ let constants = {
   CLIENT_SECRET: '9670de733096c15322183ff17ed0fc8704050379',
   SCOPE: ['user:email', 'notifications'],
 
+  REPO_SLUG: 'ekonstantinidis/gitify',
+
   // Storage
   STORAGE_KEY: 'gitify-storage',