diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index 3944cc4a..05c3b15c 100644 --- a/src/components/Button/Button.css +++ b/src/components/Button/Button.css @@ -23,6 +23,7 @@ background-color: #ccc; } &:disabled { + background-color: #ddd; cursor: auto; } } diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.css b/src/components/SearchResultsPanel/SearchResultsPanel.css index d811c984..83f318da 100644 --- a/src/components/SearchResultsPanel/SearchResultsPanel.css +++ b/src/components/SearchResultsPanel/SearchResultsPanel.css @@ -3,7 +3,7 @@ position: fixed; bottom: 15px; left: 50%; - margin-left: -100px; + margin-left: -104px; } .button { @@ -13,7 +13,7 @@ text-decoration: none; font-size: 1.4rem; padding: 0.5rem; - margin: 1rem 0.1rem; + margin: 1rem 2px; color: #fff; background-color: #9B9B9B; cursor: pointer; @@ -22,3 +22,14 @@ background-color: #888; } } + +.pagination { + display: flex; + justify-content: space-between; + margin: 0 1rem 6rem 1rem; +} + +.nextPage, +.prevPage { + flex-basis: calc(50% - 0.5rem); +} diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.js b/src/components/SearchResultsPanel/SearchResultsPanel.js index ca05eb5e..ccc14d4a 100644 --- a/src/components/SearchResultsPanel/SearchResultsPanel.js +++ b/src/components/SearchResultsPanel/SearchResultsPanel.js @@ -1,21 +1,49 @@ import React, { PropTypes } from 'react'; -import { NamedLink } from '../../components'; +import { FormattedMessage } from 'react-intl'; +import * as propTypes from '../../util/propTypes'; +import { Button, ListingCard } from '../../components'; import css from './SearchResultsPanel.css'; -const SearchResultsPanel = props => ( -
- {props.children} -
- Filters - Map +const SearchResultsPanel = props => { + const { currencyConfig, listings, onNextPage, onPreviousPage } = props; + const pagination = onNextPage || onPreviousPage + ?
+ + +
+ : null; + + return ( +
+ {listings.map(l => ( + + ))} + {pagination}
-
-); + ); +}; -SearchResultsPanel.defaultProps = { children: null }; +SearchResultsPanel.defaultProps = { + listings: [], + onNextPage: null, + onPreviousPage: null, +}; -const { any } = PropTypes; +const { array, func } = PropTypes; -SearchResultsPanel.propTypes = { children: any }; +SearchResultsPanel.propTypes = { + currencyConfig: propTypes.currencyConfig.isRequired, + listings: array, + onNextPage: func, + onPreviousPage: func, +}; export default SearchResultsPanel; diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.test.js b/src/components/SearchResultsPanel/SearchResultsPanel.test.js index 72d1d372..5f07fa36 100644 --- a/src/components/SearchResultsPanel/SearchResultsPanel.test.js +++ b/src/components/SearchResultsPanel/SearchResultsPanel.test.js @@ -1,10 +1,15 @@ import React from 'react'; -import { renderShallow } from '../../util/test-helpers'; +import { currencyConfig } from '../../util/test-data'; +import { fakeIntl, renderShallow } from '../../util/test-helpers'; import SearchResultsPanel from './SearchResultsPanel'; describe('SearchResultsPanel', () => { it('matches snapshot', () => { - const tree = renderShallow(); + const props = { + currencyConfig, + intl: fakeIntl, + }; + const tree = renderShallow(); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap b/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap index 45775d0b..a6d3477a 100644 --- a/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap +++ b/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap @@ -1,14 +1 @@ -exports[`SearchResultsPanel matches snapshot 1`] = ` -
-
- - Filters - - - Map - -
-
-`; +exports[`SearchResultsPanel matches snapshot 1`] = `
`; diff --git a/src/translations/en.json b/src/translations/en.json index 821b5443..57bf8063 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -22,5 +22,7 @@ "SearchPage.searchError": "Search failed. Please try again.", "SearchPage.foundResults": "{count, number} {count, plural, one {listing} other {listings}} found.", "SearchPage.noResults": "Could not find any listings.", - "SearchPage.loadingResults": "Loading search results..." + "SearchPage.loadingResults": "Loading search results...", + "SearchResultsPanel.previousPage": "Previous page", + "SearchResultsPanel.nextPage": "Next page" }