From 626af8c429e6188eda3801e624f5a8161a51a3ab Mon Sep 17 00:00:00 2001
From: Armen Zambrano G <armenzg@gmail.com>
Date: Tue, 18 Dec 2018 15:32:16 -0500
Subject: [PATCH] Fix React hot loading

It seems that using react-loadable was breaking hot loading.
Changes to App/index.jsx would hot reload but any children components would not.
---
 package.json                     |  1 -
 src/App/index.jsx                | 13 +++++++----
 src/App/routes.jsx               |  9 -------
 src/components/Spinner/index.jsx | 28 ----------------------
 src/utils/loadable.jsx           | 40 --------------------------------
 yarn.lock                        |  9 +------
 6 files changed, 9 insertions(+), 91 deletions(-)
 delete mode 100644 src/App/routes.jsx
 delete mode 100644 src/components/Spinner/index.jsx
 delete mode 100644 src/utils/loadable.jsx

diff --git a/package.json b/package.json
index a424051..0f8bdaf 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "react": "^16",
     "react-dom": "^16",
     "react-hot-loader": "^4",
-    "react-loadable": "^5.5.0",
     "react-router-dom": "^4.3.1",
     "typeface-roboto": "^0.0.54"
   },
diff --git a/src/App/index.jsx b/src/App/index.jsx
index 5bfac2a..dd699a0 100644
--- a/src/App/index.jsx
+++ b/src/App/index.jsx
@@ -1,9 +1,10 @@
 import { hot } from 'react-hot-loader';
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 import ErrorPanel from '@mozilla-frontend-infra/components/ErrorPanel';
-import routes from './routes';
+import Main from '../views/Main';
 
 const styles = () => ({
   container: {
@@ -12,6 +13,10 @@ const styles = () => ({
 });
 
 class App extends Component {
+  static propTypes = {
+    classes: PropTypes.shape({}).isRequired,
+  };
+
   state = {
     error: undefined,
   };
@@ -25,9 +30,7 @@ class App extends Component {
         {error && <ErrorPanel error={new Error(error)} />}
         <BrowserRouter>
           <Switch>
-            {routes.map(props => (
-              <Route key={props.path} {...props} />
-            ))}
+            <Route path="/" component={Main} />
           </Switch>
         </BrowserRouter>
       </div>
diff --git a/src/App/routes.jsx b/src/App/routes.jsx
deleted file mode 100644
index c78b619..0000000
--- a/src/App/routes.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import loadable from '../utils/loadable';
-
-export default [
-  {
-    component: loadable(() => import('../views/Main/index')),
-    path: '/',
-    exact: true,
-  },
-];
diff --git a/src/components/Spinner/index.jsx b/src/components/Spinner/index.jsx
deleted file mode 100644
index c78df2c..0000000
--- a/src/components/Spinner/index.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import CircularProgress from '@material-ui/core/CircularProgress';
-
-const styles = ({
-  center: {
-    textAlign: 'center',
-  },
-});
-
-class Spinner extends PureComponent {
-  static propTypes = {
-    classes: PropTypes.shape({}).isRequired,
-  };
-
-  render() {
-    const { classes } = this.props;
-
-    return (
-      <div className={classes.center}>
-        <CircularProgress thickness={5} color="primary" />
-      </div>
-    );
-  }
-}
-
-export default withStyles(styles)(Spinner);
diff --git a/src/utils/loadable.jsx b/src/utils/loadable.jsx
deleted file mode 100644
index 3113a7a..0000000
--- a/src/utils/loadable.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import Loadable from 'react-loadable';
-import Spinner from '../components/Spinner';
-
-class Loading extends PureComponent {
-  content() {
-    const { error, timedOut, pastDelay } = this.props;
-
-    if (error) {
-      throw error;
-    } else if (timedOut || pastDelay) {
-      return <Spinner />;
-    }
-
-    return null;
-  }
-
-  render() {
-    return <div>{this.content()}</div>;
-  }
-}
-
-Loading.propTypes = {
-  error: PropTypes.shape({}),
-  timedOut: PropTypes.bool,
-  pastDelay: PropTypes.bool,
-};
-
-Loading.defaultProps = {
-  error: '',
-  timedOut: false,
-  pastDelay: false,
-};
-
-export default loader => Loadable({
-  loader,
-  loading: Loading,
-  timeout: 10000,
-});
diff --git a/yarn.lock b/yarn.lock
index 4707e08..b46c72d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6851,7 +6851,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15, prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
@@ -7065,13 +7065,6 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-loadable@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"
-  integrity sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==
-  dependencies:
-    prop-types "^15.5.0"
-
 react-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"