• Introduction
• Setup
• Overview
• 1. Install the CLI
• 2. Create the App
• 3. Run the App
• 4. Setup the API
• Layout
• Overview
• 1. Install Bootstrap
• 2. Add Custom Styles
• 3. Add the Header
• Routing
• Overview
• 1. Convert Title to a Link
• 2. Add Feed to Routes
• Data Structure
• Overview
• 1. Add Mock Data to Feed
• 2. Create Tweet Component
• 3. Add Mock User Data
• Fetching Data
• Overview
• 1. Set API Location
• 2. Create Tweet Model
• Convention over Configuration
• 3. Connect Feed Component
• 4. Display Loading Message
• 5. Fetch User for Tweet
• Authentication
• Overview
• 1. Add Profile to Layout
• 2. Add Auth0 Config
• 3. Add Login Page
• 4. Redirect to Login
• 5. Add Callback Route
• 6. Add Logout Page
• 7. Fetch Current User
• 8. Save User to Context
• Server
• Overview
• 1. Clone the API Server
• 2. Parse the Collection
• 3. Parse the Model
• 4. Add Unauthorized Experience
• 5. Add Authorization Header
• Pagination
• Overview
• 1. Add Pagination Metadata
• 2. Paginate the Tweets
• 3. Add Pagination Links
• 4. Improve User Experience
• Infinite Scrolling
• Overview
• 1. Create Load More Button
• 2. Create Infinite Scrolling List
• 3. Convert the Feed
• Cleanup
• Overview
• 1. Remove Unnecessary Code
• Dialogs
• Overview
• 1. Add Create Button
• 2. Mounting Dialogs
• 3. Add Create Dialog
• 4. Simplify the Dialog
• 5. Generate Dialog via Hook
• 6. Add Edit Dialog
• 7. Add Delete Dialog
• Authorization
• Overview
• 1. Hide Edit Link
• 2. Hide Delete Link
• 3. Alternative Approach
• Optimistic Updates
• Overview
• 1. Freeze Pagination Data
• 2. Display New Tweets
• 3. Display Optimistic Tweets
• 4. Add Optimistic Values
• 5. Show Optimistic Visual Cues
• 6. Hide Deleted Tweets
• Normalization
• Overview
• 1. Normalize Tweet Response
• Filtering
• Overview
• 1. Add Filter
• 2. Display User Tweets
• WebSockets
• Overview
• 1. Add WebSocket Support
• 2. Send Client ID to API
• Publishing
• Overview
• 1. Create Production Build
• 2. Deploy to Production
• 3. Create Production Config
• 2. Redeploy to Production
• Next Steps
• Overview
• Misc
• Installing Node
• Completed Project

Step 1: Add Pagination Metadata

In this step we'll add pagination information to our collections, so components can tell how many pages of data are available.

You can view the finished code for this step by checking out the pagination.1 branch of the completed project.

Pagination Metadata

In order to implement pagination, we need to know some information about the tweets we're viewing, such as:

1. How many tweets exist
2. How many tweets are provided on each page

If we look at the API response from the server, we can see that that information is provided in the response as meta.paginate:

{
  data: [
    {...tweet...},
    {...tweet...}
  ],
  meta: {
    paginate: {
      currentPage: 1,
      nextPage: 2,
      prevPage: null,
      totalPages: 11,
      totalCount: 51,
      perPage: 5
    }
  }
}

What we want to do is make that information available to the application, so we can calculate the number of pages to display.

Add Pagination Data to Collections

To do that open up config/connections.js and find the parse() method for collections. Update that method to look like this:

// config/connections.js
...
  collections: {
    properties: {
      parse: function(response) {
        this.meta = {
          totalCount: response.meta.paginate.totalCount,
          perPage: response.meta.paginate.perPage
        };
        return response.data;
      }
    }
  }
...

Collections in Lore have a special property called meta. It defaults to an empty object, and anything you add to it will show up in the meta property of the data structure for collections.

By adding totalCount and perPage to meta, we've now made that data available to any component that receives a collection.

Visual Check-in

If everything went well, your application should now look like this. Exactly the same :)

Code Changes

Below is a list of files modified during this step.

config/connections.js

// config/connections.js
import auth from '../src/utils/auth';

export default {

  default: {

    apiRoot: 'http://localhost:1337',

    headers: function() {
      return {
        Authorization: `Bearer ${auth.getToken()}`
      };
    },

    collections: {
      properties: {
        parse: function(response) {
          this.meta = {
            totalCount: response.meta.paginate.totalCount,
            perPage: response.meta.paginate.perPage
          };
          return response.data;
        }
      }
    }

  }
};

Next Steps

Next step we're going to paginate the feed.