Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
Code Issues Projects Releases Wiki Activity

Move to react-router.

Browse Source 
Replaced our home built tab-view with the react-router. This
makes routing super simple for us.

https://github.com/rackt/react-router/

relates to #95
This commit is contained in:
Ivar Conradi Østhus 2015-03-24 21:25:32 +01:00
parent 629535552c
commit 67c3c50b9b
5 changed files with 54 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -52,6 +52,7 @@
"nconf": "0.7.1",
"pg": "4.3.0",
"react": "^0.13.1",
"react-router": "^0.13.2",
"reflux": "^0.2.5",
"reqwest": "^1.1.4",
"webpack": "1.7.3",

82
public/js/UnleashApp.jsx
View File

@ -1,52 +1,56 @@
var React = require('react');
var TabView = require('./components/TabView');
var Menu = require('./components/Menu');
var UserStore = require('./stores/UserStore');
var Menu = require('./components/Menu');
var ErrorMessages = require('./components/ErrorMessages');
var initalizer = require('./stores/initalizer');
var LogEntriesComponent = React.createFactory(require('./components/log/LogEntriesComponent'));
var FeatureTogglesComponent = React.createFactory(require('./components/feature/FeatureTogglesComponent'));
var StrategiesComponent = React.createFactory(require('./components/strategy/StrategiesComponent'));
var ArchiveFeatureComponent = React.createFactory(require('./components/feature/ArchiveFeatureComponent'));
var LogEntriesComponent = require('./components/log/LogEntriesComponent');
var FeatureTogglesComponent = require('./components/feature/FeatureTogglesComponent');
var StrategiesComponent = require('./components/strategy/StrategiesComponent');
var ArchiveFeatureComponent = require('./components/feature/ArchiveFeatureComponent');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
UserStore.init();
var tabPanes = [
{
name: 'Feature Toggles',
slug: 'feature-toggles',
content: FeatureTogglesComponent
},
{
name: 'Strategies',
slug: 'strategies',
content: StrategiesComponent
},
{
name: "Log",
slug: 'log',
content: LogEntriesComponent
},
{
name: "Archive",
slug: 'archive',
content: ArchiveFeatureComponent
}
];
var UnleashApp = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
componentWillMount: function() {
initalizer(30);
},
render: function () {
return (
<div>
<Menu />
<Menu>
<Link to="features" className="nav-element centerify" activeClassName="nav-active">
<span className="topbar-nav-svg-caption caption showbydefault no-break">Features</span>
</Link>
<Link to="strategies" className="nav-element centerify" activeClassName="nav-active">
<span className="topbar-nav-svg-caption caption showbydefault no-break">Strategies</span>
</Link>
<Link to="log" className="nav-element centerify" activeClassName="nav-active">
<span className="topbar-nav-svg-caption caption showbydefault no-break">Log</span>
</Link>
<Link to="archive" className="nav-element centerify" activeClassName="nav-active">
<span className="topbar-nav-svg-caption caption showbydefault no-break">Archive</span>
</Link>
</Menu>
<div className="container">
<div className="page">
<ErrorMessages />
<TabView tabPanes={tabPanes} />
<div className="mod shadow mrn pan">
<div className="inner pan">
<div className="bd">
<RouteHandler/>
</div>
</div>
</div>
</div>
</div>
</div>
@ -54,4 +58,18 @@ var UnleashApp = React.createClass({
}
});
var routes = (
<Route name="app" path="/" handler={UnleashApp}>
<Route name="strategies" handler={StrategiesComponent}/>
<Route name="log" handler={LogEntriesComponent}/>
<Route name="archive" handler={ArchiveFeatureComponent}/>
<DefaultRoute name="features" handler={FeatureTogglesComponent}/>
</Route>
);
Router.run(routes, function (Handler) {
React.render(<Handler/>, document.getElementById('content'));
});
module.exports = UnleashApp;

3
public/js/components/Menu.jsx
View File

@ -10,7 +10,7 @@ var Menu = React.createClass({
<User />
</div>
<div className="nav-level1 h4">
<a href="" className="homelink pln">
<a href="#" className="homelink pln">
<span className="topbar-nav-svg-home">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
y5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MjcuNDExIiBoZWlnaHQ9IjE2OS4z
@ -50,6 +50,7 @@ var Menu = React.createClass({
unleash admin
</span>
</a>
{this.props.children}
</div>
</div>
</div>

62
public/js/components/TabView.jsx
View File

@ -1,62 +0,0 @@
var React = require('react');
var TabView = React.createClass({
getDefaultProps: function() {
return {tabPanes: []};
},
getInitialState: function() {
var activeTab = this.props.tabPanes[0];
var userHash = window.location.hash;
if(userHash) {
userHash = userHash.split("#")[1];
this.props.tabPanes.forEach(function(pane) {
if(pane.slug === userHash) {
activeTab = pane;
}
}.bind(this));
}
return {activeTab: activeTab};
},
onChangeTab: function(tabPane) {
this.setState({activeTab: tabPane});
},
render: function() {
var tabNodes = this.props.tabPanes.map(function (tabPane) {
return (
<li key={tabPane.name} className=
{tabPane.name === this.state.activeTab.name ? "active": ""}>
<a href={"#" + tabPane.slug}
onClick={this.onChangeTab.bind(this, tabPane)}>
{tabPane.name}
</a>
</li>
);
}.bind(this));
return (
<div>
<ul className="tabs mbn">
{tabNodes}
</ul>
<div className="tab-content">
<div className="active">
<div className="mod shadow mrn pan">
<div className="inner pan">
<div className="bd">
{new this.state.activeTab.content()}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
});
module.exports = TabView;

2
webpack.config.js
View File

@ -7,7 +7,7 @@ var js_root = path.join(path.join(root, 'public'), 'js');
module.exports = {
context: js_root,
entry: 'app',
entry: 'UnleashApp',
output: {
path: js_root,