import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Route as PrimitiveRoute } from 'react-router-dom';
import { connect } from 'react-redux';

export const App = ({ routes }) => (
  <div className="app-container">
    { routes.map( ( route, i ) => ( <Route key={ i } { ...route } /> ) ) }
  </div>
);

App.propTypes = {
  routes: PropTypes.array
};

/**
 * Expands on the standard `Route` by exposing child routes via props.
 */
export const Route = ({ component, fetch, routes, ...route }) => (
  <PrimitiveRoute { ...route } render={ props => React.createElement( RouteNode, { fetch, match: props }, React.createElement( component, { ...props, fetch, routes }) ) } />
);

Route.propTypes = {
  component:  PropTypes.any,
  fetch:      PropTypes.func,
  routes:     PropTypes.array
};

export class RouteNodeComponent extends Component {
  static propTypes = {
    fetch:  PropTypes.func.isRequired
  }

  render() {
    return this.props.children;
  }

  componentDidMount() {
    this.props.fetch();
  }
}

export const RouteNode = connect(
  () => ({}),
  ( dispatch, { fetch, match } ) => ({
    fetch: () => ( fetch ? dispatch( fetch( match ) ) : match )
  })
)( RouteNodeComponent );

RouteNode.propTypes = {
  fetch:  PropTypes.func
};

@@ -378,16 +378,64 @@
 ray%0A%7D;%0A%0A
+export const NullComponent = () =%3E (%0A  null%0A);%0A%0A
 /**%0A * E
@@ -797,16 +797,27 @@
 ypes.any
+.isRequired
 ,%0A  fetc
@@ -866,32 +866,87 @@
 Types.array%0A%7D;%0A%0A
+Route.defaultProps = %7B%0A  component:  NullComponent%0A%7D;%0A%0A
 export class Rou

Support component-less routes.