Flux - 11 - Fetching Data Naively

Author: StephenGrider

imgur-client/package.json

@@ -20,6 +20,7 @@
     "react": "^0.13.3",
     "react-router": "^1.0.0-beta2",
     "reactify": "^1.1.0",
+    "reflux": "^0.2.8",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^2.4.0",
     "whatwg-fetch": "^0.9.0"

imgur-client/src/components/topic-list.jsx

@@ -1,9 +1,31 @@
 var React = require('react');
+var Api = require('../utils/api');
 
 module.exports = React.createClass({
+  getInitialState: function() {
+    return {
+      topics: []
+    }
+  },
+  componentWillMount: function() {
+    Api.get('topics/defaults')
+      .then(function(data){
+        this.setState({
+          topics: data.data
+        })
+      }.bind(this));
+  },
   render: function() {
     return <div className="list-group">
       Topic List
+      {this.renderTopics()}
     </div>
+  },
+  renderTopics: function() {
+    return this.state.topics.map(function(topic){
+      return <li>
+        {topic}
+      </li>
+    });
   }
-})
+});