diff --git a/src/ui/component/common/paginate.jsx b/src/ui/component/common/paginate.jsx index 70c21f331..cac87b5c6 100644 --- a/src/ui/component/common/paginate.jsx +++ b/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 -
+ e.preventDefault()} style={totalPages <= 1 || loading ? { display: 'none' } : null}> ({ - downloadedUris: selectDownloadedUris(state), - fetching: selectIsFetchingFileList(state), -}); +const select = (state, props) => { + 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( - select, - null -)(FileListDownloaded); +export default withRouter( + connect( + select, + null + )(FileListDownloaded) +); diff --git a/src/ui/page/fileListDownloaded/view.jsx b/src/ui/page/fileListDownloaded/view.jsx index f21e93c99..2e9490093 100644 --- a/src/ui/page/fileListDownloaded/view.jsx +++ b/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, + 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 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} /> + { + if (page !== p) { + history.replace(`#/$/published?page=${p}`); + } + }} + totalPages={Math.floor(Number(downloadedUrisCount) / Number(PAGE_SIZE))} + loading={fetching} + /> ) : (
diff --git a/src/ui/page/fileListPublished/index.js b/src/ui/page/fileListPublished/index.js index 0be607a99..36e016635 100644 --- a/src/ui/page/fileListPublished/index.js +++ b/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 => ({ - uris: selectMyClaimUrisWithoutChannels(state), - fetching: selectIsFetchingClaimListMine(state), -}); +const select = (state, props) => { + 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( - select, - perform -)(FileListPublished); +export default withRouter( + connect( + select, + perform + )(FileListPublished) +); diff --git a/src/ui/page/fileListPublished/view.jsx b/src/ui/page/fileListPublished/view.jsx index 13f56adc8..dcb54c5c4 100644 --- a/src/ui/page/fileListPublished/view.jsx +++ b/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, checkPendingPublishes: () => void, fetching: boolean, + uris: Array, + 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={
) : (

{__("It looks like you haven't published anything to LBRY yet.")}

-