SearchResultPanel is responsible for showing listings and pagination buttons

src/components/Button/Button.css

@@ -23,6 +23,7 @@
     background-color: #ccc;
   }
   &:disabled {
+    background-color: #ddd;
     cursor: auto;
   }
 }

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);
+}

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 => (
-  <div>
-    {props.children}
-    <div className={css.navigation}>
-      <NamedLink className={css.button} name="SearchFiltersPage">Filters</NamedLink>
-      <NamedLink className={css.button} name="SearchMapPage">Map</NamedLink>
+const SearchResultsPanel = props => {
+  const { currencyConfig, listings, onNextPage, onPreviousPage } = props;
+  const pagination = onNextPage || onPreviousPage
+    ? <div className={css.pagination}>
+        <Button
+          onClick={() => onPreviousPage()}
+          disabled={!onPreviousPage}
+          className={css.prevPage}
+        >
+          <FormattedMessage id="SearchResultsPanel.previousPage" />
+        </Button>
+        <Button onClick={() => onNextPage()} disabled={!onNextPage} className={css.nextPage}>
+          <FormattedMessage id="SearchResultsPanel.nextPage" />
+        </Button>
+      </div>
+    : null;
+
+  return (
+    <div>
+      {listings.map(l => (
+        <ListingCard key={l.id.uuid} listing={l} currencyConfig={currencyConfig} />
+      ))}
+      {pagination}
     </div>
-  </div>
-);
+  );
+};
 
-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;

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(<SearchResultsPanel />);
+    const props = {
+      currencyConfig,
+      intl: fakeIntl,
+    };
+    const tree = renderShallow(<SearchResultsPanel {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });

src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap

@@ -1,14 +1 @@
-exports[`SearchResultsPanel matches snapshot 1`] = `
-<div>
-  <div>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      name="SearchFiltersPage">
-      Filters
-    </withFlattenedRoutes(withRouter(NamedLink))>
-    <withFlattenedRoutes(withRouter(NamedLink))
-      name="SearchMapPage">
-      Map
-    </withFlattenedRoutes(withRouter(NamedLink))>
-  </div>
-</div>
-`;
+exports[`SearchResultsPanel matches snapshot 1`] = `<div />`;

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