From 50d50c66eebe5aca9cc7d3bda36ca40eda9641e6 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Mon, 1 Feb 2016 14:48:44 +0100 Subject: [PATCH 1/4] Change `children` prop from react-router to only be a Element type MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Judging by https://github.com/rackt/react-router/blob/master/docs/API.md#children-1 and a few inspections in the code, as well as tests, the `children` prop injected into routes can only ever be a single React Element object. This allows us to easily get the active route of a child (if there is an active route) by querying the `children`’s route prop. --- js/components/app_base.js | 20 ++++++++++++------- js/components/ascribe_app.js | 11 ++++------ .../prize/portfolioreview/pr_app.js | 11 ++++------ .../prize/simple_prize/prize_app.js | 11 ++++------ js/components/whitelabel/wallet/wallet_app.js | 11 ++++------ js/routes.js | 10 +++++----- 6 files changed, 34 insertions(+), 40 deletions(-) diff --git a/js/components/app_base.js b/js/components/app_base.js index 044b984c..4b5d460e 100644 --- a/js/components/app_base.js +++ b/js/components/app_base.js @@ -15,14 +15,10 @@ export default function AppBase(App) { displayName: 'AppBase', propTypes: { + children: React.PropTypes.element.isRequired, history: React.PropTypes.object.isRequired, location: React.PropTypes.object.isRequired, - routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - - children: React.PropTypes.oneOfType([ - React.PropTypes.arrayOf(React.PropTypes.element), - React.PropTypes.element - ]) + routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired }, mixins: [History], @@ -42,10 +38,20 @@ export default function AppBase(App) { }, render() { + const { children } = this.props; + + // Get the currently active route of the app by using the injected route parameter + // on the currently active child route. + // Note that despite its name, this.props.children can only ever be a single + // React.PropTypes.element. + const activeRoute = children.props.route; + return (
-
+ diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js index 8999246e..0e28aa97 100644 --- a/js/components/ascribe_app.js +++ b/js/components/ascribe_app.js @@ -8,16 +8,13 @@ import Header from './header'; let AscribeApp = React.createClass({ propTypes: { - routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - - children: React.PropTypes.oneOfType([ - React.PropTypes.arrayOf(React.PropTypes.element), - React.PropTypes.element - ]) + activeRoute: React.PropTypes.object.isRequired, + children: React.PropTypes.element.isRequired, + routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired }, render() { - const { children, routes } = this.props; + const { activeRoute, children, routes } = this.props; return (
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js index 9637c167..65d20483 100644 --- a/js/components/whitelabel/prize/portfolioreview/pr_app.js +++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js @@ -18,13 +18,10 @@ import { getCookie } from '../../../../utils/fetch_api_utils'; let PRApp = React.createClass({ propTypes: { + activeRoute: React.PropTypes.object.isRequired, + children: React.PropTypes.element.isRequired, history: React.PropTypes.object.isRequired, - routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - - children: React.PropTypes.oneOfType([ - React.PropTypes.arrayOf(React.PropTypes.element), - React.PropTypes.element - ]) + routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired }, getInitialState() { @@ -59,7 +56,7 @@ let PRApp = React.createClass({ render() { - const { children, history, routes } = this.props; + const { activeRoute, children, history, routes } = this.props; const { currentUser } = this.state; const subdomain = getSubdomain(); diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js index e40e8dc8..8070e94d 100644 --- a/js/components/whitelabel/prize/simple_prize/prize_app.js +++ b/js/components/whitelabel/prize/simple_prize/prize_app.js @@ -12,17 +12,14 @@ import { getSubdomain } from '../../../../utils/general_utils'; let PrizeApp = React.createClass({ propTypes: { + activeRoute: React.PropTypes.object.isRequired, + children: React.PropTypes.element.isRequired, history: React.PropTypes.object.isRequired, - routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - - children: React.PropTypes.oneOfType([ - React.PropTypes.arrayOf(React.PropTypes.element), - React.PropTypes.element - ]) + routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired }, render() { - const { children, history, routes } = this.props; + const { activeRoute, children, history, routes } = this.props; const subdomain = getSubdomain(); // The second element of routes is always the active component object, where we can diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index 4735bdde..e9155c04 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/js/components/whitelabel/wallet/wallet_app.js @@ -11,17 +11,14 @@ import { getSubdomain } from '../../../utils/general_utils'; let WalletApp = React.createClass({ propTypes: { + activeRoute: React.PropTypes.object.isRequired, + children: React.PropTypes.element.isRequired, history: React.PropTypes.object.isRequired, - routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - - children: React.PropTypes.oneOfType([ - React.PropTypes.arrayOf(React.PropTypes.element), - React.PropTypes.element - ]) + routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired }, render() { - const { children, history, routes } = this.props; + const { activeRoute, children, history, routes } = this.props; const subdomain = getSubdomain(); // The second element of routes is always the active component object, where we can diff --git a/js/routes.js b/js/routes.js index 24df99c0..d7a1d0c4 100644 --- a/js/routes.js +++ b/js/routes.js @@ -6,7 +6,7 @@ import { Route } from 'react-router'; import getPrizeRoutes from './components/whitelabel/prize/prize_routes'; import getWalletRoutes from './components/whitelabel/wallet/wallet_routes'; -import App from './components/ascribe_app'; +import AscribeApp from './components/ascribe_app'; import PieceList from './components/piece_list'; import PieceContainer from './components/ascribe_detail/piece_container'; @@ -29,14 +29,14 @@ import { ProxyHandler, AuthRedirect } from './components/ascribe_routes/proxy_ha const COMMON_ROUTES = ( - + + headerTitle='+ NEW WORK' /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} /> + component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} /> From 8527627db08d22ddba8a34462a26f61bd873a99b Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Mon, 1 Feb 2016 14:49:48 +0100 Subject: [PATCH 2/4] Hide the footer if a route has the `hideFooter` attribute --- js/components/app_base.js | 2 -- js/components/ascribe_app.js | 2 ++ js/components/footer.js | 8 ++++++-- js/components/whitelabel/prize/portfolioreview/pr_app.js | 2 ++ js/components/whitelabel/prize/simple_prize/prize_app.js | 2 ++ js/components/whitelabel/wallet/wallet_app.js | 2 ++ 6 files changed, 14 insertions(+), 4 deletions(-) diff --git a/js/components/app_base.js b/js/components/app_base.js index 4b5d460e..de1aab71 100644 --- a/js/components/app_base.js +++ b/js/components/app_base.js @@ -4,7 +4,6 @@ import React from 'react'; import classNames from 'classnames'; import { History } from 'react-router'; -import Footer from './footer'; import GlobalNotification from './global_notification'; import AppConstants from '../constants/application_constants'; @@ -48,7 +47,6 @@ export default function AppBase(App) { return (
-
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js index 0e28aa97..737a35f5 100644 --- a/js/components/ascribe_app.js +++ b/js/components/ascribe_app.js @@ -3,6 +3,7 @@ import React from 'react'; import AppBase from './app_base'; +import Footer from './footer'; import Header from './header'; @@ -23,6 +24,7 @@ let AscribeApp = React.createClass({ {/* Routes are injected here */} {children}
+
); } diff --git a/js/components/footer.js b/js/components/footer.js index f2e35dfc..3010da4d 100644 --- a/js/components/footer.js +++ b/js/components/footer.js @@ -5,8 +5,12 @@ import React from 'react'; import { getLangText } from '../utils/lang_utils'; let Footer = React.createClass({ + propTypes: { + activeRoute: React.PropTypes.object.isRequired + }, + render() { - return ( + return !this.props.activeRoute.hideFooter ? (


@@ -24,7 +28,7 @@ let Footer = React.createClass({

- ); + ) : null; } }); diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js index 65d20483..8cd97d70 100644 --- a/js/components/whitelabel/prize/portfolioreview/pr_app.js +++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js @@ -10,6 +10,7 @@ import UserActions from '../../../../actions/user_actions'; import Hero from './components/pr_hero'; import AppBase from '../../../app_base'; +import Footer from '../../../footer'; import Header from '../../../header'; import { getSubdomain } from '../../../../utils/general_utils'; @@ -80,6 +81,7 @@ let PRApp = React.createClass({ {/* Routes are injected here */} {children}
+