ClaimTilesDiscover: factor out options
## Change Move the `option` code outside and passed in as a pre-calculated prop. ## Reason To skip rendering while waiting for `claim_search`, we need to add `React.memo(areEqual)`. However, the flag that determines if we are fetching `claim_search` (fetchingClaimSearchByQuery[]) depends on the derived options as the key. Instead of calculating `options` twice, we moved it to the props so both sides can use it. It also makes the component a bit more readable. The downside is that the prop-passing might not be clear.
This commit is contained in:
infinite-persistence
parent
8065f6fd5f
commit
0e5f528183
2 changed files with 147 additions and 122 deletions
|
|
@ -1,27 +1,36 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router';
|
||||
import {
|
||||
doClaimSearch,
|
||||
selectClaimSearchByQuery,
|
||||
selectFetchingClaimSearchByQuery,
|
||||
SETTINGS,
|
||||
selectClaimsByUri,
|
||||
splitBySeparator,
|
||||
MATURE_TAGS,
|
||||
} from 'lbry-redux';
|
||||
import { doFetchViewCount } from 'lbryinc';
|
||||
import { doToggleTagFollowDesktop } from 'redux/actions/tags';
|
||||
import { makeSelectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
|
||||
import { selectModerationBlockList } from 'redux/selectors/comments';
|
||||
import { selectMutedChannels } from 'redux/selectors/blocked';
|
||||
import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
|
||||
import * as CS from 'constants/claim_search';
|
||||
|
||||
import ClaimListDiscover from './view';
|
||||
|
||||
const select = (state) => ({
|
||||
claimSearchByQuery: selectClaimSearchByQuery(state),
|
||||
claimsByUri: selectClaimsByUri(state),
|
||||
fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
|
||||
showNsfw: selectShowMatureContent(state),
|
||||
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
|
||||
mutedUris: selectMutedChannels(state),
|
||||
blockedUris: selectModerationBlockList(state),
|
||||
});
|
||||
const select = (state, props) => {
|
||||
return {
|
||||
claimSearchByQuery: selectClaimSearchByQuery(state),
|
||||
claimsByUri: selectClaimsByUri(state),
|
||||
fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
|
||||
showNsfw: selectShowMatureContent(state),
|
||||
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
|
||||
mutedUris: selectMutedChannels(state),
|
||||
blockedUris: selectModerationBlockList(state),
|
||||
options: resolveSearchOptions({ pageSize: 8, ...props }),
|
||||
};
|
||||
};
|
||||
|
||||
const perform = {
|
||||
doClaimSearch,
|
||||
|
|
@ -29,4 +38,102 @@ const perform = {
|
|||
doFetchViewCount,
|
||||
};
|
||||
|
||||
export default connect(select, perform)(ClaimListDiscover);
|
||||
export default withRouter(connect(select, perform)(ClaimListDiscover));
|
||||
|
||||
// ****************************************************************************
|
||||
// ****************************************************************************
|
||||
|
||||
function resolveSearchOptions(props) {
|
||||
const {
|
||||
pageSize,
|
||||
claimType,
|
||||
tags,
|
||||
showNsfw,
|
||||
languages,
|
||||
channelIds,
|
||||
mutedUris,
|
||||
blockedUris,
|
||||
orderBy,
|
||||
streamTypes,
|
||||
hasNoSource,
|
||||
hasSource,
|
||||
releaseTime,
|
||||
feeAmount,
|
||||
limitClaimsPerChannel,
|
||||
hideReposts,
|
||||
timestamp,
|
||||
claimIds,
|
||||
location,
|
||||
} = props;
|
||||
|
||||
const mutedAndBlockedChannelIds = Array.from(
|
||||
new Set((mutedUris || []).concat(blockedUris || []).map((uri) => splitBySeparator(uri)[1]))
|
||||
);
|
||||
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const feeAmountInUrl = urlParams.get('fee_amount');
|
||||
const feeAmountParam = feeAmountInUrl || feeAmount;
|
||||
|
||||
let streamTypesParam;
|
||||
if (streamTypes) {
|
||||
streamTypesParam = streamTypes;
|
||||
} else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
|
||||
streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
|
||||
}
|
||||
|
||||
const options = {
|
||||
page_size: pageSize,
|
||||
claim_type: claimType || ['stream', 'repost', 'channel'],
|
||||
// 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: mutedAndBlockedChannelIds,
|
||||
order_by: orderBy || ['trending_group', 'trending_mixed'],
|
||||
stream_types: streamTypesParam,
|
||||
};
|
||||
|
||||
if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
|
||||
options.has_no_source = true;
|
||||
} else if (hasSource || (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream'))) {
|
||||
options.has_source = true;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (claimIds) {
|
||||
options.claim_ids = claimIds;
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,32 @@
|
|||
// @flow
|
||||
import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
|
||||
import * as CS from 'constants/claim_search';
|
||||
import type { Node } from 'react';
|
||||
import React from 'react';
|
||||
import { createNormalizedClaimSearchKey, MATURE_TAGS, splitBySeparator } from 'lbry-redux';
|
||||
import { createNormalizedClaimSearchKey } from 'lbry-redux';
|
||||
import ClaimPreviewTile from 'component/claimPreviewTile';
|
||||
import { useHistory } from 'react-router';
|
||||
|
||||
type SearchOptions = {
|
||||
page_size: number,
|
||||
no_totals: boolean,
|
||||
any_tags: Array<string>,
|
||||
channel_ids: Array<string>,
|
||||
claim_ids?: Array<string>,
|
||||
not_channel_ids: Array<string>,
|
||||
not_tags: Array<string>,
|
||||
order_by: Array<string>,
|
||||
languages?: Array<string>,
|
||||
release_time?: string,
|
||||
claim_type?: string | Array<string>,
|
||||
timestamp?: string,
|
||||
fee_amount?: string,
|
||||
limit_claims_per_channel?: number,
|
||||
stream_types?: Array<string>,
|
||||
has_source?: boolean,
|
||||
has_no_source?: boolean,
|
||||
};
|
||||
|
||||
// ****************************************************************************
|
||||
// ClaimTilesDiscover
|
||||
// ****************************************************************************
|
||||
|
||||
type Props = {
|
||||
prefixUris?: Array<string>,
|
||||
|
|
@ -30,6 +51,7 @@ type Props = {
|
|||
hasSource?: boolean,
|
||||
hasNoSource?: boolean,
|
||||
// --- select ---
|
||||
location: { search: string },
|
||||
claimSearchByQuery: { [string]: Array<string> },
|
||||
claimsByUri: { [string]: any },
|
||||
fetchingClaimSearchByQuery: { [string]: boolean },
|
||||
|
|
@ -37,6 +59,7 @@ type Props = {
|
|||
hideReposts: boolean,
|
||||
mutedUris: Array<string>,
|
||||
blockedUris: Array<string>,
|
||||
options: SearchOptions,
|
||||
// --- perform ---
|
||||
doClaimSearch: ({}) => void,
|
||||
doFetchViewCount: (claimIdCsv: string) => void,
|
||||
|
|
@ -47,121 +70,18 @@ function ClaimTilesDiscover(props: Props) {
|
|||
doClaimSearch,
|
||||
claimSearchByQuery,
|
||||
claimsByUri,
|
||||
showNsfw,
|
||||
hideReposts,
|
||||
fetchViewCount,
|
||||
// Below are options to pass that are forwarded to claim_search
|
||||
tags,
|
||||
channelIds,
|
||||
claimIds,
|
||||
orderBy,
|
||||
pageSize = 8,
|
||||
releaseTime,
|
||||
languages,
|
||||
claimType,
|
||||
streamTypes,
|
||||
timestamp,
|
||||
feeAmount,
|
||||
limitClaimsPerChannel,
|
||||
fetchingClaimSearchByQuery,
|
||||
hasSource,
|
||||
hasNoSource,
|
||||
renderProperties,
|
||||
blockedUris,
|
||||
mutedUris,
|
||||
pinUrls,
|
||||
prefixUris,
|
||||
showNoSourceClaims,
|
||||
doFetchViewCount,
|
||||
pageSize = 8,
|
||||
options,
|
||||
} = props;
|
||||
|
||||
const { location } = useHistory();
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const feeAmountInUrl = urlParams.get('fee_amount');
|
||||
const feeAmountParam = feeAmountInUrl || feeAmount;
|
||||
const mutedAndBlockedChannelIds = Array.from(
|
||||
new Set(mutedUris.concat(blockedUris).map((uri) => splitBySeparator(uri)[1]))
|
||||
);
|
||||
|
||||
let streamTypesParam;
|
||||
if (streamTypes) {
|
||||
streamTypesParam = streamTypes;
|
||||
} else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
|
||||
streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
|
||||
}
|
||||
|
||||
const options: {
|
||||
page_size: number,
|
||||
no_totals: boolean,
|
||||
any_tags: Array<string>,
|
||||
channel_ids: Array<string>,
|
||||
claim_ids?: Array<string>,
|
||||
not_channel_ids: Array<string>,
|
||||
not_tags: Array<string>,
|
||||
order_by: Array<string>,
|
||||
languages?: Array<string>,
|
||||
release_time?: string,
|
||||
claim_type?: string | Array<string>,
|
||||
timestamp?: string,
|
||||
fee_amount?: string,
|
||||
limit_claims_per_channel?: number,
|
||||
stream_types?: Array<string>,
|
||||
has_source?: boolean,
|
||||
has_no_source?: boolean,
|
||||
} = {
|
||||
page_size: pageSize,
|
||||
claim_type: claimType || ['stream', 'repost', 'channel'],
|
||||
// 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: mutedAndBlockedChannelIds,
|
||||
order_by: orderBy || ['trending_group', 'trending_mixed'],
|
||||
stream_types: streamTypesParam,
|
||||
};
|
||||
|
||||
if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
|
||||
options.has_no_source = true;
|
||||
} else if (hasSource || (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream'))) {
|
||||
options.has_source = true;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (claimIds) {
|
||||
options.claim_ids = claimIds;
|
||||
}
|
||||
|
||||
const searchKey = createNormalizedClaimSearchKey(options);
|
||||
const fetchingClaimSearch = fetchingClaimSearchByQuery[searchKey];
|
||||
const claimSearchUris = claimSearchByQuery[searchKey] || [];
|
||||
|
|
@ -212,9 +132,6 @@ function ClaimTilesDiscover(props: Props) {
|
|||
}
|
||||
}, [uris, fetchViewCount]);
|
||||
|
||||
// **************************************************************************
|
||||
// **************************************************************************
|
||||
|
||||
return (
|
||||
<ul className="claim-grid">
|
||||
{uris && uris.length
|
||||
|
|
@ -234,4 +151,5 @@ function ClaimTilesDiscover(props: Props) {
|
|||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default ClaimTilesDiscover;
|
||||
|
|
|
|||
Loading…
Reference in a new issue