code splitting with React Router

package.json

@@ -18,6 +18,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
+    "react-loadable": "^5.5.0",
     "react-pdf": "^2.5.3",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",

src/components/App.js

@@ -20,7 +20,7 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import configureStore from '../configureStore';
-import Router from './Router';
+import Router from './router';
 
 const store = configureStore();
 

src/components/router/AsyncComponent.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+
+/*
+  Code Splitting with React Router
+  https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+*/
+
+const LoadingComponent = ({isLoading, error}) => {
+  if (isLoading) { // Handle the loading state
+    return <div>Loading...</div>;
+  } else if (error) {  // Handle the error state
+    return <div>Sorry, there was a problem loading the page.</div>;
+  } else {
+    return null;
+  }
+};
+
+export const Home = Loadable({
+  loader: () => import('../Home'),
+  loading: LoadingComponent,
+});
+
+export const Login = Loadable({
+  loader: () => import('../Login'),
+  loading: LoadingComponent,
+});
+
+export const ReturnPage = Loadable({
+  loader: () => import('../ReturnPage'),
+  loading: LoadingComponent,
+});
+
+export const PageNotFound = Loadable({
+  loader: () => import('../PageNotFound'),
+  loading: LoadingComponent,
+});
+
+export const ManageZone = Loadable({
+  loader: () => import('../manageZone'),
+  loading: LoadingComponent,
+});
+
+export const ManageClient = Loadable({
+  loader: () => import('../manageClient'),
+  loading: LoadingComponent,
+});
+
+export const RangeUsePlan = Loadable({
+  loader: () => import('../rangeUsePlan'),
+  loading: LoadingComponent,
+});
+
+export const RupPDFView = Loadable({
+  loader: () => import('../rangeUsePlan/RupPDFView'),
+  loading: LoadingComponent,
+});

src/components/router/PrivateRoute.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import LandingPage from '../LandingPage';
+import { MANAGE_CLIENT, MANAGE_ZONE, LOGIN, EXPORT_PDF_WITH_PARAM } from '../../constants/routes';
+import { isUserAdmin } from '../../utils';
+
+const PrivateRoute = ({ component: Component, user, ...rest }) => (
+  <Route
+    {...rest}
+    render={(props) => { // props = { match:{...}, history:{...}, location:{...} }
+        if (user) {
+          const { path } = props.match;
+
+          // Admin Routes
+          if (path === MANAGE_CLIENT || path === MANAGE_ZONE) {
+            if (isUserAdmin(user)) {
+              return <LandingPage {...props} component={Component} />;
+            }
+            return <Redirect push to={LOGIN} />;
+          }
+
+          // no need to pass the RupPDFView to LandingPage
+          if (path === EXPORT_PDF_WITH_PARAM) {
+            return <Component {...props} />;
+          }
+
+          return <LandingPage {...props} component={Component} />;
+        }
+
+        // user is undefined redirect to the login page
+        return <Redirect push to={LOGIN} />;
+      }
+    }
+  />
+);
+
+export default PrivateRoute;

src/components/router/PublicRoute.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { HOME } from '../../constants/routes';
+
+const PublicRoute = ({ component: Component, user, ...rest }) => (
+  <Route
+    {...rest}
+    render={(props) => {
+      if (user) {
+        return <Redirect push to={HOME} />;
+      }
+      return <Component {...props} />;
+    }}
+  />
+);
+
+export default PublicRoute;

src/components/router/index.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
+import PublicRoute from './PublicRoute';
+import PrivateRoute from './PrivateRoute';
+import { getUser } from '../../reducers/rootReducer';
+import * as Routes from '../../constants/routes';
+import * as AsyncComponents from './AsyncComponent';
+
+class Router extends Component {
+  render() {
+    const { user } = this.props;
+    return (
+      <BrowserRouter>
+        <Switch>
+          <PrivateRoute path={Routes.MANAGE_ZONE} component={AsyncComponents.ManageZone} user={user} />
+          <PrivateRoute path={Routes.MANAGE_CLIENT} component={AsyncComponents.ManageClient} user={user} />
+
+          <PrivateRoute path={Routes.HOME} component={AsyncComponents.Home} user={user} />
+          <PrivateRoute path={Routes.RANGE_USE_PLAN_WITH_PARAM} component={AsyncComponents.RangeUsePlan} user={user} />
+          <PrivateRoute path={Routes.EXPORT_PDF_WITH_PARAM} component={AsyncComponents.RupPDFView} user={user} />
+          <PublicRoute path={Routes.LOGIN} component={AsyncComponents.Login} user={user} />
+
+          <Route path="/return-page" component={AsyncComponents.ReturnPage} />
+          <Route path="/" exact render={() => (<Redirect to={Routes.LOGIN} />)} />
+          <Route component={AsyncComponents.PageNotFound} />
+        </Switch>
+      </BrowserRouter>
+    );
+  }
+}
+
+const mapStateToProps = state => (
+  {
+    user: getUser(state),
+  }
+);
+
+export default connect(mapStateToProps, null)(Router);