Flux - 28 - Fetching Single Records from a Store Continued

imgur-client/src/actions.jsx

@@ -2,5 +2,6 @@ var Reflux = require('reflux');
 
 module.exports = Reflux.createActions([
   'getTopics',
-  'getImages'
+  'getImages',
+  'getImage'
 ]);

imgur-client/src/components/image-detail.jsx

@@ -1,19 +1,28 @@
 var React = require('react');
 var Reflux = require('reflux');
 var ImageStore = require('../stores/image-store');
+var Actions = require('../actions');
 
 module.exports = React.createClass({
   mixins: [
     Reflux.listenTo(ImageStore, 'onChange')
   ],
+  getInitialState: function() {
+    return {
+      image: null
+    }
+  },
+  componentWillMount: function() {
+    Actions.getImage(this.props.params.id);
+  },
   render: function() {
     return <div>
-      I am an image detail.
+      {this.state.image}
     </div>
   },
-  onChange: function(event, image) {
+  onChange: function() {
     this.setState({
-      image: image
+      image: ImageStore.find(this.props.params.id)
     });
   }
 });

imgur-client/src/stores/image-store.jsx

@@ -15,6 +15,18 @@ module.exports = Reflux.createStore({
         this.triggerChange();
       }.bind(this));
   },
+  getImage: function(id) {
+    Api.get('gallery/image/' + id)
+      .then(function(json){
+        if(this.images){
+          this.images.push(json.data);
+        } else {
+          this.images = [json.data];
+        }
+
+        this.triggerChange();
+      }.bind(this));
+  },
   find: function(id){
     var image = _.findWhere(this.images, {id: id});