paginates publishes and library
This commit is contained in:
parent
559987c5c7
commit
88e39ed14e
5 changed files with 70 additions and 25 deletions
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
);
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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)
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue