Add prettier

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "semi": true,
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": true
+}

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "husky": "^0.14.3",
+    "lint-staged": "^7.0.0",
+    "prettier": "^1.11.0",
     "react-scripts": "^1.0.17"
   },
   "dependencies": {
@@ -20,7 +23,11 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "precommit": "lint-staged"
   },
-  "homepage": "https://cra-redux-router-thunk.herokuapp.com"
+  "homepage": "https://cra-redux-router-thunk.herokuapp.com",
+  "lint-staged": {
+    "*.{js,json,css,md}": ["prettier --write", "git add"]
+  }
 }

src/containers/about/index.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React from 'react';
 
 const About = () => (
   <div>
     <h1>About Page</h1>
     <p>Did you get here via Redux?</p>
   </div>
-)
+);
 
-export default About
+export default About;

src/containers/app/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Route, Link } from 'react-router-dom'
-import Home from '../home'
-import About from '../about'
+import { Route, Link } from 'react-router-dom';
+import Home from '../home';
+import About from '../about';
 
 const App = () => (
   <div>
@@ -15,6 +15,6 @@ const App = () => (
       <Route exact path="/about-us" component={About} />
     </main>
   </div>
-)
+);
 
-export default App
+export default App;

src/containers/home/index.js

@@ -1,48 +1,61 @@
-import React from 'react'
-import { push } from 'react-router-redux'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
+import React from 'react';
+import { push } from 'react-router-redux';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import {
   increment,
   incrementAsync,
   decrement,
   decrementAsync
-} from '../../modules/counter'
+} from '../../modules/counter';
 
 const Home = props => (
   <div>
     <h1>Home</h1>
     <p>Count: {props.count}</p>
 
     <p>
-      <button onClick={props.increment} disabled={props.isIncrementing}>Increment</button>
-      <button onClick={props.incrementAsync} disabled={props.isIncrementing}>Increment Async</button>
+      <button onClick={props.increment} disabled={props.isIncrementing}>
+        Increment
+      </button>
+      <button onClick={props.incrementAsync} disabled={props.isIncrementing}>
+        Increment Async
+      </button>
     </p>
 
     <p>
-      <button onClick={props.decrement} disabled={props.isDecrementing}>Decrement</button>
-      <button onClick={props.decrementAsync} disabled={props.isDecrementing}>Decrement Async</button>
+      <button onClick={props.decrement} disabled={props.isDecrementing}>
+        Decrement
+      </button>
+      <button onClick={props.decrementAsync} disabled={props.isDecrementing}>
+        Decrement Async
+      </button>
     </p>
 
-    <p><button onClick={() => props.changePage()}>Go to about page via redux</button></p>
+    <p>
+      <button onClick={() => props.changePage()}>
+        Go to about page via redux
+      </button>
+    </p>
   </div>
-)
+);
 
 const mapStateToProps = state => ({
   count: state.counter.count,
   isIncrementing: state.counter.isIncrementing,
   isDecrementing: state.counter.isDecrementing
-})
+});
 
-const mapDispatchToProps = dispatch => bindActionCreators({
-  increment,
-  incrementAsync,
-  decrement,
-  decrementAsync,
-  changePage: () => push('/about-us')
-}, dispatch)
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      increment,
+      incrementAsync,
+      decrement,
+      decrementAsync,
+      changePage: () => push('/about-us')
+    },
+    dispatch
+  );
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Home)
+export default connect(mapStateToProps, mapDispatchToProps)(Home);

src/index.css

@@ -5,7 +5,8 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif;
   font-size: 1rem;
   line-height: 1.5;
 }

src/index.js

@@ -1,14 +1,14 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { Provider } from 'react-redux'
-import { ConnectedRouter } from 'react-router-redux'
-import store, { history } from './store'
-import App from './containers/app'
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';
+import store, { history } from './store';
+import App from './containers/app';
 
-import 'sanitize.css/sanitize.css'
-import './index.css'
+import 'sanitize.css/sanitize.css';
+import './index.css';
 
-const target = document.querySelector('#root')
+const target = document.querySelector('#root');
 
 render(
   <Provider store={store}>
@@ -19,4 +19,4 @@ render(
     </ConnectedRouter>
   </Provider>,
   target
-)
+);

src/modules/counter.js

@@ -1,95 +1,95 @@
-export const INCREMENT_REQUESTED = 'counter/INCREMENT_REQUESTED'
-export const INCREMENT = 'counter/INCREMENT'
-export const DECREMENT_REQUESTED = 'counter/DECREMENT_REQUESTED'
-export const DECREMENT = 'counter/DECREMENT'
+export const INCREMENT_REQUESTED = 'counter/INCREMENT_REQUESTED';
+export const INCREMENT = 'counter/INCREMENT';
+export const DECREMENT_REQUESTED = 'counter/DECREMENT_REQUESTED';
+export const DECREMENT = 'counter/DECREMENT';
 
 const initialState = {
   count: 0,
   isIncrementing: false,
   isDecrementing: false
-}
+};
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case INCREMENT_REQUESTED:
       return {
         ...state,
         isIncrementing: true
-      }
+      };
 
     case INCREMENT:
       return {
         ...state,
         count: state.count + 1,
         isIncrementing: !state.isIncrementing
-      }
+      };
 
     case DECREMENT_REQUESTED:
       return {
         ...state,
         isDecrementing: true
-      }
+      };
 
     case DECREMENT:
       return {
         ...state,
         count: state.count - 1,
         isDecrementing: !state.isDecrementing
-      }
+      };
 
     default:
-      return state
+      return state;
   }
-}
+};
 
 export const increment = () => {
   return dispatch => {
     dispatch({
       type: INCREMENT_REQUESTED
-    })
+    });
 
     dispatch({
       type: INCREMENT
-    })
-  }
-}
+    });
+  };
+};
 
 export const incrementAsync = () => {
   return dispatch => {
     dispatch({
       type: INCREMENT_REQUESTED
-    })
+    });
 
     return setTimeout(() => {
       dispatch({
         type: INCREMENT
-      })
-    }, 3000)
-  }
-}
+      });
+    }, 3000);
+  };
+};
 
 export const decrement = () => {
   return dispatch => {
     dispatch({
       type: DECREMENT_REQUESTED
-    })
+    });
 
     dispatch({
       type: DECREMENT
-    })
-  }
-}
+    });
+  };
+};
 
 export const decrementAsync = () => {
   return dispatch => {
     dispatch({
       type: DECREMENT_REQUESTED
-    })
+    });
 
     return setTimeout(() => {
       dispatch({
         type: DECREMENT
-      })
-    }, 3000)
-  }
-}
+      });
+    }, 3000);
+  };
+};

src/modules/index.js

@@ -1,8 +1,8 @@
-import { combineReducers } from 'redux'
-import { routerReducer } from 'react-router-redux'
-import counter from './counter'
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+import counter from './counter';
 
 export default combineReducers({
   router: routerReducer,
   counter
-})
+});

src/store.js

@@ -1,33 +1,23 @@
-import { createStore, applyMiddleware, compose } from 'redux'
-import { routerMiddleware } from 'react-router-redux'
-import thunk from 'redux-thunk'
-import createHistory from 'history/createBrowserHistory'
-import rootReducer from './modules'
+import { createStore, applyMiddleware, compose } from 'redux';
+import { routerMiddleware } from 'react-router-redux';
+import thunk from 'redux-thunk';
+import createHistory from 'history/createBrowserHistory';
+import rootReducer from './modules';
 
-export const history = createHistory()
+export const history = createHistory();
 
-const initialState = {}
-const enhancers = []
-const middleware = [
-  thunk,
-  routerMiddleware(history)
-]
+const initialState = {};
+const enhancers = [];
+const middleware = [thunk, routerMiddleware(history)];
 
 if (process.env.NODE_ENV === 'development') {
-  const devToolsExtension = window.devToolsExtension
+  const devToolsExtension = window.devToolsExtension;
 
   if (typeof devToolsExtension === 'function') {
-    enhancers.push(devToolsExtension())
+    enhancers.push(devToolsExtension());
   }
 }
 
-const composedEnhancers = compose(
-  applyMiddleware(...middleware),
-  ...enhancers
-)
+const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
 
-export default createStore(
-  rootReducer,
-  initialState,
-  composedEnhancers
-)
+export default createStore(rootReducer, initialState, composedEnhancers);