paginates publishes and library

This commit is contained in:
jessop 2019-09-23 13:32:38 -04:00 committed by Sean Yesmunt
parent 559987c5c7
commit 88e39ed14e
5 changed files with 70 additions and 25 deletions

View file

@ -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

View file

@ -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 => ({
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)
);

View file

@ -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">

View file

@ -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)
);

View file

@ -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>