Add AppRouteWrapper to handle passing down props to routes

js/components/app_route_wrapper.js

@@ -0,0 +1,34 @@
+'use strict';
+
+import React from 'react';
+
+import { omitFromObject } from '../utils/general_utils';
+
+const AppRouteWrapper = React.createClass({
+    propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]).isRequired
+    },
+
+    render() {
+        const propsToPropagate = omitFromObject(this.props, ['children']);
+
+        let childrenWithProps = this.props.children;
+        // If there are more props given, propagate them into the child routes by cloning the routes
+        if (Object.keys(propsToPropagate).length) {
+            childrenWithProps = React.Children.map(this.props.children, (child) => {
+                return React.cloneElement(child, propsToPropagate);
+            });
+        }
+
+        return (
+            <div className="ascribe-body">
+                {childrenWithProps}
+            </div>
+        );
+    }
+});
+
+export default AppRouteWrapper;

js/components/ascribe_app.js

@@ -8,6 +8,7 @@ import UserStore from '../stores/user_store';
 import WhitelabelActions from '../actions/whitelabel_actions';
 import WhitelabelStore from '../stores/whitelabel_store';
 
+import AppRouteWrapper from './app_route_wrapper';
 import Header from './header';
 import Footer from './footer';
 import GlobalNotification from './global_notification';
@@ -52,21 +53,15 @@ let AscribeApp = React.createClass({
         const { children, routes } = this.props;
         const { currentUser, whitelabel } = this.state;
 
-        // Add the current user and whitelabel settings to all child routes
-        const childrenWithProps = React.Children.map(children, (child) => {
-            return React.cloneElement(child, {
-                currentUser,
-                whitelabel
-            });
-        });
-
         return (
             <div className="container ascribe-default-app">
                 <Header routes={routes} />
-                <div className="ascribe-body">
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
                     {/* Routes are injected here */}
-                    {childrenWithProps}
+                    {children}
-                </div>
+                </AppRouteWrapper>
                 <Footer />
                 <GlobalNotification />
                 <div id="modal" className="container"></div>