fixed React.lazy imported routes and react-snap compatibility

Author: MacKentoch

src/front/pages/about/index.js

@@ -4,10 +4,6 @@
 import compose from 'recompose/compose';
 import About from './About';
 import withEnterAnimation from '../../hoc/withEnterAnimation';
-import withSuspense from '../../hoc/withSuspense';
 // #endregion
 
-export default compose(
-  withEnterAnimation(/* no option yet */),
-  withSuspense(),
-)(About);
+export default compose(withEnterAnimation(/* no option yet */))(About);

src/front/pages/home/index.js

@@ -4,10 +4,6 @@
 import compose from 'recompose/compose';
 import Home from './Home';
 import withEnterAnimation from '../../hoc/withEnterAnimation';
-import withSuspense from '../../hoc/withSuspense';
 // #endregion
 
-export default compose(
-  withEnterAnimation(/* no option yet */),
-  withSuspense(),
-)(Home);
+export default compose(withEnterAnimation(/* no option yet */))(Home);

src/front/pages/login/index.js

@@ -5,11 +5,9 @@ import compose from 'recompose/compose';
 import Login from './Login';
 import withEnterAnimation from '../../hoc/withEnterAnimation';
 import withAuth from '../../contexts/auth/consumerHOC';
-import withSuspense from '../../hoc/withSuspense';
 // #endregion
 
 export default compose(
   withEnterAnimation(/* no option yet */),
-  withSuspense(),
   withAuth(),
 )(Login);

src/front/pages/pageNotFound/index.js

@@ -4,10 +4,6 @@
 import compose from 'recompose/compose';
 import PageNotFound from './PageNotFound';
 import withEnterAnimation from '../../hoc/withEnterAnimation';
-import withSuspense from '../../hoc/withSuspense';
 // #endregion
 
-export default compose(
-  withEnterAnimation(/* no option yet */),
-  withSuspense(),
-)(PageNotFound);
+export default compose(withEnterAnimation(/* no option yet */))(PageNotFound);

src/front/pages/protected/index.js

@@ -4,10 +4,6 @@
 import compose from 'recompose/compose';
 import Protected from './Protected';
 import withEnterAnimation from '../../hoc/withEnterAnimation';
-import withSuspense from '../../hoc/withSuspense';
 // #endregion
 
-export default compose(
-  withEnterAnimation(/* no option yet */),
-  withSuspense(),
-)(Protected);
+export default compose(withEnterAnimation(/* no option yet */))(Protected);

src/front/routes/MainRoutes.js

@@ -2,26 +2,35 @@
 
 // #region imports
 import React from 'react';
+import compose from 'recompose/compose';
+import withSuspense from '../hoc/withSuspense';
 import { Route, Switch } from 'react-router';
 import PrivateRoute from '../components/privateRoute';
 // #endregion
 
 // #region constants
 const AsyncHome = React.lazy(() => import('../pages/home'));
-// const AsyncAbout = React.lazy(() => import('../pages/about'));
-// const AsyncProtected = React.lazy(() => import('../pages/protected'));
-// const AsyncPageNotFound = React.lazy(() => import('../pages/pageNotFound'));
+const Home = compose(withSuspense())(AsyncHome);
+
+const AsyncAbout = React.lazy(() => import('../pages/about'));
+const About = compose(withSuspense())(AsyncAbout);
+
+const AsyncProtected = React.lazy(() => import('../pages/protected'));
+const Protected = compose(withSuspense())(AsyncProtected);
+
+const AsyncPageNotFound = React.lazy(() => import('../pages/pageNotFound'));
+const PageNotFound = compose(withSuspense())(AsyncPageNotFound);
 // #endregion
 
 const MainRoutes = () => {
   return (
     <Switch>
       {/* public views: */}
-      <Route exact path="/" component={AsyncHome} />
-      {/* <Route path="/about" component={AsyncAbout} /> */}
+      <Route exact path="/" component={Home} />
+      <Route path="/about" component={About} />
       {/* private views: need user to be authenticated */}
-      {/* <PrivateRoute path="/protected" component={AsyncProtected} /> */}
-      {/* <Route component={AsyncPageNotFound} /> */}
+      <PrivateRoute path="/protected" component={Protected} />
+      <Route component={PageNotFound} />
     </Switch>
   );
 };