Extract into a FeatureStore

unleash-server/public/js/components/ErrorMessages.jsx

@@ -6,8 +6,8 @@ var ErrorMessages = React.createClass({
             return <div/>;
         }
 
-        var errorNodes = this.props.errors.map(function(e) {
+        var errorNodes = this.props.errors.map(function(e, i) {
-            return (<li key={e} className="largetext">{e}</li>);
+            return (<li key={e + i} className="largetext">{e}</li>);
         });
 
         return (

unleash-server/public/js/components/Unleash.jsx

@@ -1,9 +1,9 @@
 var React         = require('react');
-var reqwest       = require('reqwest');
 var Timer         = require('../utils/Timer');
 var Menu          = require('./Menu');
 var ErrorMessages = require('./ErrorMessages');
 var FeatureList   = require('./FeatureList');
+var FeatureStore  = require('../stores/FeatureStore');
 
 var Unleash = React.createClass({
     getInitialState: function() {
@@ -11,24 +11,22 @@ var Unleash = React.createClass({
             savedFeatures: [],
             unsavedFeatures: [],
             errors: [],
-            timer: null
+            featurePoller: new Timer(this.loadFeaturesFromServer, this.props.pollInterval),
+            featureStore: new FeatureStore()
         };
     },
 
     componentDidMount: function () {
         this.loadFeaturesFromServer();
-        this.state.timer = new Timer(this.loadFeaturesFromServer, this.props.pollInterval);
+        this.startFeaturePoller();
-        this.state.timer.start();
     },
 
     componentWillUnmount: function () {
-        if (this.state.timer != null) {
+        this.stopFeaturePoller();
-            this.state.timer.stop();
-        }
     },
 
     loadFeaturesFromServer: function () {
-        reqwest('features').then(this.setFeatures, this.handleError);
+        this.state.featureStore.getFeatures().then(this.setFeatures).catch(this.handleError);
     },
 
     setFeatures: function (data) {
@@ -37,6 +35,7 @@ var Unleash = React.createClass({
 
     handleError: function (error) {
         this.state.errors.push(error);
+        this.forceUpdate();
     },
 
     updateFeature: function (changeRequest) {
@@ -48,18 +47,20 @@ var Unleash = React.createClass({
         });
 
         this.setState({features: newFeatures});
-        this.state.timer.stop();
+        this.stopFeaturePoller();
+        this.state.featureStore.updateFeature(changeRequest)
+          .then(this.startFeaturePoller)
+          .catch(this.handleError);
+    },
 
-        reqwest({
+    startFeaturePoller: function () {
-            url: 'features/' + changeRequest.name,
+        this.state.featurePoller.start();
-            method: 'patch',
+    },
-            type: 'json',
+
-            contentType: 'application/json',
+    stopFeaturePoller: function () {
-            data: JSON.stringify(changeRequest)
+        if (this.state.featurePoller != null) {
-        }).then(function() {
+            this.state.featurePoller.stop();
-            // all good
+        }
-            this.state.timer.start();
-        }.bind(this), this.handleError);
     },
 
     createFeature: function (feature) {
@@ -76,15 +77,9 @@ var Unleash = React.createClass({
 
         this.setState({unsavedFeatures: unsaved});
 
-        reqwest({
+        this.state.featureStore.createFeature(feature)
-            url: 'features',
+          .then(function(r) { console.log(r.statusText); }.bind(this))
-            method: 'post',
+          .catch(this.handleError);
-            type: 'json',
-            contentType: 'application/json',
-            data: JSON.stringify(feature)
-        }).then(function(r) {
-            console.log(r.statusText);
-        }.bind(this), this.handleError);
     },
 
     newFeature: function() {

unleash-server/public/js/stores/FeatureStore.js

@@ -0,0 +1,39 @@
+var reqwest = require('reqwest');
+
+var FeatureStore = function () {
+};
+
+FeatureStore.TYPE         = 'json';
+FeatureStore.CONTENT_TYPE = 'application/json';
+
+FeatureStore.prototype = {
+    updateFeature: function (changeRequest) {
+        return reqwest({
+            url: 'features/' + changeRequest.name,
+            method: 'patch',
+            type: FeatureStore.TYPE,
+            contentType: FeatureStore.CONTENT_TYPE,
+            data: JSON.stringify(changeRequest)
+        });
+    },
+
+    createFeature: function (feature) {
+        return reqwest({
+            url: 'features',
+            method: 'post',
+            type: FeatureStore.TYPE,
+            contentType: FeatureStore.CONTENT_TYPE,
+            data: JSON.stringify(feature)
+        });
+    },
+
+    getFeatures: function () {
+        return reqwest({
+            url: 'features',
+            method: 'get',
+            type: FeatureStore.TYPE
+        });
+    }
+};
+
+module.exports = FeatureStore;