144 lines
4.2 KiB
JavaScript
144 lines
4.2 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
|
|
import ClaimPreviewTile from 'component/claimPreviewTile';
|
|
import { useHistory } from 'react-router';
|
|
|
|
type Props = {
|
|
prefixUris?: Array<string>,
|
|
uris: Array<string>,
|
|
doClaimSearch: ({}) => void,
|
|
showNsfw: boolean,
|
|
hideReposts: boolean,
|
|
history: { action: string, push: string => void, replace: string => void },
|
|
claimSearchByQuery: {
|
|
[string]: Array<string>,
|
|
},
|
|
fetchingClaimSearchByQuery: {
|
|
[string]: boolean,
|
|
},
|
|
// claim search options are below
|
|
tags: Array<string>,
|
|
hiddenUris: Array<string>,
|
|
channelIds?: Array<string>,
|
|
notChannelIds?: Array<string>,
|
|
pageSize: number,
|
|
orderBy?: Array<string>,
|
|
releaseTime?: string,
|
|
languages?: Array<string>,
|
|
claimType?: Array<string>,
|
|
timestamp?: string,
|
|
feeAmount?: string,
|
|
limitClaimsPerChannel?: number,
|
|
};
|
|
|
|
function ClaimTilesDiscover(props: Props) {
|
|
const {
|
|
doClaimSearch,
|
|
claimSearchByQuery,
|
|
showNsfw,
|
|
hideReposts,
|
|
hiddenUris,
|
|
// Below are options to pass that are forwarded to claim_search
|
|
tags,
|
|
channelIds,
|
|
notChannelIds,
|
|
orderBy,
|
|
pageSize = 8,
|
|
releaseTime,
|
|
languages,
|
|
claimType,
|
|
prefixUris,
|
|
timestamp,
|
|
feeAmount,
|
|
limitClaimsPerChannel,
|
|
fetchingClaimSearchByQuery,
|
|
} = props;
|
|
const { location } = useHistory();
|
|
const urlParams = new URLSearchParams(location.search);
|
|
const feeAmountInUrl = urlParams.get('fee_amount');
|
|
const feeAmountParam = feeAmountInUrl || feeAmount;
|
|
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>,
|
|
languages?: Array<string>,
|
|
release_time?: string,
|
|
claim_type?: Array<string>,
|
|
timestamp?: string,
|
|
fee_amount?: string,
|
|
limit_claims_per_channel?: number,
|
|
} = {
|
|
page_size: pageSize,
|
|
claim_type: claimType || undefined,
|
|
// 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 : [],
|
|
any_languages: languages,
|
|
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]) : []),
|
|
order_by: orderBy || ['trending_group', 'trending_mixed'],
|
|
};
|
|
|
|
if (releaseTime) {
|
|
options.release_time = releaseTime;
|
|
}
|
|
|
|
if (feeAmountParam) {
|
|
options.fee_amount = feeAmountParam;
|
|
}
|
|
|
|
if (limitClaimsPerChannel) {
|
|
options.limit_claims_per_channel = limitClaimsPerChannel;
|
|
}
|
|
|
|
// https://github.com/lbryio/lbry-desktop/issues/3774
|
|
if (hideReposts) {
|
|
if (Array.isArray(options.claim_type)) {
|
|
options.claim_type = options.claim_type.filter(claimType => claimType !== 'repost');
|
|
} else {
|
|
options.claim_type = ['stream', 'channel'];
|
|
}
|
|
}
|
|
|
|
if (claimType) {
|
|
options.claim_type = claimType;
|
|
}
|
|
|
|
if (timestamp) {
|
|
options.timestamp = timestamp;
|
|
}
|
|
|
|
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
|
|
const uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []);
|
|
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
|
|
const optionsStringForEffect = JSON.stringify(options);
|
|
const isLoading = fetchingClaimSearchByQuery[claimSearchCacheQuery];
|
|
const shouldPerformSearch = !isLoading && uris.length === 0;
|
|
|
|
React.useEffect(() => {
|
|
if (shouldPerformSearch) {
|
|
const searchOptions = JSON.parse(optionsStringForEffect);
|
|
doClaimSearch(searchOptions);
|
|
}
|
|
}, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
|
|
|
|
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;
|