React and Meteor, creating a Facebook like 'wall'

I want to build a ‘wall’ similar to Facebook. It should loading new posts if the user scrolls down.

My main concern at this point is publication and subscriptions. Subscriptions, I get. I’ll just listen in on whatever the server returns.

However from the server, how do I limit what to send out? How do I accept a ‘page’ so to speak to multiply and skip posts?

Maybe you can use (or get ideas from) one of these: https://atmospherejs.com/?q=pagination.

The easiest way - use template.autorun and make template.subscription inside this autorun. This subscription have to depend of Session variable, wich will increment, when user scroll down. Publication accepts this limit and send new portion of topics/messages

Subscribe and pass limit, sort and filter params to the publication. If you want to have the params change, store limit, sort and filter in reactiveDict, and wrap your subscribe in an autorun. A good pattern is to make a template state container like this:

Template

Template.example.onCreated(function() {
   this.state = new ReactiveDict()

   this.state.set('postLimit', 5)

   this.autorun(() => this.subscribe('posts', this.state.get('postLimit')))
})

Template.example.events({
    'click .load-more'(event, instance) {
        event.preventDefault()
        instance.state.set('postLimit', instance.state.get('postLimit') + 5)
    }
})

Publication

Meteor.publish('posts', function(limit) {
    return Posts.find({}, {
        limit:limit
    })
}
```
you can do the exact same thing with sorting and filtering... Just add them to 'state', and pass them to the publication :wink:

if you want infinite scrolling instead of a click-event

you could, for example, add Semantic UI’s visibility-module

Template.example.onRendered(function() {
    var state = this.state
    this.$('.something-below-posts-idk-what-u-pick-lol').visibility({
        once:false,
        onBottomVisible:function() {
            state.set('postLimit', state.get('postLimit') + 5)
        }
    })
})

you get the idea :slight_smile: