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"
}