API call using 'superagent'

Author: pietromcp

src/web-module/Controllers/ValuesController.cs

@@ -1,7 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
+using System.Collections.Generic;
 using Microsoft.AspNet.Mvc;
 
 namespace web_module.Controllers {

src/web-module/Gruntfile.js

@@ -1,4 +1,4 @@
-/// <binding AfterBuild='default' />
+/// <binding />
 var path = require('path');
 
 var vendorJs = ['jquery', 'bootstrap', 'react', 'react-dom', 'react-router', 'react-datepicker', 'flux', 'superagent', 'lodash', 'numeral', 'moment', 'moment/locale/it', 'moment/locale/fr', 'moment/locale/de', 'moment/locale/es', 'cookie', 'async'];

src/web-module/client/js/Content.jsx

@@ -1,6 +1,6 @@
 var React = require('react');
 var Hello = require('./Hello');
-var Values = require('./Values');
+var Values = require('./Values/ValuesList');
 module.exports = React.createClass({
 
     render: function () {

src/web-module/client/js/Values.jsx

@@ -0,0 +1,10 @@
+var sa = require('superagent');
+var store = require('./ValuesStore');
+
+module.exports = {
+    loadValues: function() {
+        sa.get('api/values').end(function(err, res) {
+            store.setValues(res.body);
+        });
+    }
+};

src/web-module/client/js/Values/ValuesActions.js

@@ -0,0 +1,38 @@
+var React = require('react');
+var store = require('./ValuesStore');
+var actions = require('./ValuesActions');
+
+var Value = React.createClass({
+    render: function () {
+        return <li>{this.props.val}</li>
+    }
+});
+
+module.exports = React.createClass({
+    getInitialState: function () {
+        return {
+            values: []
+        };
+    },
+    componentDidMount: function () {
+        this.unregister = store.watch(this.onStoreChange)
+        actions.loadValues();
+    },
+    onStoreChange: function (values) {
+        this.setState({
+            values: values
+        });
+    },
+    componentWillUnmount: function () {
+        if (this.unregister) {
+            this.unregister();
+        }
+    },
+    render: function () {
+        return <div className="values">
+            <ol>
+                {this.state.values.map(function (v) { return <Value val={v } />;})}
+            </ol>
+        </div>;
+    }
+});

src/web-module/client/js/Values/ValuesList.jsx

@@ -0,0 +1,26 @@
+var _values = [];
+var _subscribers = [];
+
+function setValues(values) {
+    _values = values;
+    _subscribers.forEach(function(sub) {
+        sub(_values);
+    });
+}
+
+function getValues() {
+    return _values;
+}
+
+function watch(subscriber) {
+    _subscribers.push(subscriber);
+    return function() {
+        _subscribers.splice(_subscribers.indexOf(subscriber), 1);
+    }
+}
+
+module.exports = {
+    getValues: getValues,
+    setValues: setValues,
+    watch: watch
+};