Flux - 18 - Rendering Topics in the Header

Author: StephenGrider

imgur-client/src/components/header.jsx

@@ -1,18 +1,46 @@
 var React = require('react');
 var Router = require('react-router');
 var Link = Router.Link;
+var Actions = require('../actions');
+var TopicStore = require('../stores/topic-store');
+var Reflux = require('reflux');
 
 module.exports = React.createClass({
+  mixins: [
+    Reflux.listenTo(TopicStore, 'onChange')
+  ],
+  getInitialState: function() {
+    return {
+      topics: []
+    }
+  },
+  componentWillMount: function() {
+    Actions.getTopics();
+  },
   render: function() {
     return <nav className="navbar navbar-default header">
       <div className="container-fluid">
         <Link to="/" className="navbar-brand">
           Imgur Browser
         </Link>
         <ul className="nav navbar-nav navbar-right">
-          <li><a>Topic #1</a></li>
+          {this.renderTopics()}
         </ul>
       </div>
     </nav>
+  },
+  renderTopics: function() {
+    return this.state.topics.slice(0, 4).map(function(topic){
+      return <li key={topic.id}>
+        <Link to={"topics/" + topic.id}>
+          {topic.name}
+        </Link>
+      </li>
+    });
+  },
+  onChange: function(event, topics) {
+    this.setState({
+      topics: topics
+    });
   }
 });

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

@@ -19,12 +19,11 @@ module.exports = React.createClass({
   },
   render: function() {
     return <div className="list-group">
-      Topic List
       {this.renderTopics()}
     </div>
   },
   renderTopics: function() {
-    return this.state.topics.map(function(topic){
+    return this.state.topics.slice(0, 4).map(function(topic){
       return <Link to={"topics/" + topic.id} className="list-group-item" key={topic.id}>
         <h4>{topic.name}</h4>
         <p>{topic.description}</p>