From f6c8c35e14a262ca7ec042aa9be48a35dc1a6322 Mon Sep 17 00:00:00 2001
From: stephen grider <ste.grider@gmail.com>
Date: Sun, 5 Jul 2015 13:04:36 -0700
Subject: [PATCH] Flux - 11 - Fetching Data Naively

---
 imgur-client/package.json                  |  1 +
 imgur-client/src/components/topic-list.jsx | 24 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/imgur-client/package.json b/imgur-client/package.json
index 0b01ead..ff71a1c 100644
--- a/imgur-client/package.json
+++ b/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"
diff --git a/imgur-client/src/components/topic-list.jsx b/imgur-client/src/components/topic-list.jsx
index 0a4afc4..b5c83ac 100644
--- a/imgur-client/src/components/topic-list.jsx
+++ b/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>
+    });
   }
-})
+});