client - thread page pagination done

client/app/components/pagination-links/pagination-links.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
+import './pagination-links.scss';
+
+const arrows = {
+  right: require('../../assets/arrow-right.gif'),
+  left: require('../../assets/arrow-left.gif'),
+};
 
 interface Props {
   pageLinks: (number | string)[];
   activePage: number;
   onPageSelect: (page: number) => void;
+  showArrows?: boolean;
 }
 
 interface State {
@@ -26,11 +33,26 @@ export class PaginationLinks extends React.Component<Props, State> {
       <a className="page-link" onClick={() => this.onPageSelect(page)}>{page}</a>;
   }
 
+  onArrowClick(arrow: 'right' | 'left') {
+    const nextPage = this.props.activePage + (arrow === 'right' ? 1 : -1);
+    if (this.props.pageLinks.includes(nextPage)) {
+      this.onPageSelect(nextPage);
+    }
+  }
+
+  renderArrow(arrow: 'right' | 'left') {
+    if (this.props.showArrows) {
+      return <img src={arrows[arrow]} onClick={() => this.onArrowClick(arrow)} className="clickable"/>;
+    }
+    return null;
+  }
+
   render() {
     const { activePage, pageLinks } = this.props;
 
     return (
-      <span>
+      <span className="pagination-links">
+        {this.renderArrow('left')}
         {pageLinks.map((link, index) => {
           const active = link === activePage;
           return (
@@ -43,6 +65,7 @@ export class PaginationLinks extends React.Component<Props, State> {
             </span>
           );
         })}
+        {this.renderArrow('right')}
       </span>
     );
   }