new pagination UI

client/package-lock.json

@@ -1496,6 +1496,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-paginate": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@types/react-paginate/-/react-paginate-6.2.1.tgz",
+      "integrity": "sha512-+q8k1N0WzbMyOCsIEH/p5D6/KQD8dXYLzfvSvriYn//94icd2sqhAL2rWXkgwGvqHGCSTU9AoHtsWCJxPfquUQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.4.5.tgz",
@@ -18941,6 +18950,14 @@
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.8.0.tgz",
       "integrity": "sha512-5Q4Rn7QLEoh7WIe66KFvYIpWJ49GeHoygP1/EtJyZjXKgrWH19Tf0Ty3lWyQzrEEDyLOwUvvmBFSE3dcDdvagA=="
     },
+    "react-paginate": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-6.3.0.tgz",
+      "integrity": "sha512-lT/ne7hZzctGDli4QzUAou0JjfZgxKmtl9/r30B5UVonICZIy1u0SrAkdlEZ5ubgzrOykBeCmxkTWi5IyPg4AQ==",
+      "requires": {
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-popper": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",

client/package.json

@@ -27,6 +27,7 @@
     "react-helmet": "^5.2.0",
     "react-markdown": "^4.0.6",
     "react-moment": "^0.9.2",
+    "react-paginate": "^6.3.0",
     "react-popper": "^1.3.3",
     "react-router-dom": "^5.0.0",
     "react-transition-group": "^3.0.0",
@@ -43,6 +44,7 @@
     "@types/react-dom": "^16.8.3",
     "@types/react-dotdotdot": "^1.2.0",
     "@types/react-helmet": "^5.0.8",
+    "@types/react-paginate": "^6.2.1",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-transition-group": "^2.8.0",
     "@types/web3": "^1.0.18",

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

@@ -2,18 +2,17 @@
 
 .pagination {
     display: flex;
+    flex-wrap: wrap;
     margin-top: $spacer * 2;
     margin-bottom: $spacer;
     justify-content: center;
+    padding-left: 0;
 
-    > div {
+    li {
-        &:first-child {
+        margin: 0;
-            padding: $spacer / 4;
-        }
 
-        &:last-child {
+        &:before {
-            padding: $spacer / 4;
+            display: none;
-            text-align: right;
         }
     }
 }
@@ -21,15 +20,55 @@
 .number {
     text-align: center;
     font-weight: $font-weight-bold;
-    padding: $spacer / 4;
+    padding: $spacer / 4 $spacer / 2;
-    margin-left: $spacer / 4;
+    margin-left: -1px;
-    margin-right: $spacer / 4;
     display: inline-block;
+    cursor: pointer;
+    border: 1px solid $brand-grey-lighter;
+    min-width: 3rem;
+
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+        transform: none;
+        outline: 0;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        background: lighten($brand-grey-lighter, 7%);
+    }
 }
 
 .current {
     composes: number;
     cursor: default;
     pointer-events: none;
-    color: $brand-grey-light;
+
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+        color: $brand-grey-light;
+        background: lighten($brand-grey-lighter, 7%);
+    }
+}
+
+.prev {
+    composes: number;
+}
+
+.next {
+    composes: number;
+    text-align: right;
+}
+
+.prevNextDisabled {
+    opacity: 0;
+}
+
+.break {
+    composes: number;
 }

client/src/components/molecules/Pagination.tsx

@@ -1,82 +1,36 @@
 import React, { PureComponent } from 'react'
-import Button from '../atoms/Button'
+import ReactPaginate from 'react-paginate'
 import styles from './Pagination.module.scss'
 
-const PageNumber = ({
-    i,
-    current,
-    setPage
-}: {
-    i: number
-    current: boolean
-    setPage(page: number): void
-}) => (
-    <Button
-        link
-        className={current ? styles.current : styles.number}
-        onClick={() => setPage(i + 1)}
-    >
-        {`${i + 1}`}
-    </Button>
-)
-
-const PrevNext = ({
-    currentPage,
-    prevPage,
-    setPage
-}: {
-    currentPage: number
-    prevPage?: number
-    setPage(page: number): void
-}) => (
-    <Button
-        link
-        onClick={
-            prevPage ? () => setPage(prevPage) : () => setPage(currentPage + 1)
-        }
-    >
-        {prevPage ? '←' : '→'}
-    </Button>
-)
-
 export default class Pagination extends PureComponent<{
-    currentPage: number
     totalPages: number
-    prevPage?: number
+    currentPage: number
-    setPage(page: number): void
+    handlePageClick(data: { selected: number }): Promise<any>
 }> {
     public render() {
-        const { currentPage, totalPages, prevPage, setPage } = this.props
+        const { totalPages, currentPage, handlePageClick } = this.props
-        const isFirst = currentPage === 1
-        const isLast = currentPage === totalPages
 
-        return totalPages > 1 ? (
+        return (
-            <div className={styles.pagination}>
+            totalPages > 1 && (
-                <div>
+                <ReactPaginate
-                    {!isFirst && (
+                    pageCount={totalPages}
-                        <PrevNext
+                    initialPage={currentPage - 1}
-                            prevPage={prevPage}
+                    marginPagesDisplayed={1}
-                            currentPage={currentPage}
+                    pageRangeDisplayed={6}
-                            setPage={setPage}
+                    onPageChange={data => handlePageClick(data)}
-                        />
+                    containerClassName={styles.pagination}
-                    )}
+                    pageLinkClassName={styles.number}
-                </div>
+                    activeLinkClassName={styles.current}
-                <div>
+                    previousLinkClassName={styles.prev}
-                    {Array.from({ length: totalPages }, (_, i) => (
+                    nextLinkClassName={styles.next}
-                        <PageNumber
+                    disabledClassName={styles.prevNextDisabled}
-                            key={`pagination-number${i + 1}`}
+                    disableInitialCallback
-                            i={i}
+                    previousLabel={'←'}
-                            current={currentPage === i + 1}
+                    nextLabel={'→'}
-                            setPage={setPage}
+                    breakLabel={'...'}
-                        />
+                    breakLinkClassName={styles.break}
-                    ))}
+                />
-                </div>
+            )
-                <div>
+        )
-                    {!isLast && (
-                        <PrevNext currentPage={currentPage} setPage={setPage} />
-                    )}
-                </div>
-            </div>
-        ) : null
     }
 }

client/src/routes/Search.tsx

@@ -72,13 +72,15 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         Logger.log(`Loaded ${this.state.results.length} assets`)
     }
 
-    private setPage = async (page: number) => {
+    private handlePageClick = async (data: { selected: number }) => {
+        let toPage = data.selected + 1
+
         this.props.history.push({
             pathname: this.props.location.pathname,
-            search: `?text=${this.searchTerm}&page=${page}`
+            search: `?text=${this.searchTerm}&page=${toPage}`
         })
 
-        await this.setState({ currentPage: page, isLoading: true })
+        await this.setState({ currentPage: toPage, isLoading: true })
         await this.searchAssets()
     }
 
@@ -111,8 +113,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                 <Pagination
                     totalPages={totalPages}
                     currentPage={currentPage}
-                    prevPage={currentPage - 1}
+                    handlePageClick={this.handlePageClick}
-                    setPage={this.setPage}
                 />
             </Route>
         )