Move to react-router.

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

package.json

@@ -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",

public/js/UnleashApp.jsx

@@ -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 LogEntriesComponent     = require('./components/log/LogEntriesComponent');
-var FeatureTogglesComponent = React.createFactory(require('./components/feature/FeatureTogglesComponent'));
+var FeatureTogglesComponent = require('./components/feature/FeatureTogglesComponent');
-var StrategiesComponent     = React.createFactory(require('./components/strategy/StrategiesComponent'));
+var StrategiesComponent     = require('./components/strategy/StrategiesComponent');
-var ArchiveFeatureComponent = React.createFactory(require('./components/feature/ArchiveFeatureComponent'));
+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;

public/js/components/Menu.jsx

@@ -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>

public/js/components/TabView.jsx

@@ -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;

webpack.config.js

@@ -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,