Show comments after click more

.gitignore

@@ -0,0 +1 @@
+.idea/

both/components/Feed/FeedContainer.jsx

@@ -43,7 +43,7 @@ this.FeedContainer = React.createClass({
   },
 
   // subscribe to a reactive stream of data from
-  // publication at:  server/publications/posts.js
+  // publication at:  server/publications/feed.js
   startMeteorSubscriptions() {
     var fields = this.state.fieldsNeeded;
     var postIds = this.data.postIds;

both/components/Feed/FeedList.jsx

@@ -1,7 +1,6 @@
 /*global FeedItem */
 
 class FeedList extends React.Component {
-  // TODO break out more button into comp
   render() {
     console.log("[FeedList] Rendering");
     return (
@@ -17,16 +16,14 @@ class FeedList extends React.Component {
             />;
           })
         }
-        <button className='more-btn'
-            onClick={this.props.incrementLimit}>
-          Load More
-        </button>
+        <MoreFeedItems incrementLimit={this.props.incrementLimit}/>
       </div>
     );
   }
 }
 FeedList.propTypes = {
-  comments: React.PropTypes.array,
+  incrementLimit: React.PropTypes.func,
+  postItems: React.PropTypes.array
 };
 
 this.FeedList = FeedList;

both/components/FeedItem/_FeedItem.scss

@@ -78,13 +78,3 @@
 
 }
 
-// TODO move to correct place
-.more-btn {
-  padding: 7px 15px;
-  margin: 10px 0 20px 200px; // FIXME
-  background-color: $primary;
-  color: #ffffff;
-  border: none;
-  cursor: pointer;
-}
-

both/components/MoreFeedItems/MoreFeedItems.jsx

@@ -0,0 +1,15 @@
+this.MoreFeedItems = React.createClass({
+  propTypes: {
+    incrementLimit: React.PropTypes.func
+  },
+  render() {
+    return (
+      <div className='more-feed'>
+        <button className='more-feed__more-btn'
+                onClick={this.props.incrementLimit}>
+          Load More
+        </button>
+      </div>
+    );
+  }
+});

both/components/MoreFeedItems/_MoreFeedItems.scss

@@ -0,0 +1,17 @@
+.more-feed {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+
+  &__more-btn {
+    padding: 7px 15px;
+    min-width: 20px;
+    margin-bottom: 13px;
+    background-color: $primary;
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+  }
+}

client/styles/_components.scss

@@ -4,3 +4,4 @@
 @import '../../both/components/ParamsExample/ParamsExample';
 @import '../../both/components/CommentItem/CommentItem';
 @import '../../both/components/Header/Header';
+@import '../../both/components/MoreFeedItems/MoreFeedItems';

server/publications/feed.js

@@ -1,6 +1,7 @@
 /*global Posts, Comments */
 
-var optional = Match.Optional;
+var optional = Match.Optional,
+    loadMoreStep = 5;
 
 Meteor.publish('feed', function(fields, limits, postIds) {
   check(limits, {posts: Number});
@@ -49,10 +50,21 @@ Meteor.publish('feed', function(fields, limits, postIds) {
   });
 
 
+  // current 'load more' postIds
+  var newPostIds = Posts.find({}, {
+                                  fields: {'_id': 1},
+                                  sort: {createdAt: -1},
+                                  limit: limits.posts,
+                                  skip: limits.posts - loadMoreStep}
+      ).map(function (post) {
+        return post._id;
+      });
+  postIds = _.union(postIds ? postIds : [], newPostIds);
+
   // returns Mongo Cursors
   return [
     Posts.find({}, {fields: fields.posts, sort: {createdAt: -1}, limit: limits.posts}),
-    Comments.find({postId: {$in: postIds ? postIds : []}}, {fields: fields.postComments})
+    Comments.find({postId: {$in: postIds}}, {fields: fields.postComments})
   ];
 });