lbry-desktop/ui/component/claimTilesDiscover/view.jsx

119 lines
3.5 KiB
React
Raw Normal View History

2020-01-20 17:47:03 +01:00
// @flow
import React from 'react';
import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
import ClaimPreviewTile from 'component/claimPreviewTile';
type Props = {
uris: Array<string>,
doClaimSearch: ({}) => void,
loading: boolean,
showNsfw: boolean,
2020-02-20 13:30:27 +01:00
showReposts: boolean,
2020-01-20 17:47:03 +01:00
history: { action: string, push: string => void, replace: string => void },
claimSearchByQuery: {
[string]: Array<string>,
},
// claim search options are below
tags: Array<string>,
hiddenUris: Array<string>,
channelIds?: Array<string>,
notChannelIds?: Array<string>,
2020-01-20 17:47:03 +01:00
pageSize: number,
orderBy?: Array<string>,
releaseTime?: string,
claimType?: Array<string>,
2020-01-20 17:47:03 +01:00
timestamp?: string,
};
function ClaimTilesDiscover(props: Props) {
const {
doClaimSearch,
claimSearchByQuery,
loading,
showNsfw,
2020-02-20 13:30:27 +01:00
showReposts,
2020-01-20 17:47:03 +01:00
hiddenUris,
// Below are options to pass that are forwarded to claim_search
tags,
channelIds,
notChannelIds,
2020-01-20 17:47:03 +01:00
orderBy,
pageSize = 8,
releaseTime,
claimType,
timestamp,
} = props;
2020-01-22 17:12:48 +01:00
const [hasSearched, setHasSearched] = React.useState(false);
2020-01-20 17:47:03 +01:00
const options: {
page_size: number,
no_totals: boolean,
any_tags: Array<string>,
channel_ids: Array<string>,
channel_ids: Array<string>,
not_channel_ids: Array<string>,
not_tags: Array<string>,
order_by: Array<string>,
release_time?: string,
claim_type?: Array<string>,
2020-01-20 17:47:03 +01:00
timestamp?: string,
} = {
page_size: pageSize,
claim_type: claimType || undefined,
2020-01-20 17:47:03 +01:00
// no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
// it's faster, but we will need to remove it if we start using total_pages
no_totals: true,
any_tags: tags || [],
not_tags: !showNsfw ? MATURE_TAGS : [],
channel_ids: channelIds || [],
not_channel_ids:
notChannelIds ||
// If channelIds were passed in, we don't need not_channel_ids
(!channelIds && hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : []),
2020-01-20 17:47:03 +01:00
order_by: orderBy || ['trending_group', 'trending_mixed'],
};
if (releaseTime) {
options.release_time = releaseTime;
}
2020-02-28 23:36:22 +01:00
// https://github.com/lbryio/lbry-desktop/issues/3774
// if (!showReposts) {
// if (Array.isArray(options.claim_type)) {
// options.claim_type = options.claim_type.filter(claimType => claimType !== 'repost');
// } else {
// options.claim_type = ['stream', 'channel'];
// }
// }
2020-02-20 13:30:27 +01:00
2020-01-20 17:47:03 +01:00
if (claimType) {
options.claim_type = claimType;
}
2020-02-20 13:30:27 +01:00
2020-01-20 17:47:03 +01:00
if (timestamp) {
options.timestamp = timestamp;
}
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
const uris = claimSearchByQuery[claimSearchCacheQuery] || [];
const shouldPerformSearch = !hasSearched || uris.length === 0 || (!loading && uris.length < pageSize);
2020-01-20 17:47:03 +01:00
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
const optionsStringForEffect = JSON.stringify(options);
React.useEffect(() => {
if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect);
doClaimSearch(searchOptions);
2020-01-22 17:12:48 +01:00
setHasSearched(true);
2020-01-20 17:47:03 +01:00
}
2020-01-22 17:12:48 +01:00
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, hasSearched]);
2020-01-20 17:47:03 +01:00
return (
<ul className="claim-grid">
{uris && uris.length
? uris.map(uri => <ClaimPreviewTile key={uri} uri={uri} />)
: new Array(pageSize).fill(1).map((x, i) => <ClaimPreviewTile key={i} placeholder />)}
</ul>
);
}
export default ClaimTilesDiscover;