POST and PUT on toggles works now, but needs a bit cleanup

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

@@ -7,7 +7,7 @@ const Feature = ({ onClick, name, enabled, strategies }) => (
   <tr>
     <td style={{ paddingTop: '1.5rem' }}><Switch onChange={onClick} checked={enabled} /></td>
     <td><a href="/edit">{name}</a></td>
-    <td>{strategies.map(s => `${s.name}, `)}</td>
+    <td>{strategies.map(s => s.name).join(', ')}</td>
     <td style={{ textAlign: 'right' }}>
       <FontIcon value="edit" />
       <FontIcon value="delete"  style={{ color: 'red' }} />

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

@@ -27,7 +27,7 @@ export default class FeatureList extends React.Component {
         const features = this.props.features.map(featureToggle =>
                 <Feature key={featureToggle.name}
                     {...featureToggle}
-                    onClick={() => onFeatureClick(featureToggle.name)}
+                    onClick={() => onFeatureClick(featureToggle)}
                 />
             );
 

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

@@ -1,9 +1,14 @@
-export const ADD_FEATURE_TOGGLE = 'ADD_FEATURE_TOGGLE';
+import { urls } from './urls';
-export const TOGGLE_FEATURE_TOGGLE = 'TOGGLE_FEATURE_TOGGLE';
+
-export const REQUEST_FEATURE_TOGGLES = 'REQUEST_FEATURE_TOGGLES';
+export const ADD_FEATURE_TOGGLE             = 'ADD_FEATURE_TOGGLE';
-export const RECEIVE_FEATURE_TOGGLES = 'RECEIVE_FEATURE_TOGGLES';
+export const UPDATE_FEATURE_TOGGLE          = 'UPDATE_FEATURE_TOGGLE';
-export const ERROR_RECEIVE_FEATURE_TOGGLES = 'ERROR_RECEIVE_FEATURE_TOGGLES';
+export const TOGGLE_FEATURE_TOGGLE          = 'TOGGLE_FEATURE_TOGGLE';
-export const ERROR_CREATING_FEATURE_TOGGLE = 'ERROR_CREATING_FEATURE_TOGGLE';
+export const REQUEST_FEATURE_TOGGLES        = 'REQUEST_FEATURE_TOGGLES';
+export const REQUEST_UPDATE_FEATURE_TOGGLES = 'REQUEST_UPDATE_FEATURE_TOGGLES';
+export const RECEIVE_FEATURE_TOGGLES        = 'RECEIVE_FEATURE_TOGGLES';
+export const ERROR_RECEIVE_FEATURE_TOGGLES  = 'ERROR_RECEIVE_FEATURE_TOGGLES';
+export const ERROR_CREATING_FEATURE_TOGGLE  = 'ERROR_CREATING_FEATURE_TOGGLE';
+export const ERROR_UPDATING_FEATURE_TOGGLE  = 'ERROR_UPDATING_FEATURE_TOGGLE';
 
 function addFeatureToggle (featureToggle) {
     return {
@@ -12,6 +17,13 @@ function addFeatureToggle (featureToggle) {
     };
 };
 
+function updateFeatureToggle (featureToggle) {
+    return {
+        type: UPDATE_FEATURE_TOGGLE,
+        featureToggle,
+    };
+};
+
 function errorCreatingFeatureToggle (statusCode) {
     return {
         type: ERROR_CREATING_FEATURE_TOGGLE,
@@ -20,10 +32,20 @@ function errorCreatingFeatureToggle (statusCode) {
     };
 }
 
-export const toggleFeature = (featureName) => ({
+function errorUpdatingFeatureToggle (statusCode) {
-    type: TOGGLE_FEATURE_TOGGLE,
+    return {
-    name: featureName,
+        type: ERROR_UPDATING_FEATURE_TOGGLE,
-});
+        statusCode,
+        receivedAt: Date.now(),
+    };
+}
+
+export function toggleFeature (featureToggle) {
+    return dispatch => {
+        const newValue = Object.assign({}, featureToggle, { enabled: !featureToggle.enabled });
+        dispatch(requestUpdateFeatureToggle(newValue));
+    };
+};
 
 
 function requestFeatureToggles () {
@@ -40,6 +62,12 @@ function receiveFeatureToggles (json) {
     };
 }
 
+function requestUpdateFeatureToggles () {
+    return {
+        type: REQUEST_UPDATE_FEATURE_TOGGLES,
+    };
+}
+
 function errorReceiveFeatureToggles (statusCode) {
     return {
         type: ERROR_RECEIVE_FEATURE_TOGGLES,
@@ -51,7 +79,7 @@ function errorReceiveFeatureToggles (statusCode) {
 export function fetchFeatureToggles () {
     return dispatch => {
         dispatch(requestFeatureToggles());
-        return fetch('/features')
+        return fetch(urls.features)
             .then(response => {
                 if (response.ok) {
                     return response.json();
@@ -66,16 +94,17 @@ export function fetchFeatureToggles () {
     };
 }
 
+const headers = {
+    'Accept': 'application/json',
+    'Content-Type': 'application/json',
+};
 
 export function createFeatureToggles (featureToggle) {
     return dispatch => {
-        dispatch(requestFeatureToggles());
+        dispatch(requestUpdateFeatureToggles());
-        return fetch('/features', {
+        return fetch(urls.features, {
             method: 'POST',
-            headers: {
+            headers,
-                'Accept': 'application/json',
-                'Content-Type': 'application/json',
-            },
             body: JSON.stringify(featureToggle),
         })
         .then(response => {
@@ -89,3 +118,24 @@ export function createFeatureToggles (featureToggle) {
         .catch(error => dispatch(errorCreatingFeatureToggle(error)));
     };
 }
+
+export function requestUpdateFeatureToggle (featureToggle) {
+    return dispatch => {
+        dispatch(requestUpdateFeatureToggles());
+        return fetch(`${urls.features}/${featureToggle.name}`, {
+            method: 'PUT',
+            headers,
+            body: JSON.stringify(featureToggle),
+        })
+        .then(response => {
+            if (!response.ok) {
+                let error = new Error('failed fetching');
+                error.status = response.status;
+                throw error;
+            }
+        })
+        .then(() => dispatch(updateFeatureToggle(featureToggle)))
+        .catch(error => dispatch(errorUpdatingFeatureToggle(error)));
+    };
+}
+

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

@@ -1,22 +1,18 @@
 import {
     ADD_FEATURE_TOGGLE,
-    TOGGLE_FEATURE_TOGGLE,
     RECEIVE_FEATURE_TOGGLES,
+    UPDATE_FEATURE_TOGGLE,
 } from './featureToggleActions';
 
 const feature = (state = {}, action) => {
     switch (action.type) {
         case ADD_FEATURE_TOGGLE:
             return action.featureToggle;
-        case TOGGLE_FEATURE_TOGGLE:
+        case UPDATE_FEATURE_TOGGLE:
-            if (state.name !== action.name) {
+            if (state.name !== action.featureToggle.name) {
                 return state;
             }
-
+            return action.featureToggle;
-            return Object.assign({}, state, {
-                enabled: !state.enabled,
-            });
-
         default:
             return state;
     }
@@ -29,7 +25,7 @@ const features = (state = [], action) => {
                 ...state,
                 feature(undefined, action),
             ];
-        case TOGGLE_FEATURE_TOGGLE:
+        case UPDATE_FEATURE_TOGGLE:
             return state.map(t =>
             feature(t, action)
         );

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

@@ -0,0 +1,6 @@
+export const urls = {
+    features: '/features',
+    strategies: '/strategies',
+    events: '/events',
+    archive: '/archive/features',
+};

packages/unleash-frontend-next/webpack.config.js

@@ -62,6 +62,14 @@ module.exports = {
                 target: 'http://localhost:4242',
                 secure: false,
             },
+            '/strategies': {
+                target: 'http://localhost:4242',
+                secure: false,
+            },
+            '/archive': {
+                target: 'http://localhost:4242',
+                secure: false,
+            },
         },
     },
 };