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

@@ -1,19 +1,26 @@
 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) => ({
+const select = (state, props) => {
+  return {
     claimSearchByQuery: selectClaimSearchByQuery(state),
     claimsByUri: selectClaimsByUri(state),
     fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
@@ -21,7 +28,9 @@ const select = (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;
+}

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;