Flux - 23 - Filtering Image Data

Author: StephenGrider

imgur-client/package.json

@@ -16,6 +16,7 @@
     "gulp-server-livereload": "^1.3.0",
     "gulp-util": "^3.0.4",
     "gulp-watch": "^4.2.4",
+    "lodash": "^3.10.0",
     "node-notifier": "^4.2.1",
     "react": "^0.13.3",
     "react-router": "^1.0.0-beta2",

imgur-client/sass/image-preview.scss

@@ -0,0 +1,9 @@
+.image-preview {
+  display: inline-block;
+
+  img {
+    height: 200px;
+    width: 200px;
+    display: inline-block;
+  }
+}

imgur-client/sass/topic.scss

@@ -0,0 +1,3 @@
+.topic {
+  text-align: center;
+}

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

@@ -2,7 +2,7 @@ var React = require('react');
 
 module.exports = React.createClass({
   render: function() {
-    return <div>
+    return <div className="image-preview">
       {this.image()}
     </div>
   },

imgur-client/src/components/topic.jsx

@@ -20,7 +20,7 @@ module.exports = React.createClass({
     Actions.getImages(nextProps.params.id);
   },
   render: function() {
-    return <div>
+    return <div className="topic">
       {this.renderImages()}
     </div>
   },

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

@@ -1,13 +1,17 @@
 var Reflux = require('reflux');
 var Api = require('../utils/api');
 var Actions = require('../actions');
+var _ = require('lodash');
 
 module.exports = Reflux.createStore({
   listenables: [Actions],
   getImages: function(topicId){
     Api.get('topics/' + topicId)
       .then(function(json){
-        this.images = json.data;
+        this.images = _.reject(json.data, function(image) {
+          return image.is_album
+        });
+
         this.triggerChange();
       }.bind(this));
   },