chillu/app.js Secret

## app.js
import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router, Link } from 'react-router'

class RouteRegister {

  constructor(rootConfig) {
    this.childRoutes;
    this.routes = Object.assign({}, {
      path: '/',
      getChildRoutes: (location, callback) {
        callback(null, this.childRoutes);
      }
    }, rootConfig);
  }

  /**
   * Register a new child route at a point in the route hierarchy
   * defined by the "paths" argument. Requires all parent routes to
   * be registered already
   *
   * @see https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md
   * @param {array} paths
   * @param {Object} config A react-router <PlainRoute> config object
   */
  add(paths, config) {
    let current = this.routes;
    // Traverse into route hierarchy, ignoring the root element
    paths.forEach(path => {
      current = current.childRoutes.find(childRoute => childRoute.path == path);
    });

    // Ensure that every config has a childRoutes key for later traversal
    config = Object.assign({}, { childRoutes: [] }, config);

    // Add route at beginning of routes (higher precendence)
    // See https://github.com/reactjs/react-router/blob/master/docs/guides/RouteMatching.md
    current.childRoutes.unshift(config);
  }

  getRoutes() {
    return this.routes;
  }

}

const App = React.createClass({

  render() {
    return (
      <div>
        <ul>
          <li><Link to="/campaigns">Campaigns Index</Link></li>
          <li><Link to="/campaigns/gridfield">Campaigns GridField</Link></li>
          <li><Link to="/campaigns/undefined">Campaigns Undefined Link</Link></li>
        </ul>
        {this.props.children}
      </div>
    );
  }
})

const GridField = React.createClass({
  render() {
    return (
        <h2>GridField {this.props.title}</h2>
    );
  }
})

const FormBuilder = React.createClass({
  componentDidMount() {
    // Simulate <FormBuilder> XHR load
    setTimeout((() => {
      myRouteRegister.add(
        // Remove the "base" path and the "splat" at the end
        this.props.routes.slice(1,-1).map(route => route.path),
        { path: 'gridfield', component: GridField }
      );
      browserHistory.replace(this.props.location.pathname);
    }).bind(this), 1000);
  },
  render() {
    return (
      <div>
        <h3>Form Builder</h3>
        {this.props.children}
      </div>
    );
  }
})

const CampaignAdmin = React.createClass({
  render() {
    return (
      <div>
        <h1>CampaignAdmin</h1>
        {this.props.children}
      </div>
    );
  }
})

const CampaignAdminIndex = React.createClass({
  render() {
    return (
      <div>
        <h2>Index</h2>
        <FormBuilder {...this.props} />
      </div>
    );
  }
})

function appBoot() {
  myRouteRegister.add([], {
    path: 'campaigns',
    component: CampaignAdmin,
    indexRoute: { component: CampaignAdminIndex },
    childRoutes: [
      // Pseudo IndexRoute with full eager matching
      { path: '**', component: CampaignAdminIndex}
    ]
  });
  myRouteRegister.add([], {
    path: 'assets',
    component: CampaignAdmin,
    childRoutes: [
      // Pseudo IndexRoute with full eager matching
      { path: '**', component: CampaignAdminIndex}
    ]
  });
  render(
    <Router history={browserHistory} routes={myRouteRegister.getRoutes()} />,
    document.getElementById('example')
  );
}

const myRouteRegister = new RouteRegister({
  component: App,
});
appBoot();

## index.html
<!doctype html public "display of affection">
<title>Authentication Flow Example</title>
<base href="/auth-flow"/>
<link rel="stylesheet" href="/global.css"/>
<body>
<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Auth Flow</h1>
<div id="example"/>
<script src="/__build__/shared.js"></script>
<script src="/__build__/auth-flow.js"></script>
	import React from 'react'
	import { render } from 'react-dom'
	import { browserHistory, Router, Link } from 'react-router'

	class RouteRegister {

	constructor(rootConfig) {
	this.childRoutes;
	this.routes = Object.assign({}, {
	path: '/',
	getChildRoutes: (location, callback) {
	callback(null, this.childRoutes);
	}
	}, rootConfig);
	}

	/**
	* Register a new child route at a point in the route hierarchy
	* defined by the "paths" argument. Requires all parent routes to
	* be registered already
	*
	* @see https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md
	* @param {array} paths
	* @param {Object} config A react-router <PlainRoute> config object
	*/
	add(paths, config) {
	let current = this.routes;
	// Traverse into route hierarchy, ignoring the root element
	paths.forEach(path => {
	current = current.childRoutes.find(childRoute => childRoute.path == path);
	});

	// Ensure that every config has a childRoutes key for later traversal
	config = Object.assign({}, { childRoutes: [] }, config);

	// Add route at beginning of routes (higher precendence)
	// See https://github.com/reactjs/react-router/blob/master/docs/guides/RouteMatching.md
	current.childRoutes.unshift(config);
	}

	getRoutes() {
	return this.routes;
	}

	}

	const App = React.createClass({

	render() {
	return (
	<div>
	<ul>
	<li><Link to="/campaigns">Campaigns Index</Link></li>
	<li><Link to="/campaigns/gridfield">Campaigns GridField</Link></li>
	<li><Link to="/campaigns/undefined">Campaigns Undefined Link</Link></li>
	</ul>
	{this.props.children}
	</div>
	);
	}
	})

	const GridField = React.createClass({
	render() {
	return (
	<h2>GridField {this.props.title}</h2>
	);
	}
	})

	const FormBuilder = React.createClass({
	componentDidMount() {
	// Simulate <FormBuilder> XHR load
	setTimeout((() => {
	myRouteRegister.add(
	// Remove the "base" path and the "splat" at the end
	this.props.routes.slice(1,-1).map(route => route.path),
	{ path: 'gridfield', component: GridField }
	);
	browserHistory.replace(this.props.location.pathname);
	}).bind(this), 1000);
	},
	render() {
	return (
	<div>
	<h3>Form Builder</h3>
	{this.props.children}
	</div>
	);
	}
	})

	const CampaignAdmin = React.createClass({
	render() {
	return (
	<div>
	<h1>CampaignAdmin</h1>
	{this.props.children}
	</div>
	);
	}
	})

	const CampaignAdminIndex = React.createClass({
	render() {
	return (
	<div>
	<h2>Index</h2>
	<FormBuilder {...this.props} />
	</div>
	);
	}
	})

	function appBoot() {
	myRouteRegister.add([], {
	path: 'campaigns',
	component: CampaignAdmin,
	indexRoute: { component: CampaignAdminIndex },
	childRoutes: [
	// Pseudo IndexRoute with full eager matching
	{ path: '**', component: CampaignAdminIndex}
	]
	});
	myRouteRegister.add([], {
	path: 'assets',
	component: CampaignAdmin,
	childRoutes: [
	// Pseudo IndexRoute with full eager matching
	{ path: '**', component: CampaignAdminIndex}
	]
	});
	render(
	<Router history={browserHistory} routes={myRouteRegister.getRoutes()} />,
	document.getElementById('example')
	);
	}

	const myRouteRegister = new RouteRegister({
	component: App,
	});
	appBoot();
	<!doctype html public "display of affection">
	<title>Authentication Flow Example</title>
	<base href="/auth-flow"/>
	<link rel="stylesheet" href="/global.css"/>
	<body>
	<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Auth Flow</h1>
	<div id="example"/>
	<script src="/__build__/shared.js"></script>
	<script src="/__build__/auth-flow.js"></script>