v0.5: Card Comments Pagination

rt-0.5-sshot-00

rt-0.5-sshot-01

rt-0.5-sshot-02

rt-0.5-sshot-03

rt-0.5-sshot-04

  • Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
  • Source code on GitHub

As can be watched in the above screen shots, pagination of the card comments was the focus of this iteration.

After the last comment(if the card has no comments the comments section is not displayed), if there are others comments to read, a ‘more’ button is displayed. When the user clicks on this button, it displays an activity indicator and when the next page data is loaded the new comments are appended to the ones already on page.
In the comments bar there are displayed the number of shown comments and the total of them.

Implementation Notes

The first page of comments comes down with the other card data. Successive pages are fetched when the more button is clicked via Trello API calls wrapped in a ‘promisified’ page iteration object(it has a .next() method but it is not an ES6 iterator object) provided by the data module.

This iterator is created in the Comments component getInitialState() method:

this.pageIterator = data.cardCommentPageIterator(this.props.cardId, this.props.pageSize, 2);

and it is then used to fetch successive pages:

this.pageIterator.next()
         .then(
            page => {
               this.setState({
                  items: this.state.items.concat(page),
                  loading: false
               });
            },
            (reason) => {
               console.log('cannot load comment page', reason);
               //throw reason
            }
         )
      ;
Advertisements

Published by

mgiulio

Front End Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s