adding prettier, hook prettier up with eslint and formatting project

.eslintrc

@@ -8,7 +8,7 @@
     "__CONFIG__": true,
     "__ENV__": true
   },
-  "extends": ["airbnb"],
+  "extends": ["airbnb", "plugin:prettier/recommended"],
   "plugins": ["flowtype", "react"],
   "parser": "babel-eslint",
   "parserOptions": {
@@ -19,6 +19,7 @@
   },
   // Rule changes from Airbnb's eslint config
   "rules": {
+    "prettier/prettier": "error",
     "import/no-unresolved": 0,
     "new-cap": 0,
     "semi": 0,

__fixtures__/store.js

@@ -1,3 +1,3 @@
-import { createStore } from 'redux';
+import { createStore } from "redux";
 
-export const getStore = (obj = {}) => createStore((state) => state, obj)
+export const getStore = (obj = {}) => createStore((state) => state, obj);

__mocks__/fileMock.js

@@ -1 +1 @@
-module.exports = 'test-file-stub';
+module.exports = "test-file-stub";

package.json

@@ -55,10 +55,12 @@
     "enzyme-adapter-react-16": "^1.9.1",
     "eslint": "^5.12.0",
     "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.2.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-flowtype": "^3.4.2",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
@@ -70,6 +72,8 @@
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.5.0",
     "precss": "^4.0.0",
+    "prettier": "^1.17.0",
+    "pretty-quick": "^1.10.0",
     "raf": "^3.4.1",
     "react-hot-loader": "^4.7.1",
     "react-test-renderer": "^16.2.0",

src/js/Root.jsx

@@ -1,38 +1,32 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Provider } from 'react-redux'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Provider } from "react-redux";
 // You could use BrowserRoute or HashRoute
 // But passing in history directly to Route will
 // give your app more flexibility on deeper integration of `history`
-import { Router } from 'react-router-dom'
-import { IntlProvider } from 'react-intl'
+import { Router } from "react-router-dom";
+import { IntlProvider } from "react-intl";
 
 export default class Root extends Component {
   get content() {
-    const { routes, history } = this.props
+    const { routes, history } = this.props;
 
-    return (
-      <Router history={history}>
-        {routes}
-      </Router>
-    )
+    return <Router history={history}>{routes}</Router>;
   }
 
   render() {
-    const { store } = this.props
+    const { store } = this.props;
 
     return (
       <IntlProvider locale="en">
-        <Provider store={store}>
-          {this.content}
-        </Provider>
+        <Provider store={store}>{this.content}</Provider>
       </IntlProvider>
-    )
+    );
   }
 }
 
 Root.propTypes = {
   history: PropTypes.object.isRequired,
   routes: PropTypes.element.isRequired,
   store: PropTypes.object.isRequired,
-}
+};

src/js/app-history.js

@@ -10,10 +10,10 @@
 // don't make changes in here.
 // import createHistory from 'history/createBrowserHistory'
 
-import { createHashHistory } from 'history'
+import { createHashHistory } from "history";
 
-const history = createHashHistory()
+const history = createHashHistory();
 
 // Exposing history for deep integration needs
 // For example, saga and utilities
-export { history }
+export { history };

src/js/common/components/Example/Example.jsx

@@ -1,6 +1,6 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from "react";
 
-import styles from './Example.css';
+import styles from "./Example.css";
 
 /**
  * Example
@@ -51,10 +51,11 @@ class Example extends PureComponent {
             <span className={styles.emphasize}>Started</span>
           </h1>
           <p>If you see this screen, it means you are all setup \o/</p>
-          <p>The following JSON are showing contents coming from Redux, Saga and Config.</p>
-          <pre>
-            {JSON.stringify(result, undefined, 2)}
-          </pre>
+          <p>
+            The following JSON are showing contents coming from Redux, Saga and
+            Config.
+          </p>
+          <pre>{JSON.stringify(result, undefined, 2)}</pre>
         </div>
       );
     }

src/js/common/components/Example/ExampleWithError.jsx

@@ -1,6 +1,6 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from "react";
 
-import styles from './Example.css';
+import styles from "./Example.css";
 
 class ExampleWithError extends PureComponent {
   render() {
@@ -11,7 +11,7 @@ class ExampleWithError extends PureComponent {
       return (
         <div className={styles.exampleOutput}>
           <h1>This should catch by ErrorBoundary</h1>
-          {result.something_not_existed.get('something_not_existed')}
+          {result.something_not_existed.get("something_not_existed")}
         </div>
       );
     }

src/js/common/components/Example/index.js

@@ -1,2 +1,2 @@
-export { default as Example } from './Example';
-export { default as ExampleWithError } from './ExampleWithError';
+export { default as Example } from "./Example";
+export { default as ExampleWithError } from "./ExampleWithError";

src/js/common/components/Header/Header.jsx

@@ -1,31 +1,28 @@
-import React, { PureComponent } from 'react';
-import { Link } from 'react-router-dom';
+import React, { PureComponent } from "react";
+import { Link } from "react-router-dom";
 
-import styles from './Header.css';
+import styles from "./Header.css";
 
 class Header extends PureComponent {
   render() {
     const { location } = this.props;
     const { pathname } = location;
 
-    const isHome = pathname === '/';
-    const isJustAnotherPage = pathname === '/page';
+    const isHome = pathname === "/";
+    const isJustAnotherPage = pathname === "/page";
 
     return (
       <header className={styles.globalHeader}>
         <ul>
-          <li className={!isHome ? styles.active : ''}>
-            {
-              isHome
-                ? 'Home' : <Link to="/">Home</Link>
-
-            }
+          <li className={!isHome ? styles.active : ""}>
+            {isHome ? "Home" : <Link to="/">Home</Link>}
           </li>
-          <li className={!isJustAnotherPage ? styles.active : ''}>
-            {
-              isJustAnotherPage
-                ? 'Just Another Page' : <Link to="/page">Just Another Page</Link>
-            }
+          <li className={!isJustAnotherPage ? styles.active : ""}>
+            {isJustAnotherPage ? (
+              "Just Another Page"
+            ) : (
+              <Link to="/page">Just Another Page</Link>
+            )}
           </li>
         </ul>
       </header>

src/js/common/components/Header/index.js

@@ -1 +1 @@
-export { default as Header } from './Header';
+export { default as Header } from "./Header";

src/js/common/components/LazyLoading/Loading.jsx

@@ -1,34 +1,32 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from "react";
 
-import styles from './Loading.css'
+import styles from "./Loading.css";
 
 class Loading extends PureComponent {
   getMessage() {
-    const {
-      isLoading,
-      timedOut,
-      pastDelay,
-      error,
-    } = this.props;
+    const { isLoading, timedOut, pastDelay, error } = this.props;
 
-    const errorMessage = 'We can't pull up information at this point, please try again.'
+    const errorMessage =
+      "We can't pull up information at this point, please try again.";
 
     if (isLoading) {
       if (timedOut) {
         return <div>{errorMessage}</div>;
-      } if (pastDelay) {
+      }
+      if (pastDelay) {
         return <div className={styles.loader}>Loading...</div>;
       }
       return null;
-    } if (error) {
+    }
+    if (error) {
       return <div>{errorMessage}</div>;
     }
 
     return null;
   }
 
   render() {
-    return this.getMessage()
+    return this.getMessage();
   }
 }
 

src/js/common/components/LazyLoading/index.js

@@ -1,12 +1,11 @@
-import Loadable from 'react-loadable'
+import Loadable from "react-loadable";
 
-import Loading from './Loading'
+import Loading from "./Loading";
 
-export const create = (loader) => (
+export const create = (loader) =>
   Loadable({
     loader,
     loading: Loading,
-  })
-)
+  });
 
-export default create
+export default create;

src/js/common/components/Utilities/ErrorBoundary.jsx

@@ -1,45 +1,46 @@
-import React, { PureComponent } from 'react'
+import React, { PureComponent } from "react";
 
 const style = {
-  padding: '.75rem 1.25rem',
-  marginBottom: '1rem',
-  border: '1px solid transparent',
-  borderRadius: '.25rem',
-  color: '#721c24',
-  backgroundColor: '#f8d7da',
-  borderColor: '#f5c6cb',
-}
+  padding: ".75rem 1.25rem",
+  marginBottom: "1rem",
+  border: "1px solid transparent",
+  borderRadius: ".25rem",
+  color: "#721c24",
+  backgroundColor: "#f8d7da",
+  borderColor: "#f5c6cb",
+};
 
 class ErrorBoundary extends PureComponent {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       hasError: false,
     };
   }
 
   componentDidCatch(error, info) {
     // you probably want to log it somewhere
-    console.log(error, info)
+    console.log(error, info);
     this.setState({
       hasError: true,
     });
   }
 
   render() {
-    const { hasError } = this.state
-    const { children } = this.props
+    const { hasError } = this.state;
+    const { children } = this.props;
 
     if (hasError) {
       return (
         <div style={style}>
-          Something is going wrong!! This error is caught by ErrorBoundary feature in React 16 \o/
+          Something is going wrong!! This error is caught by ErrorBoundary
+          feature in React 16 \o/
         </div>
       );
     }
 
-    return children
+    return children;
   }
 }
 
-export default ErrorBoundary
+export default ErrorBoundary;

src/js/common/components/Utilities/index.js

@@ -1 +1 @@
-export { default as ErrorBoundary } from './ErrorBoundary';
+export { default as ErrorBoundary } from "./ErrorBoundary";

src/js/common/types/example.js

@@ -1,5 +1,5 @@
 export type exampleType = {
   title: string,
   description: string,
-  source: string,
-}
+  source: string
+};

src/js/main.jsx

@@ -1,33 +1,30 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { fromJS } from 'immutable'
+import React from "react";
+import ReactDOM from "react-dom";
+import { fromJS } from "immutable";
 
-import routes from './routes'
-import Root from './Root'
-import configureStore from './redux/configureStore'
-import { history } from './app-history'
+import routes from "./routes";
+import Root from "./Root";
+import configureStore from "./redux/configureStore";
+import { history } from "./app-history";
 
-let initialState = {}
+let initialState = {};
 
 // rehydrate initialState for JS app
 if (window.__INITIAL_STATE__) {
-  initialState = window.__INITIAL_STATE__
+  initialState = window.__INITIAL_STATE__;
 
   // Transform into Immutable.js collections,
   // but leave top level keys untouched for Redux
-  Object
-    .keys(initialState)
-    .forEach((key) => {
-      initialState[key] = fromJS(initialState[key])
-    })
+  Object.keys(initialState).forEach((key) => {
+    initialState[key] = fromJS(initialState[key]);
+  });
 }
 
-const store = configureStore(initialState, history)
-
+const store = configureStore(initialState, history);
 
 // Render the React application to the DOM
 // Root component is to bootstrap Provider, Router and DevTools
 ReactDOM.render(
   <Root history={history} routes={routes} store={store} />,
-  document.getElementById('app-container')
-)
+  document.getElementById("app-container")
+);