Merge pull request #40 from combine/feature/upgrade-to-rhl4

Feature: Upgrade to react-hot-loader v4
combine · Jan 9, 2018 · fb40a77 · fb40a77
2 parents 2ffd187 + d67b1b8
commit fb40a77
Show file tree

Hide file tree

Showing 6 changed files with 2,836 additions and 382 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,10 @@
 {
   "parser": "babel-eslint",
   "rules": {
+    "max-len": [
+      "error",
+      { "code": 80, "tabWidth": 2 }
+    ],
     "indent": [
       1,
       2,
@@ -30,10 +34,12 @@
     "node": true
   },
   "globals": {
-    '__BASE_URL__': true,
-    expect: true
+    "expect": true
   },
-  "extends": "eslint:recommended",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
   "parserOptions": {
     "sourceType": "module",
     "ecmaFeatures": {
@@ -43,6 +49,7 @@
     "ecmaVersion": 6
   },
   "plugins": [
-      "react"
+    "babel",
+    "react"
   ]
 }
diff --git a/client/index.js b/client/index.js
@@ -3,39 +3,21 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
-import { AppContainer } from 'react-hot-loader';
 import createHistory from 'history/createBrowserHistory';
 import configureStore from 'store';
 import App from 'containers/App';
 
-const history = createHistory();
-
-// The root element of your app
-const rootElement = document.getElementById('app');
-
-// Creates the Redux store based on the initial state passed down by the server
-// rendering.
+// Hydrate the redux store from server state.
 const initialState = window.__INITIAL_STATE__;
+const history = createHistory();
 const store = configureStore(initialState, history);
 
-const render = (Component) => {
-  ReactDOM.hydrate(
-    <Provider store={store}>
-      <AppContainer>
-        <ConnectedRouter history={history}>
-          <Component />
-        </ConnectedRouter>
-      </AppContainer>
-    </Provider>,
-    rootElement
-  );
-};
-
-render(App);
-
-if (module.hot) {
-  // We need to re-require the main App module.
-  module.hot.accept('../common/js/containers/App', () => {
-    render(require('../common/js/containers/App').default);
-  });
-}
+// Render the application
+ReactDOM.hydrate(
+  <Provider store={store}>
+    <ConnectedRouter history={history}>
+      <App />
+    </ConnectedRouter>
+  </Provider>,
+  document.getElementById('app')
+);
diff --git a/common/js/containers/App/index.js b/common/js/containers/App/index.js
@@ -3,6 +3,7 @@ import { Switch } from 'react-router-dom';
 import { RouteWithSubRoutes } from 'components/common';
 import { Container } from 'semantic-ui-react';
 import { Header, Footer } from 'components/common';
+import { hot } from 'react-hot-loader';
 import routes from 'routes';
 
 const App = () => (
@@ -17,4 +18,4 @@ const App = () => (
   </Container>
 );
 
-export default App;
+export default hot(module)(App);
diff --git a/common/js/containers/Todos/index.js b/common/js/containers/Todos/index.js
@@ -3,18 +3,28 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { addTodo, toggleTodo, removeTodo, fetchTodos } from 'actions/todos';
-import { Container, Header, Checkbox, List, Button, Form } from 'semantic-ui-react';
+import {
+  Container,
+  Header,
+  Checkbox,
+  List,
+  Button,
+  Form
+} from 'semantic-ui-react';
 import classnames from 'classnames';
 import css from './index.scss';
 
 const cx = classnames.bind(css);
 
 class TodosContainer extends Component {
+  static fetchData = ({ store }) => {
+    return store.dispatch(fetchTodos());
+  };
 
   static propTypes = {
     todos: PropTypes.object.isRequired,
     dispatch: PropTypes.func.isRequired
-  }
+  };
 
   state = { todoText: '' };
 
@@ -26,30 +36,30 @@ class TodosContainer extends Component {
     }
   }
 
-  submitTodo = (ev) => {
+  submitTodo = ev => {
     const { dispatch } = this.props;
     const { todoText } = this.state;
 
     ev.preventDefault();
     dispatch(addTodo(todoText));
     this.setState({ todoText: '' });
-  }
+  };
 
-  checkTodo = (id) => {
+  checkTodo = id => {
     const { dispatch } = this.props;
 
     dispatch(toggleTodo(id));
-  }
+  };
 
-  removeTodo = (id) => {
+  removeTodo = id => {
     const { dispatch } = this.props;
 
     dispatch(removeTodo(id));
-  }
+  };
 
-  onTodoChange = (ev) => {
+  onTodoChange = ev => {
     this.setState({ todoText: ev.target.value });
-  }
+  };
 
   render() {
     const { todos: { todos } } = this.props;
@@ -81,7 +91,9 @@ class TodosContainer extends Component {
                     onChange={() => this.checkTodo(id)}
                   />
                 </List.Content>
-                <List.Content className={cx(css.text, { [css.completed]: completed })}>
+                <List.Content
+                  className={cx(css.text, { [css.completed]: completed })}
+                >
                   {text}
                 </List.Content>
               </List.Item>
@@ -94,7 +106,8 @@ class TodosContainer extends Component {
               onChange={this.onTodoChange}
               value={todoText}
               type="text"
-              placeholder="Add a todo..." />
+              placeholder="Add a todo..."
+            />
             <Form.Button content="Add" icon="plus" />
           </Form.Group>
         </Form>
@@ -103,10 +116,6 @@ class TodosContainer extends Component {
   }
 }
 
-TodosContainer.fetchData = ({ store }) => {
-  return store.dispatch(fetchTodos());
-};
-
 const mapStateToProps = ({ todos }) => ({ todos });
 
 export default connect(mapStateToProps)(TodosContainer);