Add prettier config; Upgrade deps; Remove immutable;

.prettierignore

@@ -0,0 +1,7 @@
+build/
+node_modules/
+internals/generators/
+internals/scripts/
+package-lock.json
+yarn.lock
+package.json

.prettierrc

@@ -0,0 +1,8 @@
+{
+ "printWidth": 80,
+ "tabWidth": 2,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "all"
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+ "workbench.colorCustomizations": {
+ "tab.unfocusedActiveBorder": "#fff0"
+ }
+}

app/app.js

@@ -12,9 +12,9 @@ import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { ConnectedRouter } from 'react-router-redux';
+import { ConnectedRouter } from 'connected-react-router';
 import FontFaceObserver from 'fontfaceobserver';
-import createHistory from 'history/createBrowserHistory';
+import history from 'utils/history';
 import 'sanitize.css/sanitize.css';
 
 // Import root app
@@ -43,18 +43,15 @@ openSansObserver.load().then(() => {
 
 // Create redux store with history
 const initialState = {};
-const history = createHistory();
 const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('app');
 
 const render = () => {
  ReactDOM.render(
  <Provider store={store}>
- {/* <LanguageProvider messages={messages}> */}
  <ConnectedRouter history={history}>
  <App />
  </ConnectedRouter>
- {/* </LanguageProvider> */}
  </Provider>,
  MOUNT_NODE
  );

app/components/List/List.js

@@ -26,7 +26,7 @@ const List = ({ component, items }) => {
 };
 
 List.propTypes = {
- component: PropTypes.func.isRequired,
+ component: PropTypes.elementType.isRequired,
  items: PropTypes.array,
 };
 

app/configureStore.js

@@ -3,8 +3,7 @@
  */
 
 import { createStore, applyMiddleware, compose } from 'redux';
-import { fromJS } from 'immutable';
-import { routerMiddleware } from 'react-router-redux';
+import { routerMiddleware } from 'connected-react-router';
 import createSagaMiddleware from 'redux-saga';
 import createReducer from './reducers';
 
@@ -29,14 +28,13 @@ export default function configureStore(initialState = {}, history) {
  : compose;
  /* eslint-enable */
 
- const store = createStore(createReducer(), fromJS(initialState), composeEnhancers(...enhancers));
+ const store = createStore(createReducer(), initialState, composeEnhancers(...enhancers));
 
  // Extensions
  store.runSaga = sagaMiddleware.run;
  store.injectedReducers = {}; // Reducer registry
  store.injectedSagas = {}; // Saga registry
 
- // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
  module.hot.accept('./reducers', () => {

app/containers/App/reducer.js

@@ -1,49 +1,44 @@
-/*
- * AppReducer
- *
- * The reducer takes care of our data. Using actions, we can change our
- * application state.
- * To add a new action, add it to the switch statement in the reducer function
- *
- * Example:
- * case YOUR_ACTION_CONSTANT:
- * return state.set('yourStateVariable', true);
- */
-
-import { fromJS } from 'immutable';
-
-import {
- LOAD_REPOS_SUCCESS,
- LOAD_REPOS,
- LOAD_REPOS_ERROR,
-} from './constants';
+import { LOAD_REPOS_SUCCESS, LOAD_REPOS, LOAD_REPOS_ERROR } from './constants';
 
 // The initial state of the App
-const initialState = fromJS({
+export const initialState = {
  loading: false,
  error: false,
  currentUser: false,
  userData: {
  repositories: false,
  },
-});
+};
 
 function appReducer(state = initialState, action) {
  switch (action.type) {
- case LOAD_REPOS:
- return state
- .set('loading', true)
- .set('error', false)
- .setIn(['userData', 'repositories'], false);
- case LOAD_REPOS_SUCCESS:
- return state
- .setIn(['userData', 'repositories'], action.repos)
- .set('loading', false)
- .set('currentUser', action.username);
- case LOAD_REPOS_ERROR:
- return state
- .set('error', action.error)
- .set('loading', false);
+ case LOAD_REPOS: {
+ const newState = {
+ ...state,
+ loading: true,
+ error: false,
+ userData: {
+ repositories: false,
+ },
+ };
+
+ return newState;
+ }
+ case LOAD_REPOS_SUCCESS: {
+ const newState = {
+ ...state,
+ loading: false,
+ userData: {
+ repositories: action.repos,
+ },
+ currentUser: action.username,
+ };
+ return newState;
+ }
+
+ case LOAD_REPOS_ERROR: {
+ return { ...state, error: action.error, loading: false };
+ }
  default:
  return state;
  }

app/containers/App/selectors.js

@@ -1,36 +1,33 @@
-/**
- * The global state selectors
- */
-
 import { createSelector } from 'reselect';
+import { initialState } from './reducer';
 
-const selectGlobal = (state) => state.get('global');
+const selectGlobal = (state) => state.global || initialState;
 
-const selectRoute = (state) => state.get('route');
+const selectRoute = (state) => state.router;
 
 const makeSelectCurrentUser = () => createSelector(
  selectGlobal,
- (globalState) => globalState.get('currentUser')
+ (globalState) => globalState.currentUser
 );
 
 const makeSelectLoading = () => createSelector(
  selectGlobal,
- (globalState) => globalState.get('loading')
+ (globalState) => globalState.loading
 );
 
 const makeSelectError = () => createSelector(
  selectGlobal,
- (globalState) => globalState.get('error')
+ (globalState) => globalState.error
 );
 
 const makeSelectRepos = () => createSelector(
  selectGlobal,
- (globalState) => globalState.getIn(['userData', 'repositories'])
+ (globalState) => globalState.userData.repositories
 );
 
 const makeSelectLocation = () => createSelector(
  selectRoute,
- (routeState) => routeState.get('location').toJS()
+ (routeState) => routeState.location
 );
 
 export {

app/containers/App/tests/reducer.test.js

@@ -1,23 +1,17 @@
-import { fromJS } from 'immutable';
-
 import appReducer from '../reducer';
-import {
- loadRepos,
- reposLoaded,
- repoLoadingError,
-} from '../actions';
+import { loadRepos, reposLoaded, repoLoadingError } from '../actions';
 
 describe('appReducer', () => {
  let state;
  beforeEach(() => {
- state = fromJS({
+ state = {
  loading: false,
  error: false,
  currentUser: false,
- userData: fromJS({
+ userData: {
  repositories: false,
- }),
- });
+ },
+ };
  });
 
  it('should return the initial state', () => {
@@ -26,35 +20,47 @@ describe('appReducer', () => {
  });
 
  it('should handle the loadRepos action correctly', () => {
- const expectedResult = state
- .set('loading', true)
- .set('error', false)
- .setIn(['userData', 'repositories'], false);
-
+ const expectedResult = {
+ ...state,
+ loading: true,
+ error: false,
+ userData: { repositories: false },
+ };
  expect(appReducer(state, loadRepos())).toEqual(expectedResult);
  });
 
  it('should handle the reposLoaded action correctly', () => {
- const fixture = [{
- name: 'My Repo',
- }];
+ const fixture = [
+ {
+ name: 'My Repo',
+ },
+ ];
  const username = 'test';
- const expectedResult = state
- .setIn(['userData', 'repositories'], fixture)
- .set('loading', false)
- .set('currentUser', username);
+ const expectedResult = {
+ ...state,
+ loading: false,
+ currentUser: username,
+ userData: { repositories: fixture },
+ };
 
- expect(appReducer(state, reposLoaded(fixture, username))).toEqual(expectedResult);
+ expect(appReducer(state, reposLoaded(fixture, username))).toEqual(
+ expectedResult,
+ );
  });
 
  it('should handle the repoLoadingError action correctly', () => {
  const fixture = {
  msg: 'Not found',
  };
- const expectedResult = state
- .set('error', fixture)
- .set('loading', false);
 
- expect(appReducer(state, repoLoadingError(fixture))).toEqual(expectedResult);
+ const expectedResult = {
+ ...state,
+ error: fixture,
+ loading: false,
+ };
+
+ expect(appReducer(state, repoLoadingError(fixture))).toEqual(
+ expectedResult,
+ );
  });
 });