gnarails 0.9.0

data/templates/react/js/api/sessions.js

@@ -0,0 +1,8 @@
+export default () => {
+  return {
+    create: ({ email, password }) => {
+      return Promise.resolve({ email, password, jwt: 'jwt' });
+    },
+    destroy: () => Promise.resolve({}),
+  };
+};

data/templates/react/js/app_constants/index.js

@@ -0,0 +1,6 @@
+const { origin } = global.window;
+
+export default {
+  API_HOST: `${origin}/api`,
+  APP_NAME: 'CHANGE_ME',
+};

data/templates/react/js/components/App/App.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+class App extends Component {
+  render () {
+    const { children } = this.props;
+    return (
+      <div className="app">
+        {children}
+      </div>
+    );
+  }
+};
+
+export default withRouter(App);

data/templates/react/js/components/App/App.tests.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import expect from 'expect';
+import { mount } from 'enzyme';
+
+import App from 'components/App';
+import connectWrapper from 'test/connect_wrapper';
+
+describe('App - component', () => {
+  it('renders', () => {
+    const WrappedApp = connectWrapper(App);
+    const Component = mount(<WrappedApp />);
+
+    expect(Component.find('App').length).toEqual(1);
+  });
+});

data/templates/react/js/components/App/_styles.scss

@@ -0,0 +1,3 @@
+.app {
+  color: $black;
+}

data/templates/react/js/components/App/index.js

@@ -0,0 +1,3 @@
+import App from './App';
+
+export default App;

data/templates/react/js/index.scss

@@ -0,0 +1,2 @@
+@import 'styles/variables';
+@import 'components/App/_styles.scss';

data/templates/react/js/packs/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Router from 'Router';
+import 'index.scss';
+
+if (typeof window !== 'undefined') {
+  global.document.addEventListener('DOMContentLoaded', () => {
+    const mountNode = global.document.getElementById('react');
+
+    ReactDOM.render(<Router />, mountNode);
+  });
+};

data/templates/react/js/redux/entity_getter.js

@@ -0,0 +1,7 @@
+import entityGetter from 'react-entity-getter';
+
+const pathToEntities = (entityName) => {
+  return `entities.${entityName}.data`;
+};
+
+export default entityGetter(pathToEntities);

data/templates/react/js/redux/history.js

@@ -0,0 +1,5 @@
+import createHistory from 'history/createBrowserHistory';
+
+global.window.gnarHistory = global.window.gnarHistory || createHistory();
+
+export default global.window.gnarHistory;

data/templates/react/js/redux/initial_state.js

@@ -0,0 +1,5 @@
+export const app = { session: {}, loading: false };
+
+export default {
+  app,
+};

data/templates/react/js/redux/middlewares/authentication_middleware/authentication_middleware.tests.js

@@ -0,0 +1,109 @@
+import expect from 'expect';
+
+import appConfig from 'redux/nodes/app/config';
+import mockStore from 'test/mock_store';
+import storage from 'storage';
+
+const authToken = 'abc123';
+
+describe('Authentication middleware', () => {
+  beforeEach(() => storage.setItem('auth_token', authToken));
+  afterEach(() => storage.removeItem('auth_token'));
+
+  context('when the action type is for the login success action', () => {
+    const action = {
+      type: appConfig.actionTypes.LOGIN_SUCCESS,
+      payload: { jwt: 'jwt' },
+    };
+    const store = mockStore({});
+
+    it('adds the auth_token to local storage', () => {
+      storage.removeItem('auth_token');
+      store.dispatch(action);
+
+      expect(storage.getItem('auth_token')).toEqual('jwt');
+    });
+  });
+
+  context('when the action type is for the logout success action', () => {
+    const action = {
+      type: appConfig.actionTypes.LOGOUT_SUCCESS,
+      payload: {},
+    };
+    const store = mockStore({});
+
+    it('removes the auth_token from local storage', () => {
+      store.dispatch(action);
+
+      expect(storage.getItem('auth_token')).toEqual(undefined);
+    });
+  });
+
+  context('when the action type is not for the logout success action', () => {
+    const action = {
+      type: 'FOO',
+      payload: {},
+    };
+    const store = mockStore({});
+
+    it('does not remove the auth_token from local storage', () => {
+      store.dispatch(action);
+
+      expect(storage.getItem('auth_token')).toEqual(authToken);
+    });
+  });
+
+  context('when the action is for an entity that fails to load', () => {
+    context('when the payload error is an unauthorized error', () => {
+      const action = {
+        type: 'entity_name_SOMETHING_FAILURE',
+        payload: {
+          errors: {
+            http_status: 401,
+          },
+        },
+      };
+      const store = mockStore({});
+
+      it('removes the auth_token from local storage', () => {
+        store.dispatch(action);
+
+        expect(storage.getItem('auth_token')).toEqual(undefined);
+      });
+    });
+
+    context('when the payload error is not an unauthorized error', () => {
+      const action = {
+        type: 'entity_name_SOMETHING_FAILURE',
+        payload: {
+          errors: {},
+        },
+      };
+      const store = mockStore({});
+
+      it('does not remove the auth_token from local storage', () => {
+        store.dispatch(action);
+
+        expect(storage.getItem('auth_token')).toEqual(authToken);
+      });
+    });
+  });
+
+  context('when the action type is not a failure action', () => {
+    const action = {
+      type: 'entity_name_SOMETHING_SUCCESS',
+      payload: {
+        errors: {
+          http_status: 401,
+        },
+      },
+    };
+    const store = mockStore({});
+
+    it('does not remove the auth_token from local storage', () => {
+      store.dispatch(action);
+
+      expect(storage.getItem('auth_token')).toEqual(authToken);
+    });
+  });
+});

data/templates/react/js/redux/middlewares/authentication_middleware/helpers.js

@@ -0,0 +1,21 @@
+import { endsWith, get } from 'lodash';
+import appConfig from 'redux/nodes/app/config';
+
+const { LOGIN_SUCCESS, LOGOUT_SUCCESS } = appConfig.actionTypes;
+const UNAUTHORIZED_ERROR = 401;
+
+const isFailureAction = (action) => {
+  return endsWith(action.type, '_FAILURE');
+};
+
+const isLoginAction = action => action.type === LOGIN_SUCCESS;
+const isLogoutAction = action => action.type === LOGOUT_SUCCESS;
+
+const isUnauthorizedError = action => get(action, 'payload.errors.http_status') === UNAUTHORIZED_ERROR;
+
+export default {
+  isFailureAction,
+  isLoginAction,
+  isLogoutAction,
+  isUnauthorizedError,
+};

data/templates/react/js/redux/middlewares/authentication_middleware/helpers.tests.js

@@ -0,0 +1,84 @@
+import expect from 'expect';
+
+import helpers from 'redux/middlewares/authentication_middleware/helpers';
+
+describe('Authentication middleware - helpers', () => {
+  describe('#isFailureAction', () => {
+    it('returns true when the action type ends in _FAILURE', () => {
+      const action = { type: 'SOMETHING_FAILURE' };
+
+      expect(helpers.isFailureAction(action)).toEqual(true);
+    });
+
+    it('returns false when the action type does not end in _FAILURE', () => {
+      const action = { type: 'SOMETHING_FAILUR' };
+
+      expect(helpers.isFailureAction(action)).toEqual(false);
+    });
+  });
+
+  describe('#isLoginAction', () => {
+    it('returns true when the action type is the login success action type', () => {
+      const action = { type: 'LOGIN_SUCCESS' };
+
+      expect(helpers.isLoginAction(action)).toEqual(true);
+    });
+
+    it('returns false when the action type is not the login success action type', () => {
+      const action = { type: 'LOGIN_FAILURE' };
+
+      expect(helpers.isLoginAction(action)).toEqual(false);
+    });
+  });
+
+  describe('#isLogoutAction', () => {
+    it('returns true when the action type is the logout success action type', () => {
+      const action = { type: 'LOGOUT_SUCCESS' };
+
+      expect(helpers.isLogoutAction(action)).toEqual(true);
+    });
+
+    it('returns false when the action type is not the logout success action type', () => {
+      const action = { type: 'LOGOUT_FAILURE' };
+
+      expect(helpers.isLogoutAction(action)).toEqual(false);
+    });
+  });
+
+  describe('#isUnauthorizedError', () => {
+    it('returns true when the action payload has an unauthorized http status', () => {
+      const action = {
+        type: 'FOOBAR',
+        payload: {
+          errors: {
+            http_status: 401,
+          },
+        },
+      };
+
+      expect(helpers.isUnauthorizedError(action)).toEqual(true);
+    });
+
+    it('returns false when the action payload does not have an unauthorized http status', () => {
+      const action = {
+        type: 'FOOBAR',
+        payload: {
+          errors: {
+            http_status: 500,
+          },
+        },
+      };
+
+      expect(helpers.isUnauthorizedError(action)).toEqual(false);
+    });
+
+    it('returns false when there is no action payload http status', () => {
+      const action = {
+        type: 'FOOBAR',
+        payload: {},
+      };
+
+      expect(helpers.isUnauthorizedError(action)).toEqual(false);
+    });
+  });
+});

data/templates/react/js/redux/middlewares/authentication_middleware/index.js

@@ -0,0 +1,20 @@
+import helpers from 'redux/middlewares/authentication_middleware/helpers';
+import storage from 'storage';
+
+const authMiddleware = () => next => (action) => {
+  if (helpers.isLoginAction(action)) {
+    storage.setItem('auth_token', action.payload.jwt);
+  }
+
+  if (helpers.isLogoutAction(action)) {
+    storage.removeItem('auth_token');
+  }
+
+  if (helpers.isFailureAction(action) && helpers.isUnauthorizedError(action)) {
+    storage.removeItem('auth_token');
+  }
+
+  return next(action);
+};
+
+export default authMiddleware;

data/templates/react/js/redux/middlewares/index.js

@@ -0,0 +1,11 @@
+import { routerMiddleware } from 'react-router-redux';
+import thunkMiddleware from 'redux-thunk';
+
+import authenticationMiddleware from 'redux/middlewares/authentication_middleware';
+import history from 'redux/history';
+
+export default [
+  thunkMiddleware,
+  routerMiddleware(history),
+  authenticationMiddleware,
+];

data/templates/react/js/redux/nodes/app/actions.js

@@ -0,0 +1,36 @@
+import API from 'api';
+import config from 'redux/nodes/app/config';
+
+const { actionTypes } = config;
+
+const loginRequest = { type: actionTypes.LOGIN_REQUEST };
+const loginFailure = { type: actionTypes.LOGIN_FAILURE };
+const loginSuccess = (jwt) => {
+  return { type: actionTypes.LOGIN_SUCCESS, payload: { jwt } };
+};
+
+const logoutRequest = { type: actionTypes.LOGOUT_REQUEST };
+const logoutFailure = { type: actionTypes.LOGOUT_FAILURE };
+const logoutSuccess = { type: actionTypes.LOGOUT_FAILURE };
+
+const login = ({ email, password }) => {
+  return (dispatch) => {
+    dispatch(loginRequest);
+
+    return API.sessions.create({ email, password })
+      .then(({ jwt }) => dispatch(loginSuccess(jwt)))
+      .catch(() => dispatch(loginFailure));
+  };
+};
+
+const logout = () => {
+  return (dispatch) => {
+    dispatch(logoutRequest);
+
+    return API.sessions.destroy()
+      .then(() => dispatch(logoutSuccess))
+      .catch(() => dispatch(logoutFailure));
+  };
+};
+
+export default { login, logout };

data/templates/react/js/redux/nodes/app/config.js

@@ -0,0 +1,12 @@
+const actionTypes = {
+  LOGIN_REQUEST: 'LOGIN_REQUEST',
+  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
+  LOGIN_FAILURE: 'LOGIN_FAILURE',
+  LOGOUT_REQUEST: 'LOGOUT_REQUEST',
+  LOGOUT_SUCCESS: 'LOGOUT_SUCCESS',
+  LOGOUT_FAILURE: 'LOGOUT_FAILURE',
+};
+
+export default {
+  actionTypes,
+};

data/templates/react/js/redux/nodes/app/reducer.js

@@ -0,0 +1,35 @@
+import config from 'redux/nodes/app/config';
+import initialState from 'redux/initial_state';
+
+const { actionTypes } = config;
+
+export default (state = initialState.app, action) => {
+  switch (action.type) {
+    case actionTypes.LOGIN_REQUEST:
+    case actionTypes.LOGOUT_REQUEST:
+      return {
+        ...state,
+        loading: true,
+      };
+    case actionTypes.LOGIN_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        session: { jwt: action.payload.jwt },
+      };
+    case actionTypes.LOGIN_FAILURE:
+    case actionTypes.LOGOUT_SUCCESS:
+      return {
+        ...state,
+        session: {},
+        loading: false,
+      };
+    case actionTypes.LOGOUT_FAILURE:
+      return {
+        ...state,
+        loading: false,
+      };
+    default:
+      return state;
+  }
+};

data/templates/react/js/redux/nodes/app/reducer.tests.js

@@ -0,0 +1,78 @@
+import expect from 'expect';
+
+import reducer from 'redux/nodes/app/reducer';
+import { app as appState } from 'redux/initial_state';
+
+describe('App - reducer', () => {
+  describe('dispatching the login actions', () => {
+    describe('LOGIN_REQUEST', () => {
+      it('sets the loading boolean to true', () => {
+        const action = { type: 'LOGIN_REQUEST' };
+
+        expect(reducer(appState, action)).toEqual({
+          ...appState,
+          loading: true,
+        });
+      });
+    });
+
+    describe('LOGIN_SUCCESS', () => {
+      it('saves the JWT to state', () => {
+        const action = { type: 'LOGIN_SUCCESS', payload: { jwt: 'jwt' } };
+        expect(reducer(appState, action)).toEqual({
+          ...appState,
+          session: { jwt: 'jwt' },
+        });
+      });
+    });
+
+    describe('LOGIN_FAILURE', () => {
+      it('removes the JWT from state', () => {
+        const action = { type: 'LOGIN_FAILURE' };
+        const state = { ...appState, session: { jwt: 'jwt' } };
+
+        expect(reducer(state, action)).toEqual({
+          ...appState,
+          session: {},
+        });
+      });
+    });
+  });
+
+  describe('dispatching the logout actions', () => {
+    describe('LOGOUT_REQUEST', () => {
+      it('sets the loading boolean to true', () => {
+        const action = { type: 'LOGOUT_REQUEST' };
+
+        expect(reducer(appState, action)).toEqual({
+          ...appState,
+          loading: true,
+        });
+      });
+    });
+
+    describe('LOGOUT_SUCCESS', () => {
+      it('removes the JWT from state', () => {
+        const action = { type: 'LOGOUT_SUCCESS' };
+        const state = { ...appState, session: { jwt: 'jwt' } };
+
+        expect(reducer(state, action)).toEqual({
+          ...appState,
+          session: {},
+        });
+      });
+    });
+
+    describe('LOGOUT_FAILURE', () => {
+      it('sets the loading boolean to false', () => {
+        const action = { type: 'LOGOUT_FAILURE' };
+        const state = { ...appState, loading: true };
+
+        expect(reducer(state, action)).toEqual({
+          ...appState,
+          loading: false,
+        });
+      });
+    });
+  });
+});

data/templates/react/js/redux/reducers.js

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+import { reducer as formReducer } from 'redux-form';
+import { routerReducer } from 'react-router-redux';
+
+import app from 'redux/nodes/app/reducer';
+
+export default combineReducers({
+  app,
+  form: formReducer,
+  router: routerReducer,
+});

data/templates/react/js/redux/store.js

@@ -0,0 +1,14 @@
+import { applyMiddleware, compose, createStore } from 'redux';
+import Es6ObjectAssign from 'es6-object-assign';
+import Es6Promise from 'es6-promise';
+import middlewares from 'redux/middlewares';
+import reducers from 'redux/reducers';
+import InitialState from 'redux/initial_state';
+
+const appliedMiddleware = applyMiddleware(...middlewares);
+
+// ie polyfills
+Es6ObjectAssign.polyfill();
+Es6Promise.polyfill();
+
+export default createStore(reducers, InitialState, compose(appliedMiddleware));

data/templates/react/js/storage.js

@@ -0,0 +1,15 @@
+import appConstants from 'app_constants';
+
+const prefix = appConstants.APP_NAME;
+
+export default {
+  getItem: (key) => {
+    return global.window.localStorage.getItem(`${prefix}:${key}`);
+  },
+  removeItem: (key) => {
+    return global.window.localStorage.removeItem(`${prefix}:${key}`);
+  },
+  setItem: (key, value) => {
+    return global.window.localStorage.setItem(`${prefix}:${key}`, value);
+  },
+};

data/templates/react/js/styles/_variables.scss

@@ -0,0 +1 @@
+$black: #000000;

data/templates/react/js/test/.setup.js

@@ -0,0 +1,51 @@
+var jsdom = require('jsdom').JSDOM;
+var exposedProperties = ['window', 'navigator', 'document'];
+var Enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+Enzyme.configure({ adapter: new Adapter() });
+
+jsdom = new jsdom('<!DOCTYPE html><html><body></body></html>');
+
+global.document = jsdom.window.document;
+global.window = document.defaultView;
+
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+
+function mockStorage() {
+  let storage = {};
+
+  return {
+    setItem(key, value = '') {
+      storage[key] = value;
+    },
+    getItem(key) {
+      return storage[key];
+    },
+    removeItem(key) {
+      delete storage[key];
+    },
+    get length() {
+      return Object.keys(storage).length;
+    },
+    key(i) {
+      return Object.keys(storage)[i] || null;
+    },
+    clear () {
+      storage = {};
+    },
+  };
+}
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+global.window = {
+  localStorage: mockStorage(),
+};

data/templates/react/js/test/connect_wrapper.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { has } from 'lodash';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router';
+
+import createStore from 'test/mock_store';
+
+const defaultStore = { router: { location: { pathname: '/' } } };
+
+const connectWrapper = (WrappedComponent, store = defaultStore) => {
+  class Wrapper extends Component {
+    render() {
+      const providerStore = has(store, 'getState') ? store : createStore(store);
+
+      return (
+        <Provider store={providerStore}>
+          <MemoryRouter>
+            <WrappedComponent {...this.props} />
+          </MemoryRouter>
+        </Provider>
+      );
+    }
+  }
+
+  return Wrapper;
+};
+
+export default connectWrapper;

data/templates/react/js/test/create_request_mock.js

@@ -0,0 +1,29 @@
+import nock from 'nock';
+
+const createRequestMock = ({
+  bearerToken,
+  host,
+  method,
+  params,
+  path,
+  responseStatus = 200,
+  response,
+}) => {
+  const reqheaders = { Authorization: `Bearer ${bearerToken}` };
+  const req = bearerToken ? nock(host, { reqheaders }) : nock(host);
+
+  if (params) {
+    return req[method](path, JSON.stringify(params))
+      .reply(responseStatus, response);
+  }
+
+  if (responseStatus >= 300) {
+    return req[method](path)
+      .replyWithError(response);
+  }
+
+  return req[method](path)
+    .reply(responseStatus, response);
+};
+
+export default createRequestMock;