Extract MatchWithSubRoutes component

src/Routes.js

@@ -1,65 +1,8 @@
 import React, { PropTypes } from 'react';
-import { Match, Miss, Redirect } from 'react-router';
+import { Miss } from 'react-router';
 import { RouterProvider, RoutesProvider } from './components';
-import { NotFoundPage } from './containers';
-import routesConfiguration, { flattenRoutes, pathByRouteName } from './routesConfiguration';
-
-// Fake authentication module
-// An example from react-router v4 repository
-// This will be replaced once we have redux store and sdk
-export const fakeAuth = {
-  isAuthenticated: false,
-  authenticate(cb) {
-    // eslint-disable-next-line no-console
-    console.log('fakeAuth: authenticate');
-    this.isAuthenticated = true;
-    window.setTimeout(cb, 100); // fake async
-  },
-  signout(cb) {
-    // eslint-disable-next-line no-console
-    console.log('fakeAuth: signout');
-    this.isAuthenticated = false;
-    cb();
-    window.setTimeout(cb, 100); // weird bug if async?
-  },
-};
-
-// wrap `Match` and use this everywhere instead, then when
-// sub routes are added to any route it'll work
-// This will also check if route needs authentication.
-/* eslint-disable arrow-body-style */
-const MatchWithSubRoutes = props => {
-  const { auth, component: Component, ...rest } = props;
-  const isAuthenticated = auth && fakeAuth.isAuthenticated;
-  const canShowComponent = !auth || isAuthenticated;
-  return (
-    <Match
-      {...rest}
-      render={matchProps => {
-        return canShowComponent
-          ? <Component {...matchProps} />
-          : <Redirect
-              to={{
-                pathname: pathByRouteName('LogInPage', routesConfiguration, {}),
-                state: { from: matchProps.location },
-              }}
-            />;
-      }}
-    />
-  );
-};
-/* eslint-enable arrow-body-style */
-MatchWithSubRoutes.defaultProps = { auth: false, exactly: false };
-
-const { any, array, bool, func, node, oneOfType, string } = PropTypes;
-
-MatchWithSubRoutes.propTypes = {
-  pattern: string.isRequired,
-  auth: bool,
-  exactly: bool,
-  name: string.isRequired,
-  component: oneOfType([func, node]).isRequired,
-};
+import { NotFoundPage, MatchWithSubRoutes } from './containers';
+import { flattenRoutes } from './routesConfiguration';
 
 const Routes = props => {
   const flattenedRoutes = flattenRoutes(props.routes);
@@ -77,6 +20,8 @@ const Routes = props => {
   );
 };
 
+const { any, array } = PropTypes;
+
 Routes.propTypes = { router: any.isRequired, routes: array.isRequired };
 
 export default Routes;

src/containers/MatchWithSubRoutes/MatchWithSubRoutes.js

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Match, Redirect } from 'react-router';
+import routesConfiguration, { pathByRouteName } from '../../routesConfiguration';
+
+// wrap `Match` and use this everywhere instead, then when
+// sub routes are added to any route it'll work
+// This will also check if route needs authentication.
+/* eslint-disable arrow-body-style */
+const MatchWithSubRoutes = props => {
+  const { auth, component: Component, isAuthenticated, ...rest } = props;
+  const canShowComponent = !auth || isAuthenticated;
+  return (
+    <Match
+      {...rest}
+      render={matchProps => {
+        return canShowComponent
+          ? <Component {...matchProps} />
+          : <Redirect
+              to={{
+                pathname: pathByRouteName('LogInPage', routesConfiguration, {}),
+                state: { from: matchProps.location },
+              }}
+            />;
+      }}
+    />
+  );
+};
+/* eslint-enable arrow-body-style */
+MatchWithSubRoutes.defaultProps = { auth: false, exactly: false };
+
+const { bool, func, node, oneOfType, string } = PropTypes;
+
+MatchWithSubRoutes.propTypes = {
+  pattern: string.isRequired,
+  auth: bool,
+  exactly: bool,
+  name: string.isRequired,
+  component: oneOfType([func, node]).isRequired,
+  isAuthenticated: bool.isRequired,
+};
+
+const mapStateToProps = state => ({ isAuthenticated: state.Auth.isAuthenticated });
+
+export default connect(mapStateToProps)(MatchWithSubRoutes);

src/containers/index.js

@@ -10,6 +10,7 @@ import LandingPage from './LandingPage/LandingPage';
 import ListingPage from './ListingPage/ListingPage';
 import LoginForm from './LoginForm/LoginForm';
 import ManageListingsPage from './ManageListingsPage/ManageListingsPage';
+import MatchWithSubRoutes from './MatchWithSubRoutes/MatchWithSubRoutes';
 import NotFoundPage from './NotFoundPage/NotFoundPage';
 import OrderPage from './OrderPage/OrderPage';
 import PasswordChangePage from './PasswordChangePage/PasswordChangePage';
@@ -37,6 +38,7 @@ export {
   ListingPage,
   LoginForm,
   ManageListingsPage,
+  MatchWithSubRoutes,
   NotFoundPage,
   OrderPage,
   PasswordChangePage,