Add prettier config; Upgrade deps; Remove immutable;

Author: flexdinesh

.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"
+    }
+}

README.md

@@ -46,7 +46,7 @@ So it involves a lot of additional learning curve to get started with [react-boi
 This boilerplate features all the latest tools and practices in the industry.
 
 - _React.js_ - **React 16**✨, React Router 5
-- _Redux.js_ - Redux saga, Redux immutable and Reselect
+- _Redux.js_ - Redux saga and Reselect
 - _Babel_ - ES6, ESNext, Airbnb and React/Recommended config
 - _Webpack_ - **Webpack 4**✨, Hot Reloading, Code Splitting, Optimized Prod Build and more
 - _Test_ - Jest with Enzyme

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,
+    );
   });
 });