GitHub repository input component

package.json

@@ -42,6 +42,7 @@
     "normalize.css": "^5.0.0",
     "oauth": "^0.9.14",
     "qs": "^6.3.0",
+    "parse-github-url": "^0.3.2",
     "raven": "^0.12.3",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
@@ -77,6 +78,7 @@
     "expect": "^1.20.2",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "flux-standard-action": "^1.0.0",
     "images-require-hook": "^1.0.3",
     "mocha": "^3.1.2",
     "nock": "^9.0.2",

src/common/actions/repository-input.js

@@ -0,0 +1,54 @@
+import 'isomorphic-fetch';
+
+export const SET_GITHUB_REPOSITORY = 'SET_GITHUB_REPOSITORY';
+export const VERIFY_GITHUB_REPOSITORY = 'VERIFY_GITHUB_REPOSITORY';
+export const VERIFY_GITHUB_REPOSITORY_SUCCESS = 'VERIFY_GITHUB_REPOSITORY_SUCCESS';
+export const VERIFY_GITHUB_REPOSITORY_ERROR = 'VERIFY_GITHUB_REPOSITORY_ERROR';
+
+export function setGitHubRepository(value) {
+  return {
+    type: SET_GITHUB_REPOSITORY,
+    payload: value
+  };
+}
+
+function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  } else {
+    const error = new Error(response.statusText);
+    error.response = response;
+    throw error;
+  }
+}
+
+export function verifyGitHubRepository(repository) {
+  return (dispatch) => {
+    if (repository) {
+      dispatch({
+        type: VERIFY_GITHUB_REPOSITORY,
+        payload: repository
+      });
+
+      return fetch(`https://api.github.com/repos/${repository}/contents/snapcraft.yaml`)
+        .then(checkStatus)
+        .then(() => dispatch(verifyGitHubRepositorySuccess(`https://github.com/${repository}.git`)))
+        .catch(error => dispatch(verifyGitHubRepositoryError(error)));
+    }
+  };
+}
+
+export function verifyGitHubRepositorySuccess(repositoryUrl) {
+  return {
+    type: VERIFY_GITHUB_REPOSITORY_SUCCESS,
+    payload: repositoryUrl
+  };
+}
+
+export function verifyGitHubRepositoryError(error) {
+  return {
+    type: VERIFY_GITHUB_REPOSITORY_ERROR,
+    payload: error,
+    error: true
+  };
+}

src/common/components/repository-input/index.js

@@ -0,0 +1,79 @@
+import 'isomorphic-fetch';
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import {
+  setGitHubRepository,
+  verifyGitHubRepository
+} from '../../actions/repository-input';
+
+export class RepositoryInput extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  getStatusMessage() {
+    const input = this.props.repositoryInput;
+    let message;
+
+    if (input.inputValue.length > 2 && !input.repository) {
+      message = 'Repository URL or name is invalid.';
+    } else if (input.repository && input.isFetching) {
+      message = `Verifying ${input.repository} on GitHub...`;
+    } else if (input.success && input.repositoryUrl) {
+      message = `Repository ${input.repository} contains snapcraft project and can be built.`;
+    } else if (input.error) {
+      if (input.repository) {
+        message = `Repository ${input.repository} is doesn't exist, is not public or doesn't contain snapcraft.yaml file.`;
+      }
+    }
+
+    return message;
+  }
+
+  render() {
+    const isValid = !!this.props.repositoryInput.repository;
+
+    return (
+      <form onSubmit={this.onSubmit.bind(this)}>
+        <label>Repository URL:</label>
+        <input type='text' value={this.props.repositoryInput.inputValue} onChange={this.onInputChange.bind(this)} />
+        <button type='submit' disabled={!isValid}>Verify</button>
+        <div>
+          {this.getStatusMessage()}
+        </div>
+      </form>
+    );
+  }
+
+  onInputChange(event) {
+    this.props.dispatch(setGitHubRepository(event.target.value));
+  }
+
+  onSubmit(event) {
+    const { repository } = this.props.repositoryInput;
+
+    if (repository) {
+      this.props.dispatch(verifyGitHubRepository(repository));
+    }
+    event.preventDefault();
+  }
+}
+
+RepositoryInput.propTypes = {
+  repositoryInput: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  const {
+    repositoryInput
+  } = state;
+
+  return {
+    repositoryInput
+  };
+}
+
+export default connect(mapStateToProps)(RepositoryInput);

src/common/containers/home.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Helmet from 'react-helmet';
 
 import HelloWorld from '../components/hello-world';
+import RepositoryInput from '../components/repository-input';
 
 import styles from './container.css';
 
@@ -14,6 +15,7 @@ export default class Home extends Component {
           title='Home'
         />
         <HelloWorld />
+        <RepositoryInput />
       </div>
     );
   }

src/common/reducers/index.js

@@ -1,7 +1,10 @@
 import { routerReducer } from 'react-router-redux';
 import { combineReducers } from 'redux';
 
+import * as repositoryInput from '../reducers/repository-input';
+
 const rootReducer = combineReducers({
+  ...repositoryInput,
   routing: routerReducer
 });
 

src/common/reducers/repository-input.js

@@ -0,0 +1,49 @@
+import * as ActionTypes from '../actions/repository-input';
+import parseGitHubUrl from 'parse-github-url';
+
+function parseRepository(input) {
+  const gitHubRepo = parseGitHubUrl(input);
+  return gitHubRepo ? gitHubRepo.repo : null;
+}
+
+export function repositoryInput(state = {
+  isFetching: false,
+  inputValue: '',
+  repository: null,
+  repositoryUrl: null,
+  success: false,
+  error: false
+}, action) {
+  switch(action.type) {
+    case ActionTypes.SET_GITHUB_REPOSITORY:
+      return {
+        ...state,
+        inputValue: action.payload,
+        repository: parseRepository(action.payload),
+        success: false,
+        error: false
+      };
+    case ActionTypes.VERIFY_GITHUB_REPOSITORY:
+      return {
+        ...state,
+        isFetching: true
+      };
+    case ActionTypes.VERIFY_GITHUB_REPOSITORY_SUCCESS:
+      return {
+        ...state,
+        isFetching: false,
+        success: true,
+        error: false,
+        repositoryUrl: action.payload
+      };
+    case ActionTypes.VERIFY_GITHUB_REPOSITORY_ERROR:
+      return {
+        ...state,
+        isFetching: false,
+        success: false,
+        error: action.payload
+      };
+    default:
+      return state;
+  }
+}

test/unit/helpers.js

@@ -0,0 +1,16 @@
+import expect from 'expect';
+
+// Custom assertions
+expect.extend({
+  toHaveActionOfType(expected) {
+    expect.assert(
+      this.actual.filter((action) => {
+        return action.type === expected;
+      }).length > 0,
+      'to have action %s',
+      expected
+    );
+
+    return this;
+  }
+});

test/unit/setup.js

@@ -0,0 +1 @@
+import './helpers';

test/unit/src/common/actions/t_repository-input.js

@@ -0,0 +1,145 @@
+import expect from 'expect';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import nock from 'nock';
+import { isFSA } from 'flux-standard-action';
+
+import {
+  setGitHubRepository,
+  verifyGitHubRepository,
+  verifyGitHubRepositorySuccess,
+  verifyGitHubRepositoryError
+} from '../../../../../src/common/actions/repository-input';
+import * as ActionTypes from '../../../../../src/common/actions/repository-input';
+
+const middlewares = [ thunk ];
+const mockStore = configureMockStore(middlewares);
+
+describe('repository input actions', () => {
+  const initialState = {
+    isFetching: false,
+    inputValue: '',
+    repository: null,
+    repositoryUrl: null,
+    statusMessage: '',
+    success: false,
+    error: false
+  };
+
+  let store;
+  let action;
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+  });
+
+  context('setGitHubRepository', () => {
+    let payload = 'foo/bar';
+
+    beforeEach(() => {
+      action = setGitHubRepository(payload);
+    });
+
+    it('should create an action to update repository name', () => {
+      const expectedAction = {
+        type: ActionTypes.SET_GITHUB_REPOSITORY,
+        payload
+      };
+
+      store.dispatch(action);
+      expect(store.getActions()).toInclude(expectedAction);
+    });
+
+    it('should create a valid flux standard action', () => {
+      expect(isFSA(action)).toBe(true);
+    });
+  });
+
+  context('verifyGitHubRepositorySuccess', () => {
+    let payload = 'http://github.com/foo/bar.git';
+
+    beforeEach(() => {
+      action = verifyGitHubRepositorySuccess(payload);
+    });
+
+    it('should create an action to save github repo url on success', () => {
+      const expectedAction = {
+        type: ActionTypes.VERIFY_GITHUB_REPOSITORY_SUCCESS,
+        payload
+      };
+
+      store.dispatch(action);
+      expect(store.getActions()).toInclude(expectedAction);
+    });
+
+    it('should create a valid flux standard action', () => {
+      expect(isFSA(action)).toBe(true);
+    });
+  });
+
+  context('verifyGitHubRepositoryError', () => {
+    let payload = 'Something went wrong!';
+
+    beforeEach(() => {
+      action = verifyGitHubRepositoryError(payload);
+    });
+
+    it('should create an action to store github repo error on failure', () => {
+      const expectedAction = {
+        type: ActionTypes.VERIFY_GITHUB_REPOSITORY_ERROR,
+        error: true,
+        payload
+      };
+
+      store.dispatch(action);
+      expect(store.getActions()).toInclude(expectedAction);
+    });
+
+    it('should create a valid flux standard action', () => {
+      expect(isFSA(action)).toBe(true);
+    });
+  });
+
+  context('verifyGitHubRepository', () => {
+    let scope;
+
+    beforeEach(() => {
+      scope = nock('https://api.github.com');
+    });
+
+    afterEach(() => {
+      nock.cleanAll();
+    });
+
+    it('should save GitHub repo on successful verification', () => {
+      scope.get('/repos/foo/bar/contents/snapcraft.yaml')
+        .reply(200, {
+          'name': 'snapcraft.yaml'
+        });
+
+      return store.dispatch(verifyGitHubRepository('foo/bar'))
+        .then(() => {
+          expect(store.getActions()).toHaveActionOfType(
+            ActionTypes.VERIFY_GITHUB_REPOSITORY_SUCCESS
+          );
+        });
+    });
+
+    it('should store error on GitHub verification failure', () => {
+      scope.get('/repos/foo/bar/contents/snapcraft.yaml')
+        .reply(404, {
+          'message': 'Not Found',
+          'documentation_url': 'https://developer.github.com/v3'
+        });
+
+      return store.dispatch(verifyGitHubRepository('foo/bar'))
+        .then(() => {
+          expect(store.getActions()).toHaveActionOfType(
+            ActionTypes.VERIFY_GITHUB_REPOSITORY_ERROR
+          );
+        });
+    });
+
+  });
+
+});