client - forum page - pagination / threads per page

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

@@ -0,0 +1,49 @@
+import React from 'react';
+
+interface Props {
+  pageLinks: (number | string)[];
+  activePage: number;
+  onPageSelect: (page: number) => void;
+}
+
+interface State {
+
+}
+
+export class PaginationLinks extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  onPageSelect(page: number) {
+    this.props.onPageSelect(page);
+    window.scrollTo(0, 0);
+  }
+
+  renderLink(page: number, active: boolean) {
+    return active ?
+      <b className="page-link">{page}</b> :
+      <a className="page-link" onClick={() => this.onPageSelect(page)}>{page}</a>;
+  }
+
+  render() {
+    const { activePage, pageLinks } = this.props;
+
+    return (
+      <span>
+        {pageLinks.map((link, index) => {
+          const active = link === activePage;
+          return (
+            <span key={index}>
+              {typeof link === 'number' ?
+                this.renderLink(link as number, active) :
+                <span>.</span>
+              }
+              {pageLinks.length !== index + 1 && <span>.</span>}
+            </span>
+          );
+        })}
+      </span>
+    );
+  }
+}