From 02c638c37f61f46c0356af1574bd0cb9d61b19b4 Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Wed, 19 Apr 2017 11:32:17 +0300 Subject: [PATCH] Add pagination to Inbox --- src/containers/InboxPage/InboxPage.css | 4 ++ src/containers/InboxPage/InboxPage.duck.js | 44 ++++++++++++++-------- src/containers/InboxPage/InboxPage.js | 27 +++++++++++-- 3 files changed, 56 insertions(+), 19 deletions(-) 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), }; };