Optimize makeSelectClaimIsNsfw (and it's surrounding friends)

ui/component/claimPreview/index.js

@@ -4,7 +4,6 @@ import {
   makeSelectIsUriResolving,
   selectClaimIsMine,
   makeSelectClaimIsPending,
-  makeSelectClaimIsNsfw,
   makeSelectReflectingClaimForUri,
   makeSelectClaimWasPurchased,
   makeSelectClaimIsStreamPlaceholder,
@@ -26,6 +25,7 @@ import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
+import { isClaimNsfw } from 'util/claim';
 import ClaimPreview from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
 
@@ -45,7 +45,7 @@ const select = (state, props) => {
     claimIsMine: props.uri && selectClaimIsMine(state, claim),
     isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
     isResolvingRepost: props.uri && makeSelectIsUriResolving(props.repostUrl)(state),
-    nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
+    nsfw: claim ? isClaimNsfw(claim) : false,
     banState: selectBanStateForUri(state, props.uri),
     hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
     isSubscribed: props.uri && selectIsSubscribedForUri(state, props.uri),

ui/component/claimPreviewTile/index.js

@@ -4,7 +4,6 @@ import {
   makeSelectIsUriResolving,
   getThumbnailFromClaim,
   makeSelectTitleForUri,
-  makeSelectClaimIsNsfw,
   makeSelectClaimIsStreamPlaceholder,
   selectDateForUri,
 } from 'redux/selectors/claims';
@@ -13,6 +12,7 @@ import { doResolveUri } from 'redux/actions/claims';
 import { selectViewCountForUri, selectBanStateForUri } from 'lbryinc';
 import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
+import { isClaimNsfw } from 'util/claim';
 import ClaimPreviewTile from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
 
@@ -30,7 +30,7 @@ const select = (state, props) => {
     title: props.uri && makeSelectTitleForUri(props.uri)(state),
     banState: selectBanStateForUri(state, props.uri),
     showMature: selectShowMatureContent(state),
-    isMature: makeSelectClaimIsNsfw(props.uri)(state),
+    isMature: claim ? isClaimNsfw(claim) : false,
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
     isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
     viewCount: selectViewCountForUri(state, props.uri),

ui/component/collectionPreviewTile/index.js

@@ -4,7 +4,7 @@ import {
   getThumbnailFromClaim,
   makeSelectTitleForUri,
   makeSelectChannelForClaimUri,
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   selectClaimIdForUri,
   makeSelectClaimForClaimId,
 } from 'redux/selectors/claims';
@@ -46,7 +46,7 @@ const select = (state, props) => {
     filteredOutpoints: selectFilteredOutpoints(state),
     blockedChannelUris: selectMutedChannels(state),
     showMature: selectShowMatureContent(state),
-    isMature: makeSelectClaimIsNsfw(collectionUri)(state),
+    isMature: selectClaimIsNsfwForUri(state, collectionUri),
   };
 };
 

ui/component/fileRenderFloating/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectTitleForUri, makeSelectClaimIsNsfw, makeSelectClaimWasPurchased } from 'redux/selectors/claims';
+import { makeSelectTitleForUri, selectClaimIsNsfwForUri, makeSelectClaimWasPurchased } from 'redux/selectors/claims';
 import { makeSelectFileInfoForUri, makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
 import {
   makeSelectNextUrlForCollectionAndUrl,
@@ -32,7 +32,7 @@ const select = (state, props) => {
     playingUri,
     title: makeSelectTitleForUri(uri)(state),
     fileInfo: makeSelectFileInfoForUri(uri)(state),
-    mature: makeSelectClaimIsNsfw(uri)(state),
+    mature: selectClaimIsNsfwForUri(state, uri),
     isFloating: makeSelectIsPlayerFloating(props.location)(state),
     streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
     floatingPlayerEnabled: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),

ui/component/fileRenderInitiator/index.js

@@ -10,7 +10,7 @@ import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { withRouter } from 'react-router';
 import {
   makeSelectIsPlaying,
-  makeSelectShouldObscurePreview,
+  selectShouldObscurePreviewForUri,
   makeSelectInsufficientCreditsForUri,
   makeSelectFileRenderModeForUri,
 } from 'redux/selectors/content';
@@ -25,7 +25,7 @@ const select = (state, props) => {
   return {
     claimThumbnail: selectThumbnailForUri(state, props.uri),
     fileInfo: makeSelectFileInfoForUri(props.uri)(state),
-    obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
+    obscurePreview: selectShouldObscurePreviewForUri(state, props.uri),
     isPlaying: makeSelectIsPlaying(props.uri)(state),
     insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
     autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state),

ui/component/recommendedContent/index.js

@@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri } from 'redux/selectors/claims';
 import { doFetchRecommendedContent } from 'redux/actions/search';
-import { makeSelectRecommendedContentForUri, selectIsSearching } from 'redux/selectors/search';
+import { selectRecommendedContentForUri, selectIsSearching } from 'redux/selectors/search';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import RecommendedContent from './view';
 
 const select = (state, props) => {
   const claim = makeSelectClaimForUri(props.uri)(state);
   const { claim_id: claimId } = claim;
-  const recommendedContentUris = makeSelectRecommendedContentForUri(props.uri)(state);
+  const recommendedContentUris = selectRecommendedContentForUri(state, props.uri);
   const nextRecommendedUri = recommendedContentUris && recommendedContentUris[0];
 
   return {

ui/component/viewers/videoViewer/index.js

@@ -16,7 +16,7 @@ import {
 import { selectVolume, selectMute } from 'redux/selectors/app';
 import { savePosition, clearPosition, doPlayUri, doSetPlayingUri } from 'redux/actions/content';
 import { makeSelectContentPositionForUri, makeSelectIsPlayerFloating, selectPlayingUri } from 'redux/selectors/content';
-import { makeSelectRecommendedContentForUri } from 'redux/selectors/search';
+import { selectRecommendedContentForUri } from 'redux/selectors/search';
 import VideoViewer from './view';
 import { withRouter } from 'react-router';
 import { doClaimEligiblePurchaseRewards } from 'redux/actions/rewards';
@@ -44,7 +44,7 @@ const select = (state, props) => {
     nextRecommendedUri = makeSelectNextUrlForCollectionAndUrl(collectionId, uri)(state);
     previousListUri = makeSelectPreviousUrlForCollectionAndUrl(collectionId, uri)(state);
   } else {
-    const recommendedContent = makeSelectRecommendedContentForUri(uri)(state);
+    const recommendedContent = selectRecommendedContentForUri(state, uri);
     nextRecommendedUri = recommendedContent && recommendedContent[0];
   }
 

ui/page/file/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { doSetContentHistoryItem, doSetPrimaryUri, clearPosition } from 'redux/actions/content';
 import { withRouter } from 'react-router-dom';
 import {
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   makeSelectTagInClaimOrChannelForUri,
   makeSelectClaimIsStreamPlaceholder,
 } from 'redux/selectors/claims';
@@ -27,7 +27,7 @@ const select = (state, props) => {
     linkedCommentId: urlParams.get('lc'),
     costInfo: makeSelectCostInfoForUri(props.uri)(state),
     obscureNsfw: !selectShowMatureContent(state),
-    isMature: makeSelectClaimIsNsfw(props.uri)(state),
+    isMature: selectClaimIsNsfwForUri(state, props.uri),
     fileInfo: makeSelectFileInfoForUri(props.uri)(state),
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
     videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),

ui/redux/actions/search.js

@@ -1,7 +1,7 @@
 // @flow
 import * as ACTIONS from 'constants/action_types';
 import { selectShowMatureContent } from 'redux/selectors/settings';
-import { makeSelectClaimForUri, makeSelectClaimIsNsfw } from 'redux/selectors/claims';
+import { selectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
 import { doResolveUris } from 'redux/actions/claims';
 import { buildURI, isURIValid } from 'util/lbryURI';
 import { batchActions } from 'util/batch-actions';
@@ -131,9 +131,9 @@ export const doUpdateSearchOptions = (newOptions: SearchOptions, additionalOptio
 
 export const doFetchRecommendedContent = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
   const state = getState();
-  const claim = makeSelectClaimForUri(uri)(state);
+  const claim = selectClaimForUri(state, uri);
   const matureEnabled = selectShowMatureContent(state);
-  const claimIsMature = makeSelectClaimIsNsfw(uri)(state);
+  const claimIsMature = selectClaimIsNsfwForUri(state, uri);
 
   if (claim && claim.value && claim.claim_id) {
     const options: SearchOptions = getRecommendationSearchOptions(matureEnabled, claimIsMature, claim.claim_id);

ui/redux/selectors/claims.js

@@ -570,21 +570,16 @@ export const makeSelectOmittedCountForChannel = (uri: string) =>
     }
   );
 
-export const makeSelectClaimIsNsfw = (uri: string) =>
-  createSelector(
-    makeSelectClaimForUri(uri),
+export const selectClaimIsNsfwForUri = createCachedSelector(
+  selectClaimForUri,
   // Eventually these will come from some list of tags that are considered adult
   // Or possibly come from users settings of what tags they want to hide
   // For now, there is just a hard coded list of tags inside `isClaimNsfw`
   // selectNaughtyTags(),
   (claim: Claim) => {
-      if (!claim) {
-        return false;
+    return claim ? isClaimNsfw(claim) : false;
   }
-
-      return isClaimNsfw(claim);
-    }
-  );
+)((state, uri) => String(uri));
 
 // Returns the associated channel uri for a given claim uri
 // accepts a regular claim uri lbry://something

ui/redux/selectors/content.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 import {
   makeSelectClaimForUri,
   selectClaimsByUri,
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   makeSelectClaimIsMine,
   makeSelectContentTypeForUri,
 } from 'redux/selectors/claims';
@@ -85,10 +85,11 @@ export const selectRecentHistory = createSelector(selectHistory, (history) => {
   return history.slice(0, RECENT_HISTORY_AMOUNT);
 });
 
-export const makeSelectShouldObscurePreview = (uri: string) =>
-  createSelector(selectShowMatureContent, makeSelectClaimIsNsfw(uri), (showMatureContent, isClaimMature) => {
+export const selectShouldObscurePreviewForUri = (state: State, uri: string) => {
+  const showMatureContent = selectShowMatureContent(state);
+  const isClaimMature = selectClaimIsNsfwForUri(state, uri);
   return isClaimMature && !showMatureContent;
-  });
+};
 
 // should probably be in lbry-redux, yarn link was fighting me
 export const makeSelectFileExtensionForUri = (uri: string) =>

ui/redux/selectors/search.js

@@ -6,13 +6,14 @@ import {
   selectClaimsByUri,
   makeSelectClaimForUri,
   makeSelectClaimForClaimId,
-  makeSelectClaimIsNsfw,
+  selectClaimIsNsfwForUri,
   makeSelectPendingClaimForUri,
   makeSelectIsUriResolving,
 } from 'redux/selectors/claims';
 import { parseURI } from 'util/lbryURI';
 import { isClaimNsfw } from 'util/claim';
 import { createSelector } from 'reselect';
+import { createCachedSelector } from 're-reselect';
 import { createNormalizedSearchKey, getRecommendationSearchOptions } from 'util/search';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectHistory } from 'redux/selectors/content';
@@ -51,16 +52,16 @@ export const makeSelectHasReachedMaxResultsLength = (query: string): ((state: St
     return hasReachedMaxResultsLength[query];
   });
 
-export const makeSelectRecommendedContentForUri = (uri: string) =>
-  createSelector(
+export const selectRecommendedContentForUri = createCachedSelector(
+  (state, uri) => uri,
   selectHistory,
   selectClaimsByUri,
   selectShowMatureContent,
   selectMutedChannels,
   selectAllCostInfoByUri,
   selectSearchResultByQuery,
-    makeSelectClaimIsNsfw(uri),
-    (history, claimsByUri, matureEnabled, blockedChannels, costInfoByUri, searchUrisByQuery, isMature) => {
+  selectClaimIsNsfwForUri, // (state, uri)
+  (uri, history, claimsByUri, matureEnabled, blockedChannels, costInfoByUri, searchUrisByQuery, isMature) => {
     const claim = claimsByUri[uri];
 
     if (!claim) return;
@@ -142,7 +143,7 @@ export const makeSelectRecommendedContentForUri = (uri: string) =>
     }
     return recommendedContent;
   }
-  );
+)((state, uri) => String(uri));
 
 export const makeSelectRecommendedRecsysIdForClaimId = (claimId: string) =>
   createSelector(

web/component/ads/index.js

@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
 import { selectTheme } from 'redux/selectors/settings';
-import { makeSelectClaimForUri, makeSelectClaimIsNsfw } from 'redux/selectors/claims';
+import { makeSelectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
 import Ads from './view';
+
 const select = (state, props) => ({
   theme: selectTheme(state),
   claim: makeSelectClaimForUri(props.uri)(state),
-  isMature: makeSelectClaimIsNsfw(props.uri)(state),
+  isMature: selectClaimIsNsfwForUri(state, props.uri),
 });
 
 export default connect(select)(Ads);