Add pagination to Inbox

src/containers/InboxPage/InboxPage.css

@@ -68,3 +68,7 @@
   font-size: 14px;
   text-decoration: none;
 }
+
+.pagination {
+  margin: 0 1rem;
+}

src/containers/InboxPage/InboxPage.duck.js

@@ -1,6 +1,14 @@
 import { reverse, sortBy } from 'lodash';
+import { parse } from '../../util/urlHelpers';
 import { addEntities } from '../../ducks/sdk.duck';
 
+const sortedTransactions = txs =>
+  reverse(
+    sortBy(txs, tx => {
+      return tx.attributes ? tx.attributes.lastTransitionedAt : null;
+    })
+  );
+
 // ================ Action types ================ //
 
 export const FETCH_ORDERS_OR_SALES_REQUEST = 'app/InboxPage/FETCH_ORDERS_OR_SALES_REQUEST';
@@ -18,6 +26,7 @@ const entityRefs = entities =>
 const initialState = {
   fetchInProgress: false,
   fetchOrdersOrSalesError: null,
+  pagination: null,
   transactionRefs: [],
 };
 
@@ -26,8 +35,15 @@ export default function checkoutPageReducer(state = initialState, action = {}) {
   switch (type) {
     case FETCH_ORDERS_OR_SALES_REQUEST:
       return { ...state, fetchInProgress: true, fetchOrdersOrSalesError: null };
-    case FETCH_ORDERS_OR_SALES_SUCCESS:
-      return { ...state, fetchInProgress: false, transactionRefs: entityRefs(payload) };
+    case FETCH_ORDERS_OR_SALES_SUCCESS: {
+      const transactions = sortedTransactions(payload.data.data);
+      return {
+        ...state,
+        fetchInProgress: false,
+        transactionRefs: entityRefs(transactions),
+        pagination: payload.data.meta,
+      };
+    }
     case FETCH_ORDERS_OR_SALES_ERROR:
       console.error(payload); // eslint-disable-line
       return { ...state, fetchInProgress: false, fetchOrdersOrSalesError: payload };
@@ -40,9 +56,9 @@ export default function checkoutPageReducer(state = initialState, action = {}) {
 // ================ Action creators ================ //
 
 const fetchOrdersOrSalesRequest = () => ({ type: FETCH_ORDERS_OR_SALES_REQUEST });
-const fetchOrdersOrSalesSuccess = transactions => ({
+const fetchOrdersOrSalesSuccess = response => ({
   type: FETCH_ORDERS_OR_SALES_SUCCESS,
-  payload: transactions,
+  payload: response,
 });
 const fetchOrdersOrSalesError = e => ({
   type: FETCH_ORDERS_OR_SALES_ERROR,
@@ -52,14 +68,9 @@ const fetchOrdersOrSalesError = e => ({
 
 // ================ Thunks ================ //
 
-const sortedTransactions = txs =>
-  reverse(
-    sortBy(txs, tx => {
-      return tx.attributes ? tx.attributes.lastTransitionedAt : null;
-    })
-  );
+const INBOX_PAGE_SIZE = 10;
 
-export const loadData = params =>
+export const loadData = (params, search) =>
   (dispatch, getState, sdk) => {
     const { tab } = params;
 
@@ -75,17 +86,20 @@ export const loadData = params =>
 
     dispatch(fetchOrdersOrSalesRequest());
 
-    const queryParams = {
+    const { page = 1 } = parse(search);
+
+    const apiQueryParams = {
       only: onlyFilter,
       include: ['provider', 'customer'],
+      page,
+      per_page: INBOX_PAGE_SIZE,
     };
 
     return sdk.transactions
-      .query(queryParams)
+      .query(apiQueryParams)
       .then(response => {
-        const transactions = sortedTransactions(response.data.data);
         dispatch(addEntities(response));
-        dispatch(fetchOrdersOrSalesSuccess(transactions));
+        dispatch(fetchOrdersOrSalesSuccess(response));
         return response;
       })
       .catch(e => {

src/containers/InboxPage/InboxPage.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { PageLayout, NamedRedirect, NamedLink } from '../../components';
+import { PageLayout, NamedRedirect, NamedLink, PaginationLinks } from '../../components';
 import * as propTypes from '../../util/propTypes';
 import { getEntities } from '../../ducks/sdk.duck';
 import { loadData } from './InboxPage.duck';
@@ -82,7 +82,14 @@ InboxItem.propTypes = {
 };
 
 export const InboxPageComponent = props => {
-  const { fetchInProgress, fetchOrdersOrSalesError, transactions, intl, params } = props;
+  const {
+    fetchInProgress,
+    fetchOrdersOrSalesError,
+    pagination,
+    transactions,
+    intl,
+    params,
+  } = props;
   const { tab } = params;
 
   const validTab = tab === 'orders' || tab === 'sales';
@@ -116,6 +123,15 @@ export const InboxPageComponent = props => {
       </li>
     : null;
 
+  const pagingLinks = !fetchInProgress && pagination && pagination.totalPages !== 1
+    ? <PaginationLinks
+        className={css.pagination}
+        pageName="InboxPage"
+        pagePathParams={params}
+        pagination={pagination}
+      />
+    : null;
+
   return (
     <PageLayout title={title}>
       <h1 className={css.title}>
@@ -144,11 +160,12 @@ export const InboxPageComponent = props => {
         {!fetchInProgress ? transactions.map(toTxItem) : null}
         {noResults}
       </ul>
+      {pagingLinks}
     </PageLayout>
   );
 };
 
-InboxPageComponent.defaultProps = { fetchOrdersOrSalesError: null };
+InboxPageComponent.defaultProps = { fetchOrdersOrSalesError: null, pagination: null };
 
 InboxPageComponent.propTypes = {
   params: shape({
@@ -157,6 +174,7 @@ InboxPageComponent.propTypes = {
 
   fetchInProgress: bool.isRequired,
   fetchOrdersOrSalesError: instanceOf(Error),
+  pagination: propTypes.pagination,
   transactions: arrayOf(propTypes.transaction).isRequired,
 
   // from injectIntl
@@ -165,10 +183,11 @@ InboxPageComponent.propTypes = {
 
 const mapStateToProps = state => {
   const marketplaceData = state.data;
-  const { fetchInProgress, fetchOrdersOrSalesError, transactionRefs } = state.InboxPage;
+  const { fetchInProgress, fetchOrdersOrSalesError, pagination, transactionRefs } = state.InboxPage;
   return {
     fetchInProgress,
     fetchOrdersOrSalesError,
+    pagination,
     transactions: getEntities(marketplaceData, transactionRefs),
   };
 };