diff --git a/js/components/app_route_wrapper.js b/js/components/app_route_wrapper.js new file mode 100644 index 00000000..0abbcb32 --- /dev/null +++ b/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 ( +
+ {childrenWithProps} +
+ ); + } +}); + +export default AppRouteWrapper; diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js index 115f93f9..bf1ac2ec 100644 --- a/js/components/ascribe_app.js +++ b/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 (
-
+ {/* Routes are injected here */} - {childrenWithProps} -
+ {children} +