From 44ca2f147d2ab1b3f756efebdd0a3a3c87f55c8e Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 16 Sep 2021 21:48:18 +0800 Subject: [PATCH] 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. --- ui/component/claimTilesDiscover/index.js | 127 ++++++++++++++++++-- ui/component/claimTilesDiscover/view.jsx | 142 +++++------------------ 2 files changed, 147 insertions(+), 122 deletions(-) diff --git a/ui/component/claimTilesDiscover/index.js b/ui/component/claimTilesDiscover/index.js index a12963202..ebdcd3acb 100644 --- a/ui/component/claimTilesDiscover/index.js +++ b/ui/component/claimTilesDiscover/index.js @@ -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; +} diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx index cc3b60e03..ce399f1c1 100644 --- a/ui/component/claimTilesDiscover/view.jsx +++ b/ui/component/claimTilesDiscover/view.jsx @@ -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, + channel_ids: Array, + claim_ids?: Array, + not_channel_ids: Array, + not_tags: Array, + order_by: Array, + languages?: Array, + release_time?: string, + claim_type?: string | Array, + timestamp?: string, + fee_amount?: string, + limit_claims_per_channel?: number, + stream_types?: Array, + has_source?: boolean, + has_no_source?: boolean, +}; + +// **************************************************************************** +// ClaimTilesDiscover +// **************************************************************************** type Props = { prefixUris?: Array, @@ -30,6 +51,7 @@ type Props = { hasSource?: boolean, hasNoSource?: boolean, // --- select --- + location: { search: string }, claimSearchByQuery: { [string]: Array }, claimsByUri: { [string]: any }, fetchingClaimSearchByQuery: { [string]: boolean }, @@ -37,6 +59,7 @@ type Props = { hideReposts: boolean, mutedUris: Array, blockedUris: Array, + 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, - channel_ids: Array, - claim_ids?: Array, - not_channel_ids: Array, - not_tags: Array, - order_by: Array, - languages?: Array, - release_time?: string, - claim_type?: string | Array, - timestamp?: string, - fee_amount?: string, - limit_claims_per_channel?: number, - stream_types?: Array, - 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 (
    {uris && uris.length @@ -234,4 +151,5 @@ function ClaimTilesDiscover(props: Props) {
); } + export default ClaimTilesDiscover;