From 68409a0cebf103ec937e670665cddf1bc77c2bd8 Mon Sep 17 00:00:00 2001
From: Brenton Simpson <git@appsforartists.com>
Date: Wed, 8 Oct 2014 16:33:59 -0700
Subject: [PATCH] =?UTF-8?q?[added]=20<Routes=20handlerProps=20=3D=20{?=
 =?UTF-8?q?=E2=80=A6}=20>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Anything you pass into handlerProps will be passed as props into all
your handlers.

For instance:

  <Routes
      handlerProps =  {
                        {
                          "favoriteFruit": "banana",
                          "favoriteDrink": "smoothie"
                        }
                      }
  >
    <Route handler = { Trunk } >
      <Route handler = { Branch } >
        <Route handler = { Leaf } />
      </Route>
    </Route>
  </Routes>

if Leaf was the active route; Trunk, Branch, and Leaf would all be
called with favoriteFruit and favoriteDrink as props, like so:

  <Trunk
    favoriteFruit = "banana"
    favoriteDrink = "smoothie"
  >
    <Branch
      favoriteFruit = "banana"
      favoriteDrink = "smoothie"
    >
      <Leaf
        favoriteFruit = "banana"
        favoriteDrink = "smoothie"
      />
    </Branch>
  </Trunk>
---
 modules/components/Routes.js                | 36 +++++++++++++++++++--
 modules/components/__tests__/Routes-test.js | 27 ++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/modules/components/Routes.js b/modules/components/Routes.js
index db6df0b4b2..06cae7bd2f 100644
--- a/modules/components/Routes.js
+++ b/modules/components/Routes.js
@@ -30,7 +30,7 @@ function findMatches(path, routes, defaultRoute, notFoundRoute) {
 
     if (matches != null) {
       var rootParams = getRootMatch(matches).params;
-      
+
       params = route.props.paramNames.reduce(function (params, paramName) {
         params[paramName] = rootParams[paramName];
         return params;
@@ -225,7 +225,21 @@ function returnNull() {
   return null;
 }
 
-function computeHandlerProps(matches, query) {
+function computeHandlerProps(matches, query, userSuppliedHandlerProps) {
+  /**
+   * In the tree:
+   *
+   *   <Routes>
+   *     <Route handler = { require("./Trunk.jsx") } >
+   *       <Route handler = { require("./Branch.jsx") } >
+   *         <Route handler = { require("./Leaf.jsx") } />
+   *       </Route>
+   *     </Route>
+   *   </Routes>
+   *
+   * `computeHandlerProps` constructs the `props` that get passed into <Trunk>.
+   */
+
   var handler = returnNull;
   var props = {
     ref: null,
@@ -235,10 +249,26 @@ function computeHandlerProps(matches, query) {
     key: null
   };
 
+  /**
+   * Recursively passes `handler`s down the tree, effectively creating:
+   *
+   *   <Trunk activeRouteHandler = {
+   *     <Branch activeRouteHandler = {
+   *       <Leaf activeRouteHandler = {
+   *          () => null
+   *       }/>
+   *     }/>
+   *   }/>
+   */
   reversedArray(matches).forEach(function (match) {
     var route = match.route;
 
+    // DEPRECATED (unreserved props)
     props = Route.getUnreservedProps(route.props);
+    // TODO: remove the above line and move the following line
+    // into the parent scope (below `var props`)
+    props = copyProperties(props, userSuppliedHandlerProps);
+
 
     props.ref = '__activeRoute__';
     props.params = match.params;
@@ -412,7 +442,7 @@ var Routes = React.createClass({
    * Returns the props that should be used for the top-level route handler.
    */
   getHandlerProps: function () {
-    return computeHandlerProps(this.state.matches, this.state.activeQuery);
+    return computeHandlerProps(this.state.matches, this.state.activeQuery, this.props.handlerProps);
   },
 
   /**
diff --git a/modules/components/__tests__/Routes-test.js b/modules/components/__tests__/Routes-test.js
index ac647c5b30..59f86c5da1 100644
--- a/modules/components/__tests__/Routes-test.js
+++ b/modules/components/__tests__/Routes-test.js
@@ -69,4 +69,31 @@ describe('A Routes', function () {
     });
   });
 
+  describe('with `handlerProps`', function () {
+    var component;
+    var expectedResult = "passed in from handlerProps";
+
+
+    beforeEach(function () {
+      component = ReactTestUtils.renderIntoDocument(
+        Routes({ handlerProps: { echo: expectedResult } },
+          Route({ handler: NullHandler },
+            Route({ handler: NullHandler })
+          )
+        )
+      );
+    });
+
+    afterEach(function () {
+      React.unmountComponentAtNode(component.getDOMNode());
+    });
+
+    it('returns an array with the correct params', function () {
+      // component.props gives you <Routes>'s props
+      // component.render().props appears to give you the deepest child's props
+      // this is my first time unit testing a React component,
+      // so please show me the right way to do this.  =)
+      expect(component.render().props.echo).toEqual(expectedResult);
+    });
+  });
 });