More AddFeatureToggle #153

packages/unleash-frontend-next/src/component/feature/AddFeatureToggle.jsx

@@ -7,7 +7,17 @@ import { addFeatureToggle } from '../../store/actions';
 class AddFeatureToggle extends React.Component {
     constructor () {
         super();
-        this.state = { name: '', description: '', enabled: false };
+        this.state = {
+            featureToggle: {
+                name: '',
+                description: '',
+                enabled: false,
+                strategies: [
+                    { name: 'default' },
+                ],
+            },
+            showAddStrategy: false,
+        };
     }
 
     static propTypes () {
@@ -22,18 +32,31 @@ class AddFeatureToggle extends React.Component {
 
     onSubmit = (evt) => {
         evt.preventDefault();
-        this.props.dispatch(addFeatureToggle(this.state.name));
+        this.props.dispatch(addFeatureToggle(this.state.featureToggle));
         this.context.router.push('/features');
     };
 
+    addStrategy = (evt) => {
+        evt.preventDefault();
+        this.setState({ showAddStrategy: true });
+    }
+
     handleChange = (key, value) => {
         const change = {};
         change[key] = value;
+        const updatedFeatureToggle = Object.assign({}, this.state.featureToggle, change);
 
-        const newState = Object.assign({}, this.state, change);
-        this.setState(newState);
+        this.setState({ featureToggle: updatedFeatureToggle });
     };
 
+    renderAddStrategy () {
+        if (this.state.showAddStrategy) {
+            return <h4>Adding strat</h4>;
+        } else {
+            return <a onClick={this.addStrategy} href="#addStrategy">Add strategy..</a>;
+        }
+    }
+
     render () {
         return (
             <div>
@@ -44,19 +67,19 @@ class AddFeatureToggle extends React.Component {
                             label="Name"
                             name="name"
                             required
-                            value={this.state.name}
+                            value={this.state.featureToggle.name}
                             onChange={this.handleChange.bind(this, 'name')} />
                         <Input
                             type="text"
                             multiline label="Description"
                             required
-                            value={this.state.description}
+                            value={this.state.featureToggle.description}
                             onChange={this.handleChange.bind(this, 'description')} />
 
                         <br />
 
                         <Switch
-                            checked={this.state.enabled}
+                            checked={this.state.featureToggle.enabled}
                             label="Enabled"
                             onChange={this.handleChange.bind(this, 'enabled')} />
 
@@ -64,7 +87,8 @@ class AddFeatureToggle extends React.Component {
                     </section>
 
                     <section>
-                        <a href="#" onClick="">Add strategy..</a>
+                        <h3>Strategies</h3>
+                        {this.renderAddStrategy()}
                     </section>
 
                     <br />

packages/unleash-frontend-next/src/component/feature/AddStrategy.jsx

@@ -0,0 +1,53 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Button } from 'react-toolbox';
+
+
+class AddStrategy extends React.Component {
+    constructor () {
+        super();
+        this.state = {
+            name: '',
+            parameters: {},
+        };
+    }
+
+    static propTypes () {
+        return {
+            StrategyDefinitions: PropTypes.array.isRequired,
+        };
+    }
+
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
+    onSubmit = (evt) => {
+        evt.preventDefault();
+    };
+
+    addStrategy = (evt) => {
+        evt.preventDefault();
+    }
+
+    handleChange = (key, value) => {
+        const change = {};
+        change[key] = value;
+
+        const newState = Object.assign({}, this.state, change);
+        this.setState(newState);
+    };
+
+    render () {
+        return (
+            <div>
+                <form onSubmit={this.onSubmit}>
+                    New Strategy:
+                    <Button type="submit" raised primary label="Create" />
+                </form>
+            </div>
+        );
+    }
+}
+
+export default connect()(AddStrategy);

packages/unleash-frontend-next/src/store/actions.js

@@ -4,9 +4,9 @@ export const REQUEST_FEATURE_TOGGLES = 'REQUEST_FEATURE_TOGGLES';
 export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES';
 export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
 
-export const addFeatureToggle = (featureName) => ({
+export const addFeatureToggle = (featureToggle) => ({
     type: ADD_FEATURE_TOGGLE,
-    name: featureName,
+    featureToggle,
 });
 
 export const toggleFeature = (featureName) => ({

packages/unleash-frontend-next/src/store/features.js

@@ -7,10 +7,7 @@ import {
 const feature = (state = {}, action) => {
     switch (action.type) {
         case ADD_FEATURE_TOGGLE:
-            return {
-                name: action.name,
-                enabled: false,
-            };
+            return action.featureToggle;
         case TOGGLE_FEATURE_TOGGLE:
             if (state.name !== action.name) {
                 return state;