Merge pull request #2734 from lbryio/emptystate

Emptystate for channels you follow
This commit is contained in:
Sean Yesmunt 2019-08-14 22:29:45 -04:00 committed by GitHub
commit 6d9403df2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -4,6 +4,7 @@ import React, { Fragment, useEffect } from 'react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux'; import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
import Button from 'component/button';
import moment from 'moment'; import moment from 'moment';
import ClaimList from 'component/claimList'; import ClaimList from 'component/claimList';
import Tag from 'component/tag'; import Tag from 'component/tag';
@ -106,16 +107,35 @@ function ClaimListDiscover(props: Props) {
.unix() .unix()
)}`; )}`;
} }
const hasContent =
(personalSort === SEARCH_SORT_CHANNELS && subscribedChannels.length) ||
(personalSort === SEARCH_SORT_YOU && !!tags.length) ||
personalSort === SEARCH_SORT_ALL;
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options); const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
const uris = claimSearchByQuery[claimSearchCacheQuery] || []; const uris = (hasContent && claimSearchByQuery[claimSearchCacheQuery]) || [];
const shouldPerformSearch = const shouldPerformSearch =
uris.length === 0 || hasContent &&
(uris.length === 0 ||
didNavigateForward || didNavigateForward ||
(!loading && uris.length < PAGE_SIZE * page && uris.length % PAGE_SIZE === 0); (!loading && uris.length < PAGE_SIZE * page && uris.length % PAGE_SIZE === 0));
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
const optionsStringForEffect = JSON.stringify(options); const optionsStringForEffect = JSON.stringify(options);
const noChannels = (
<div>
<p>{__("You're not following any channels.")}</p>
<Button button={'link'} navigate={'/?type=trending&sort=everyone'}>
{__("Look what's trending for everyone")}
</Button>{' '}
{__('or')}{' '}
<Button button={'link'} navigate={'/$/following'}>
{__('Discover some channels!')}
</Button>
</div>
);
const emptyState = personalSort === SEARCH_SORT_CHANNELS ? noChannels : false;
function getSearch() { function getSearch() {
let search = `?`; let search = `?`;
if (!personalView) { if (!personalView) {
@ -227,6 +247,7 @@ function ClaimListDiscover(props: Props) {
onScrollBottom={handleScrollBottom} onScrollBottom={handleScrollBottom}
page={page} page={page}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
empty={emptyState}
/> />
{loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)} {loading && new Array(PAGE_SIZE).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}