Upgrading

Author: jayair

src/Routes.js

@@ -1,24 +1,24 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
+import asyncComponent from "./components/AsyncComponent";
 import AppliedRoute from "./components/AppliedRoute";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
 import UnauthenticatedRoute from "./components/UnauthenticatedRoute";
 
-import Home from "./containers/Home";
-import Login from "./containers/Login";
-import Notes from "./containers/Notes";
-import Signup from "./containers/Signup";
-import NewNote from "./containers/NewNote";
-import NotFound from "./containers/NotFound";
+const AsyncHome = asyncComponent(() => import("./containers/Home"));
+const AsyncLogin = asyncComponent(() => import("./containers/Login"));
+const AsyncNotes = asyncComponent(() => import("./containers/Notes"));
+const AsyncSignup = asyncComponent(() => import("./containers/Signup"));
+const AsyncNewNote = asyncComponent(() => import("./containers/NewNote"));
+const AsyncNotFound = asyncComponent(() => import("./containers/NotFound"));
 
 export default ({ childProps }) =>
   <Switch>
-    <AppliedRoute path="/" exact component={Home} props={childProps} />
-
-    <UnauthenticatedRoute path="/login" exact component={Login} props={childProps} />
-    <UnauthenticatedRoute path="/signup" exact component={Signup} props={childProps} />
-    <AuthenticatedRoute path="/notes/:id" exact component={Notes} props={childProps} />
-    <AuthenticatedRoute path="/notes/new" exact component={NewNote} props={childProps} />
+    <AppliedRoute path="/" exact component={AsyncHome} props={childProps} />
+    <UnauthenticatedRoute path="/login" exact component={AsyncLogin} props={childProps} />
+    <UnauthenticatedRoute path="/signup" exact component={AsyncSignup} props={childProps} />
+    <AuthenticatedRoute path="/notes/new" exact component={AsyncNewNote} props={childProps} />
+    <AuthenticatedRoute path="/notes/:id" exact component={AsyncNotes} props={childProps} />
     { /* Finally, catch all unmatched routes */ }
-    <Route component={NotFound} />
+    <Route component={AsyncNotFound} />
   </Switch>;

src/components/AsyncComponent.js

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null
+      };
+    }
+
+    async componentDidMount() {
+      const { default: component } = await importComponent();
+
+      this.setState({
+        component: component
+      });
+    }
+
+    render() {
+      const C = this.state.component;
+
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
+}