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<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;