make pagination component work

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

@@ -8,11 +8,11 @@
 
     > div {
         &:first-child {
-            margin-right: $spacer;
+            padding: $spacer / 4;
         }
 
         &:last-child {
-            margin-left: $spacer;
+            padding: $spacer / 4;
             text-align: right;
         }
     }
@@ -20,24 +20,16 @@
 
 .number {
     text-align: center;
-    width: 2rem;
-    height: 2rem;
-    line-height: 1.7;
+    font-weight: $font-weight-bold;
+    padding: $spacer / 4;
+    margin-left: $spacer / 4;
+    margin-right: $spacer / 4;
     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

@@ -4,46 +4,60 @@ import styles from './Pagination.module.scss'
 
 const PageNumber = ({
     i,
-    current
+    current,
+    setPage
 }: {
     i: number
     current: boolean
-    onClick: any
+    setPage(page: number): void
 }) => (
-    <Button link className={current ? styles.current : styles.number}>
+    <Button
+        link
+        className={current ? styles.current : styles.number}
+        onClick={() => setPage(i + 1)}
+    >
         {`${i + 1}`}
     </Button>
 )
 
-const PrevNext = ({ prevPage }: { prevPage?: number; onClick: any }) => (
-    <Button link>{prevPage ? '←' : '→'}</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
-    nextPage?: number
     setPage(page: number): void
 }> {
     public render() {
-        const {
-            currentPage,
-            totalPages,
-            prevPage,
-            nextPage,
-            setPage
-        } = this.props
+        const { currentPage, totalPages, prevPage, setPage } = this.props
         const isFirst = currentPage === 1
         const isLast = currentPage === totalPages
 
-        return nextPage && nextPage > 1 ? (
+        return totalPages > 1 ? (
             <div className={styles.pagination}>
                 <div>
                     {!isFirst && (
                         <PrevNext
                             prevPage={prevPage}
-                            onClick={setPage(currentPage - 1)}
+                            currentPage={currentPage}
+                            setPage={setPage}
                         />
                     )}
                 </div>
@@ -53,12 +67,14 @@ export default class Pagination extends PureComponent<{
                             key={`pagination-number${i + 1}`}
                             i={i}
                             current={currentPage === i + 1}
-                            onClick={setPage(i + 1)}
+                            setPage={setPage}
                         />
                     ))}
                 </div>
                 <div>
-                    {!isLast && <PrevNext onClick={setPage(currentPage + 1)} />}
+                    {!isLast && (
+                        <PrevNext currentPage={currentPage} setPage={setPage} />
+                    )}
                 </div>
             </div>
         ) : null

client/src/routes/Search.tsx

@@ -62,6 +62,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
 
     private setPage = (page: number) => {
         this.setState({ currentPage: page })
+        this.searchAssets()
     }
 
     public renderResults = () =>
@@ -92,7 +93,6 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                     totalPages={totalPages}
                     currentPage={currentPage}
                     prevPage={currentPage - 1}
-                    nextPage={currentPage + 1}
                     setPage={this.setPage}
                 />
             </Route>