client - forum page - pagination / threads per page

client/app/components/editor/editor.tsx

@@ -7,7 +7,7 @@ import { ReplyModel } from '../../model';
 import './editor.scss';
 
 interface Props {
-  categoryId?: string;
+  categoryId?: number;
   onClose: (cancel: boolean) => any;
   editingReply?: ReplyModel;
   quotedReply?: ReplyModel;

client/app/components/index.ts

@@ -4,5 +4,6 @@ export * from './footer/footer';
 export * from './forum-nav/forum-nav';
 export * from './header/header';
 export * from './login-button/login-button';
+export * from './pagination-links/pagination-links';
 export * from './portrait/portrait';
 export * from './scroll-to-top/scroll-to-top';

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>
+    );
+  }
+}