add pagination component

client/src/components/molecules/Pagination.module.scss

@@ -0,0 +1,43 @@
+@import '../../styles/variables';
+
+.pagination {
+    display: flex;
+    margin-top: $spacer * 2;
+    margin-bottom: $spacer;
+    justify-content: center;
+
+    > div {
+        &:first-child {
+            margin-right: $spacer;
+        }
+
+        &:last-child {
+            margin-left: $spacer;
+            text-align: right;
+        }
+    }
+}
+
+.number {
+    text-align: center;
+    width: 2rem;
+    height: 2rem;
+    line-height: 1.7;
+    display: inline-block;
+    border-radius: 50%;
+    border: 1px solid transparent;
+
+    &:hover,
+    &:focus {
+        background: rgba(255, 255, 255, .3);
+        border-color: $brand-grey;
+    }
+}
+
+.current {
+    composes: number;
+    cursor: default;
+    pointer-events: none;
+    border: 1px solid $brand-grey;
+    color: $brand-grey-light;
+}

client/src/components/molecules/Pagination.tsx

@@ -0,0 +1,66 @@
+import React, { PureComponent } from 'react'
+import Button from '../atoms/Button'
+import styles from './Pagination.module.scss'
+
+const PageNumber = ({
+    i,
+    current
+}: {
+    i: number
+    current: boolean
+    onClick: any
+}) => (
+    <Button link className={current ? styles.current : styles.number}>
+        {`${i + 1}`}
+    </Button>
+)
+
+const PrevNext = ({ prevPage }: { prevPage?: number; onClick: any }) => (
+    <Button link>{prevPage ? '←' : '→'}</Button>
+)
+
+export default class Pagination extends PureComponent<{
+    currentPage: number
+    totalPages: number
+    prevPage?: number
+    nextPage?: number
+    setPage(page: number): void
+}> {
+    public render() {
+        const {
+            currentPage,
+            totalPages,
+            prevPage,
+            nextPage,
+            setPage
+        } = this.props
+        const isFirst = currentPage === 1
+        const isLast = currentPage === totalPages
+
+        return nextPage && nextPage > 1 ? (
+            <div className={styles.pagination}>
+                <div>
+                    {!isFirst && (
+                        <PrevNext
+                            prevPage={prevPage}
+                            onClick={setPage(currentPage - 1)}
+                        />
+                    )}
+                </div>
+                <div>
+                    {Array.from({ length: totalPages }, (_, i) => (
+                        <PageNumber
+                            key={`pagination-number${i + 1}`}
+                            i={i}
+                            current={currentPage === i + 1}
+                            onClick={setPage(i + 1)}
+                        />
+                    ))}
+                </div>
+                <div>
+                    {!isLast && <PrevNext onClick={setPage(currentPage + 1)} />}
+                </div>
+            </div>
+        ) : null
+    }
+}

client/src/routes/Search.tsx

@@ -5,6 +5,7 @@ import Spinner from '../components/atoms/Spinner'
 import Route from '../components/templates/Route'
 import { User } from '../context/User'
 import Asset from '../components/molecules/Asset'
+import Pagination from '../components/molecules/Pagination'
 import styles from './Search.module.scss'
 
 interface SearchProps {
@@ -14,15 +15,17 @@ interface SearchProps {
 
 interface SearchState {
     results: any[]
+    totalPages: number
+    currentPage: number
     isLoading: boolean
-    page: number
 }
 
 export default class Search extends PureComponent<SearchProps, SearchState> {
     public state = {
         results: [],
-        isLoading: true,
+        totalPages: 1,
-        page: 0
+        currentPage: 1,
+        isLoading: true
     }
 
     private readonly searchTerm = queryString.parse(this.props.location.search)
@@ -35,7 +38,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
     private searchAssets = async () => {
         const searchQuery = {
             offset: 100,
-            page: this.state.page,
+            page: this.state.currentPage,
             query: {
                 text: [this.searchTerm],
                 price: [-1, 1]
@@ -48,10 +51,19 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         const search = await this.context.ocean.aquarius.queryMetadata(
             searchQuery
         )
-        this.setState({ results: search.results, isLoading: false })
+        this.setState({
+            results: search.results,
+            totalPages: search.totalPages,
+            currentPage: search.page + 1, // first page is always 0 in response
+            isLoading: false
+        })
         Logger.log(`Loaded ${this.state.results.length} assets`)
     }
 
+    private setPage = (page: number) => {
+        this.setState({ currentPage: page })
+    }
+
     public renderResults = () =>
         this.state.isLoading ? (
             <Spinner message="Searching..." />
@@ -66,6 +78,8 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         )
 
     public render() {
+        const { totalPages, currentPage } = this.state
+
         return (
             <Route
                 title={`Search Results for <span>${this.searchTerm}</span>`}
@@ -73,6 +87,14 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                 wide
             >
                 {this.renderResults()}
+
+                <Pagination
+                    totalPages={totalPages}
+                    currentPage={currentPage}
+                    prevPage={currentPage - 1}
+                    nextPage={currentPage + 1}
+                    setPage={this.setPage}
+                />
             </Route>
         )
     }