Skip to content

Instantly share code, notes, and snippets.

@chillu

chillu/app.js Secret

Last active June 20, 2016 02:41
Show Gist options
  • Save chillu/b1cdda9b49d98a257aae1ba8cd4d174b to your computer and use it in GitHub Desktop.
Save chillu/b1cdda9b49d98a257aae1ba8cd4d174b to your computer and use it in GitHub Desktop.
SS4 react-router PoC
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment