Add go to page navigation to channel pagination options

src/renderer/component/common/form-components/form-row.jsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import classnames from 'classnames';
 
 type Props = {
+  centered?: boolean,
   children: React.Node,
   padded?: boolean,
   verticallyCentered?: boolean,
@@ -15,12 +16,13 @@ export class FormRow extends React.PureComponent<Props> {
   };
 
   render() {
-    const { children, padded, verticallyCentered } = this.props;
+    const { centered, children, padded, verticallyCentered } = this.props;
     return (
       <div
         className={classnames('form-row', {
+          'form-row--centered': centered,
           'form-row--padded': padded,
-          'form-row--centered': verticallyCentered,
+          'form-row--vertically-centered': verticallyCentered,
         })}
       >
         {children}

src/renderer/page/channel/view.jsx

@@ -1,8 +1,7 @@
 // @flow
 import React from 'react';
-import { buildURI } from 'lbryURI';
 import BusyIndicator from 'component/common/busy-indicator';
-import FileTile from 'component/fileTile';
+import { FormField, FormRow } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
 import Button from 'component/button';
 import SubscribeButton from 'component/subscribeButton';
@@ -24,8 +23,6 @@ type Props = {
   fetchClaims: (string, number) => void,
   fetchClaimCount: string => void,
   navigate: (string, {}) => void,
-  doChannelSubscribe: string => void,
-  doChannelUnsubscribe: string => void,
   openModal: (string, {}) => void,
 };
 
@@ -38,12 +35,12 @@ class ChannelPage extends React.PureComponent<Props> {
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    const { page, uri, fetching, fetchClaims, fetchClaimCount } = this.props;
+    const { page, uri, fetchClaims, fetchClaimCount } = this.props;
 
     if (nextProps.page && page !== nextProps.page) {
       fetchClaims(nextProps.uri, nextProps.page);
     }
-    if (nextProps.uri != uri) {
+    if (nextProps.uri !== uri) {
       fetchClaimCount(uri);
     }
   }
@@ -55,10 +52,17 @@ class ChannelPage extends React.PureComponent<Props> {
     this.props.navigate('/show', newParams);
   }
 
+  paginate(e, totalPages) {
+    // Change page if enter was pressed, and the given page is between
+    // the first and the last.
+    if (e.keyCode === 13 && e.target.value > 0 && e.target.value <= totalPages) {
+      this.changePage(e.target.value);
+    }
+  }
+
   render() {
     const { fetching, claimsInChannel, claim, uri, page, totalPages, openModal } = this.props;
-    const { name, claim_id: claimId } = claim;
+    const { name } = claim;
-    const subscriptionUri = buildURI({ channelName: name, claimId }, false);
 
     let contentList;
     if (fetching) {
@@ -89,21 +93,30 @@ class ChannelPage extends React.PureComponent<Props> {
         <section>{contentList}</section>
         {(!fetching || (claimsInChannel && claimsInChannel.length)) &&
           totalPages > 1 && (
-            <ReactPaginate
+            <FormRow verticallyCentered centered>
-              pageCount={totalPages}
+              <ReactPaginate
-              pageRangeDisplayed={2}
+                pageCount={totalPages}
-              previousLabel="‹"
+                pageRangeDisplayed={2}
-              nextLabel="›"
+                previousLabel="‹"
-              activeClassName="pagination__item--selected"
+                nextLabel="›"
-              pageClassName="pagination__item"
+                activeClassName="pagination__item--selected"
-              previousClassName="pagination__item pagination__item--previous"
+                pageClassName="pagination__item"
-              nextClassName="pagination__item pagination__item--next"
+                previousClassName="pagination__item pagination__item--previous"
-              breakClassName="pagination__item pagination__item--break"
+                nextClassName="pagination__item pagination__item--next"
-              marginPagesDisplayed={2}
+                breakClassName="pagination__item pagination__item--break"
-              onPageChange={e => this.changePage(e.selected + 1)}
+                marginPagesDisplayed={2}
-              initialPage={parseInt(page - 1)}
+                onPageChange={e => this.changePage(e.selected + 1)}
-              containerClassName="pagination"
+                initialPage={parseInt(page - 1, 10)}
-            />
+                containerClassName="pagination"
+              />
+
+              <FormField
+                className="paginate-channel"
+                onKeyUp={e => this.paginate(e, totalPages)}
+                prefix={__('Go to page:')}
+                type="text"
+              />
+            </FormRow>
           )}
       </Page>
     );

src/renderer/scss/component/_form-field.scss

@@ -7,11 +7,15 @@
     padding-left: $spacing-vertical;
   }
 
+  &.form-row--centered {
+    justify-content: center;
+  }
+
   &.form-row--padded {
     padding-top: $spacing-vertical * 2/3;
   }
 
-  &.form-row--centered {
+  &.form-row--vertically-centered {
     align-items: center;
   }
 
@@ -43,6 +47,10 @@
   input[type='radio'] {
     margin-top: 5px;
   }
+
+  input.paginate-channel {
+    width: 35px;
+  }
 }
 
 .form-field__help,

src/renderer/scss/component/_pagination.scss

@@ -1,7 +1,6 @@
 .pagination {
   display: block;
   padding: 0;
-  margin: 0 auto;
   text-align: center;
 }