From 369ec4efd2fe7d256fab180cb5547fbcd5e3e9cf Mon Sep 17 00:00:00 2001
From: Neal Granger <neal@metalab.co>
Date: Thu, 22 Dec 2016 16:49:17 -0800
Subject: [PATCH] Remove unwanted props from connected component.

Prevent unwanted `relocation` specific props from getting passed down to the connected component.
---
 src/connect.js | 42 ++++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/connect.js b/src/connect.js
index ff1c06a..6e2f5e7 100644
--- a/src/connect.js
+++ b/src/connect.js
@@ -19,8 +19,10 @@ import {componentsShape, renderMapShape, getDisplayName} from './util';
 export default ({scope, ...defaultProps} = {}) => (WrappedComponent) => {
   class Connect extends Component {
     static propTypes = {
-      dispatch: PropTypes.func.isRequired,
-      ___relocation___: PropTypes.shape({
+      ___relocationDispatch___: {
+        removeComponent: PropTypes.func.isRequired,
+      },
+      ___relocationState___: PropTypes.shape({
         components: componentsShape.isRequired,
         renderMap: renderMapShape.isRequired,
       }).isRequired,
@@ -39,12 +41,9 @@ export default ({scope, ...defaultProps} = {}) => (WrappedComponent) => {
       this.context.router.push(path);
     }
 
-    removeComponent(id) {
-      return this.props.dispatch(removeComponent(id));
-    }
-
     render() {
-      const {components, renderMap} = this.props.___relocation___;
+      const {components, renderMap} = this.props.___relocationState___;
+      const {removeComponent} = this.props.___relocationDispatch___;
 
       const inRenderMap = (component) =>
         typeof renderMap[component.type] === 'function';
@@ -67,7 +66,7 @@ export default ({scope, ...defaultProps} = {}) => (WrappedComponent) => {
           // The component object does not have a `remove` property, or it has
           // a truthy value that is not a function. Either case indicates that
           // it should use the default remove handler.
-          removeHandler = () => this.removeComponent(component.id);
+          removeHandler = () => removeComponent(component.id);
         }
 
         let pathRemoveHandler = null;
@@ -119,8 +118,16 @@ export default ({scope, ...defaultProps} = {}) => (WrappedComponent) => {
         // Assign remove handler functions.
         .map(assignRemoveHandler);
 
+      /* eslint-disable no-unused-vars */
+      const {
+        ___relocationState___,
+        ___relocationDispatch___,
+        ...childProps,
+      } = this.props;
+      /* eslint-enable no-unused-vars */
+
       const mergedProps = {
-        ...this.props,
+        ...childProps,
         ...scope
           ? {[scope]: {components: currentComponents}}
           : {components: currentComponents},
@@ -145,14 +152,25 @@ export default ({scope, ...defaultProps} = {}) => (WrappedComponent) => {
       : props;
 
     return {
-      // Put everything in a ___relocation___ namespace to avoid possible
+      // Put everything in a ___relocationState___ namespace to avoid possible
       // conflict with existing props.
-      ___relocation___: {
+      ___relocationState___: {
         components: getMergedComponents(state, selectorProps),
         renderMap: components,
       },
     };
   };
 
-  return connect(mapState)(hoistStatics(Connect, WrappedComponent));
+  const mapDispatch = (dispatch) => ({
+      // Put everything in a ___relocationDispatch___ namespace to avoid
+      // possible conflict with existing props.
+    ___relocationDispatch___: {
+      removeComponent: (id) => dispatch(removeComponent(id)),
+    },
+  });
+
+  return connect(
+    mapState,
+    mapDispatch,
+  )(hoistStatics(Connect, WrappedComponent));
 };