From 8a8f157841e356001058db58f0127f28edd0a1e5 Mon Sep 17 00:00:00 2001
From: Jari Bakken <jari@finn.no>
Date: Mon, 26 Jan 2015 12:47:26 +0100
Subject: [PATCH] Slugify tab anchors. Closes #77.

---
 public/js/app.jsx                | 8 ++++++--
 public/js/components/TabView.jsx | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/js/app.jsx b/public/js/app.jsx
index 7905d84703..3c9f8253da 100644
--- a/public/js/app.jsx
+++ b/public/js/app.jsx
@@ -8,19 +8,23 @@ var ArchiveFeatureComponent = React.createFactory(require('./components/feature/
 
 var tabPanes = [
     {
-        name: "Feature Toggles",
+        name: 'Feature Toggles',
+        slug: 'feature-toggles',
         content: new FeatureTogglesComponent({pollInterval: 5000})
     },
     {
-        name: "Strategies",
+        name: 'Strategies',
+        slug: 'strategies',
         content: new StrategiesComponent({})
     },
     {
         name: "Log",
+        slug: 'log',
         content: new LogEntriesComponent({})
     },
     {
         name: "Archive",
+        slug: 'archive',
         content: new ArchiveFeatureComponent({})
     }
 ];
diff --git a/public/js/components/TabView.jsx b/public/js/components/TabView.jsx
index 9211791405..614e2607d8 100644
--- a/public/js/components/TabView.jsx
+++ b/public/js/components/TabView.jsx
@@ -12,7 +12,7 @@ var TabView = React.createClass({
         if(userHash) {
             userHash = userHash.split("#")[1];
             this.props.tabPanes.forEach(function(pane) {
-                if(pane.name === userHash) {
+                if(pane.slug === userHash) {
                     activeTab = pane;
                 }
             }.bind(this));
@@ -28,8 +28,8 @@ var TabView = React.createClass({
     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.name}
+                <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>