Merge pull request #1750 from lbryio/channel-caching

Channel page caching
This commit is contained in:
Sean Yesmunt 2018-07-11 10:58:51 -04:00 committed by GitHub
commit 14dc5dd500
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 18 deletions

View file

@ -5,10 +5,20 @@ type Props = {
message: ?string, message: ?string,
}; };
const BusyIndicator = (props: Props) => ( class BusyIndicator extends React.PureComponent<Props> {
<span className="busy-indicator"> static defaultProps = {
{props.message} <span className="busy-indicator__loader" /> message: '',
</span> };
);
render() {
const { message } = this.props;
return (
<span className="busy-indicator">
{message} <span className="busy-indicator__loader" />
</span>
);
}
}
export default BusyIndicator; export default BusyIndicator;

View file

@ -48,7 +48,7 @@ class ChannelPage extends React.PureComponent<Props> {
this.props.navigate('/show', newParams); this.props.navigate('/show', newParams);
} }
paginate(e, totalPages: number) { paginate(e: SyntheticKeyboardEvent<*>, totalPages: number) {
// Change page if enter was pressed, and the given page is between // Change page if enter was pressed, and the given page is between
// the first and the last. // the first and the last.
const pageFromInput = Number(e.target.value); const pageFromInput = Number(e.target.value);
@ -67,22 +67,21 @@ class ChannelPage extends React.PureComponent<Props> {
const { fetching, claimsInChannel, claim, page, totalPages } = this.props; const { fetching, claimsInChannel, claim, page, totalPages } = this.props;
const { name, permanent_url: permanentUrl, claim_id: claimId } = claim; const { name, permanent_url: permanentUrl, claim_id: claimId } = claim;
const currentPage = parseInt((page || 1) - 1, 10); const currentPage = parseInt((page || 1) - 1, 10);
let contentList;
if (fetching) { const contentList =
contentList = <BusyIndicator message={__('Fetching content')} />; claimsInChannel && claimsInChannel.length ? (
} else { <FileList sortByHeight hideFilter fileInfos={claimsInChannel} />
contentList = ) : (
claimsInChannel && claimsInChannel.length ? ( !fetching && <span className="empty">{__('No content found.')}</span>
<FileList sortByHeight hideFilter fileInfos={claimsInChannel} /> );
) : (
<span className="empty">{__('No content found.')}</span>
);
}
return ( return (
<Page notContained> <Page notContained>
<section className="card__channel-info card__channel-info--large"> <section className="card__channel-info card__channel-info--large">
<h1>{name}</h1> <h1>
{name}
{fetching && <BusyIndicator />}
</h1>
<div className="card__actions card__actions--no-margin"> <div className="card__actions card__actions--no-margin">
<SubscribeButton uri={permanentUrl} channelName={name} /> <SubscribeButton uri={permanentUrl} channelName={name} />
<ViewOnWebButton claimId={claimId} claimName={name} /> <ViewOnWebButton claimId={claimId} claimName={name} />