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
- I am an image detail. + {this.state.image}
}, - 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});