From b573cb7cfd3492dc70a733f78f3708effdd7ad84 Mon Sep 17 00:00:00 2001
From: stephen grider <ste.grider@gmail.com>
Date: Sun, 5 Jul 2015 16:25:27 -0700
Subject: [PATCH] Flux - 28 - Fetching Single Records from a Store Continued

---
 imgur-client/src/actions.jsx                 |  3 ++-
 imgur-client/src/components/image-detail.jsx | 15 ++++++++++++---
 imgur-client/src/stores/image-store.jsx      | 12 ++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/imgur-client/src/actions.jsx b/imgur-client/src/actions.jsx
index 3bd24c1..47b2e03 100644
--- a/imgur-client/src/actions.jsx
+++ b/imgur-client/src/actions.jsx
@@ -2,5 +2,6 @@ var Reflux = require('reflux');
 
 module.exports = Reflux.createActions([
   'getTopics',
-  'getImages'
+  'getImages',
+  'getImage'
 ]);
diff --git a/imgur-client/src/components/image-detail.jsx b/imgur-client/src/components/image-detail.jsx
index 39146a4..0812530 100644
--- a/imgur-client/src/components/image-detail.jsx
+++ b/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)
     });
   }
 });
diff --git a/imgur-client/src/stores/image-store.jsx b/imgur-client/src/stores/image-store.jsx
index 961bd11..a4591bb 100644
--- a/imgur-client/src/stores/image-store.jsx
+++ b/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});