From dc328f28ca0ca9f905ce107e265074677d910617 Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Fri, 30 Sep 2016 15:09:26 +0200
Subject: [PATCH] fix some navigation styling #153

---
 packages/unleash-frontend-next/src/Navigation.jsx        | 5 +++--
 .../src/component/feature/AddFeatureToggle.jsx           | 9 +++++++--
 .../src/component/feature/FeatureList.jsx                | 5 ++++-
 packages/unleash-frontend-next/src/store/actions.js      | 4 ++--
 packages/unleash-frontend-next/src/style.scss            | 6 ++++++
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/unleash-frontend-next/src/Navigation.jsx b/packages/unleash-frontend-next/src/Navigation.jsx
index ee1e0fe610..cd752c52bb 100644
--- a/packages/unleash-frontend-next/src/Navigation.jsx
+++ b/packages/unleash-frontend-next/src/Navigation.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { ListSubHeader, List, ListItem, ListDivider } from 'react-toolbox';
+import style from './style';
 
 export default class UnleashNav extends Component {
     static contextTypes = {
@@ -9,10 +10,10 @@ export default class UnleashNav extends Component {
     render () {
         const createListItem = (path, caption) =>
             <ListItem to={this.context.router.createHref(path)} caption={caption}
-                className={this.context.router.isActive(path) ? 'active' : 'inactive'} />;
+                className={this.context.router.isActive(path) ? style.active : ''} />;
 
         return (
-                <List selectable ripple>
+                <List selectable ripple className={style.navigation}>
                     {createListItem('/features', 'Feature Toggles')}
                     {createListItem('/strategies', 'Strategies')}
                     {createListItem('/history', 'Event History')}
diff --git a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
index 528c89ecd0..4533c0dcf9 100644
--- a/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx
@@ -16,14 +16,19 @@ class AddFeatureToggle extends React.Component {
         };
     }
 
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
     onSubmit = (evt) => {
         evt.preventDefault();
-        this.props.dispatch(addFeatureToggle(this.state.name, this.state.enabled));
+        this.props.dispatch(addFeatureToggle(this.state.name));
+        this.context.router.push('/features');
     };
 
     handleChange = (key, value) => {
         const change = {};
-        change[name] = value;
+        change[key] = value;
 
         const newState = Object.assign({}, this.state, change);
         this.setState(newState);
diff --git a/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx b/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx
index 324f44ae96..4b5730755b 100644
--- a/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx
+++ b/packages/unleash-frontend-next/src/component/feature/FeatureList.jsx
@@ -15,7 +15,10 @@ export default class FeatureList extends React.Component {
     }
 
     componentDidMount () {
-        this.props.fetchFeatureToggles();
+        // TODO: only fetch from server if we don't know about any toggles.
+        if (this.props.features.length === 0) {
+            this.props.fetchFeatureToggles();
+        }
     }
 
     render () {
diff --git a/packages/unleash-frontend-next/src/store/actions.js b/packages/unleash-frontend-next/src/store/actions.js
index e55e6538b9..24c03fe643 100644
--- a/packages/unleash-frontend-next/src/store/actions.js
+++ b/packages/unleash-frontend-next/src/store/actions.js
@@ -5,12 +5,12 @@ export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES';
 export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
 
 export const addFeatureToggle = (featureName) => ({
-    type: 'ADD_FEATURE_TOGGLE',
+    type: ADD_FEATURE_TOGGLE,
     name: featureName,
 });
 
 export const toggleFeature = (featureName) => ({
-    type: 'TOGGLE_FEATURE_TOGGLE',
+    type: TOGGLE_FEATURE_TOGGLE,
     name: featureName,
 });
 
diff --git a/packages/unleash-frontend-next/src/style.scss b/packages/unleash-frontend-next/src/style.scss
index a2a9af46ad..06eaa15467 100644
--- a/packages/unleash-frontend-next/src/style.scss
+++ b/packages/unleash-frontend-next/src/style.scss
@@ -6,3 +6,9 @@
     top: 0;
     bottom: 0;
 }
+
+.navigation {
+    .active {
+        background-color: #EEE;
+    }
+}
\ No newline at end of file