Merge pull request #1166 from miikkatu/channel-pagination-go-to-page

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 subscriptionUri = buildURI({ channelName: name, claimId }, false);
+    const { name } = claim;
 
     let contentList;
     if (fetching) {
@@ -89,6 +93,7 @@ class ChannelPage extends React.PureComponent<Props> {
         <section>{contentList}</section>
         {(!fetching || (claimsInChannel && claimsInChannel.length)) &&
           totalPages > 1 && (
+            <FormRow verticallyCentered centered>
               <ReactPaginate
                 pageCount={totalPages}
                 pageRangeDisplayed={2}
@@ -101,9 +106,17 @@ class ChannelPage extends React.PureComponent<Props> {
                 breakClassName="pagination__item pagination__item--break"
                 marginPagesDisplayed={2}
                 onPageChange={e => this.changePage(e.selected + 1)}
-              initialPage={parseInt(page - 1)}
+                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;
   }
 
@@ -44,6 +48,10 @@
     margin-top: 5px;
   }
 
+  input.paginate-channel {
+    width: 35px;
+  }
+    
   &.form-field--auto-height {
     height: auto;
   }

src/renderer/scss/component/_pagination.scss

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