diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css
index fd36b8b7..d0db0e9f 100644
--- a/src/containers/InboxPage/InboxPage.css
+++ b/src/containers/InboxPage/InboxPage.css
@@ -68,3 +68,7 @@
font-size: 14px;
text-decoration: none;
}
+
+.pagination {
+ margin: 0 1rem;
+}
diff --git a/src/containers/InboxPage/InboxPage.duck.js b/src/containers/InboxPage/InboxPage.duck.js
index cccaf4c4..aa0dbbec 100644
--- a/src/containers/InboxPage/InboxPage.duck.js
+++ b/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 => {
diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js
index 0adbe3b0..83a5c69a 100644
--- a/src/containers/InboxPage/InboxPage.js
+++ b/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 => {
: null;
+ const pagingLinks = !fetchInProgress && pagination && pagination.totalPages !== 1
+ ?
+ : null;
+
return (
@@ -144,11 +160,12 @@ export const InboxPageComponent = props => {
{!fetchInProgress ? transactions.map(toTxItem) : null}
{noResults}
+ {pagingLinks}
);
};
-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),
};
};