paginates publishes and library

src/ui/component/common/paginate.jsx

@@ -43,7 +43,7 @@ function Paginate(props: Props) {
   return (
     // Hide the paginate controls if we are loading or there is only one page
     // It should still be rendered to trigger the onPageChange callback
-    <Form style={totalPages <= 1 || loading ? { display: 'none' } : null}>
+    <Form onSubmit={e => e.preventDefault()} style={totalPages <= 1 || loading ? { display: 'none' } : null}>
       <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
         <fieldset-section>
           <ReactPaginate

src/ui/page/fileListDownloaded/index.js

@@ -1,13 +1,23 @@
 import { connect } from 'react-redux';
-import { selectDownloadedUris, selectIsFetchingFileList } from 'lbry-redux';
+import { makeSelectDownloadUrisForPage, selectDownloadUrisCount, selectIsFetchingFileList } from 'lbry-redux';
 import FileListDownloaded from './view';
+import { withRouter } from 'react-router';
 
-const select = state => ({
+const select = (state, props) => {
-  downloadedUris: selectDownloadedUris(state),
+  const { search } = props.location;
+  const urlParams = new URLSearchParams(search);
+  const page = Number(urlParams.get('page')) || 0;
+  return {
+    page,
+    downloadedUris: makeSelectDownloadUrisForPage(page)(state),
+    downloadedUrisCount: selectDownloadUrisCount(state),
     fetching: selectIsFetchingFileList(state),
-});
+  };
+};
 
-export default connect(
+export default withRouter(
+  connect(
     select,
     null
-)(FileListDownloaded);
+  )(FileListDownloaded)
+);

src/ui/page/fileListDownloaded/view.jsx

@@ -2,16 +2,20 @@
 import React from 'react';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
+import Paginate from 'component/common/paginate';
+import { PAGE_SIZE } from 'constants/claim';
 
 type Props = {
   fetching: boolean,
   downloadedUris: Array<string>,
+  downloadedUrisCount: ?number,
+  history: { replace: string => void },
+  page: number,
 };
 
 function FileListDownloaded(props: Props) {
-  const { fetching, downloadedUris } = props;
+  const { fetching, downloadedUris, downloadedUrisCount, history, page } = props;
   const hasDownloads = !!downloadedUris.length;
-
   return (
     // Removed the <Page> wapper to try combining this page with UserHistory
     // This should eventually move into /components if we want to keep it this way
@@ -25,6 +29,15 @@ function FileListDownloaded(props: Props) {
             uris={downloadedUris}
             loading={fetching}
           />
+          <Paginate
+            onPageChange={p => {
+              if (page !== p) {
+                history.replace(`#/$/published?page=${p}`);
+              }
+            }}
+            totalPages={Math.floor(Number(downloadedUrisCount) / Number(PAGE_SIZE))}
+            loading={fetching}
+          />
         </div>
       ) : (
         <div className="main--empty">

src/ui/page/fileListPublished/index.js

@@ -1,18 +1,28 @@
 import { connect } from 'react-redux';
-import { selectIsFetchingClaimListMine, selectMyClaimUrisWithoutChannels } from 'lbry-redux';
+import { selectIsFetchingClaimListMine, makeSelectMyStreamUrisForPage, selectMyStreamUrisCount } from 'lbry-redux';
 import { doCheckPendingPublishesApp } from 'redux/actions/publish';
 import FileListPublished from './view';
+import { withRouter } from 'react-router';
 
-const select = state => ({
+const select = (state, props) => {
-  uris: selectMyClaimUrisWithoutChannels(state),
+  const { search } = props.location;
+  const urlParams = new URLSearchParams(search);
+  const page = Number(urlParams.get('page')) || 0;
+  return {
+    page,
+    uris: makeSelectMyStreamUrisForPage(page)(state),
+    uriTotal: selectMyStreamUrisCount(state),
     fetching: selectIsFetchingClaimListMine(state),
-});
+  };
+};
 
 const perform = dispatch => ({
   checkPendingPublishes: () => dispatch(doCheckPendingPublishesApp()),
 });
 
-export default connect(
+export default withRouter(
+  connect(
     select,
     perform
-)(FileListPublished);
+  )(FileListPublished)
+);

src/ui/page/fileListPublished/view.jsx

@@ -3,16 +3,20 @@ import React, { useEffect } from 'react';
 import Button from 'component/button';
 import ClaimList from 'component/claimList';
 import Page from 'component/page';
+import Paginate from 'component/common/paginate';
+import { PAGE_SIZE } from 'constants/claim';
 
 type Props = {
-  uris: Array<string>,
   checkPendingPublishes: () => void,
   fetching: boolean,
+  uris: Array<string>,
+  uriTotal: ?number,
+  history: { replace: string => void },
+  page: number,
 };
 
 function FileListPublished(props: Props) {
-  const { checkPendingPublishes, fetching, uris } = props;
+  const { checkPendingPublishes, fetching, uris, uriTotal, history, page } = props;
-
   useEffect(() => {
     checkPendingPublishes();
   }, [checkPendingPublishes]);
@@ -29,12 +33,20 @@ function FileListPublished(props: Props) {
             defaultSort
             headerAltControls={<Button button="link" label={__('New Publish')} navigate="/$/publish" />}
           />
+          <Paginate
+            onPageChange={p => {
+              if (page !== p) {
+                history.replace(`#/$/published?page=${p + 1}`);
+              }
+            }}
+            totalPages={Math.floor(Number(uriTotal) / Number(PAGE_SIZE))}
+            loading={fetching}
+          />
         </div>
       ) : (
         <div className="main--empty">
           <section className="card card--section">
             <h2 className="card__title">{__("It looks like you haven't published anything to LBRY yet.")}</h2>
-
             <div className="card__actions card__actions--center">
               <Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
             </div>