Blacklist: use existing map instead of looping (#400)

We already have a pre-calculated map, but not used except for comments.

At the expense of pre-calculating it, the subsequent queries are instantaneous compared to the loop.

We are still not perfect in term of reducing re-renders, so this helps a lot.

extras/lbryinc/redux/selectors/ban.js

@@ -8,17 +8,17 @@ import { createCachedSelector } from 're-reselect';
 import { selectClaimForUri } from 'redux/selectors/claims';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectModerationBlockList } from 'redux/selectors/comments';
-import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc';
 import { getChannelFromClaim } from 'util/claim';
 import { isURIEqual } from 'util/lbryURI';
 
 export const selectBanStateForUri = createCachedSelector(
   selectClaimForUri,
-  selectBlackListedOutpoints,
-  selectFilteredOutpoints,
+  selectBlacklistedOutpointMap,
+  selectFilteredOutpointMap,
   selectMutedChannels,
   selectModerationBlockList,
-  (claim, blackListedOutpoints, filteredOutpoints, mutedChannelUris, personalBlocklist) => {
+  (claim, blackListedOutpointMap, filteredOutpointMap, mutedChannelUris, personalBlocklist) => {
     const banState = {};
 
     if (!claim) {
@@ -28,13 +28,10 @@ export const selectBanStateForUri = createCachedSelector(
     const channelClaim = getChannelFromClaim(claim);
 
     // This will be replaced once blocking is done at the wallet server level.
-    if (blackListedOutpoints) {
+    if (blackListedOutpointMap) {
       if (
-        blackListedOutpoints.some(
-          (outpoint) =>
-            (channelClaim && outpoint.txid === channelClaim.txid && outpoint.nout === channelClaim.nout) ||
-            (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
-        )
+        (channelClaim && blackListedOutpointMap[`${channelClaim.txid}:${channelClaim.nout}`]) ||
+        blackListedOutpointMap[`${claim.txid}:${claim.nout}`]
       ) {
         banState['blacklisted'] = true;
       }
@@ -42,13 +39,10 @@ export const selectBanStateForUri = createCachedSelector(
 
     // We're checking to see if the stream outpoint or signing channel outpoint
     // is in the filter list.
-    if (filteredOutpoints) {
+    if (filteredOutpointMap) {
       if (
-        filteredOutpoints.some(
-          (outpoint) =>
-            (channelClaim && outpoint.txid === channelClaim.txid && outpoint.nout === channelClaim.nout) ||
-            (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
-        )
+        (channelClaim && filteredOutpointMap[`${channelClaim.txid}:${channelClaim.nout}`]) ||
+        filteredOutpointMap[`${claim.txid}:${claim.nout}`]
       ) {
         banState['filtered'] = true;
       }

ui/page/channel/index.js

@@ -9,7 +9,7 @@ import {
   makeSelectClaimIsPending,
 } from 'redux/selectors/claims';
 import { selectMyUnpublishedCollections } from 'redux/selectors/collections';
-import { selectBlackListedOutpoints, doFetchSubCount, selectSubCountForUri } from 'lbryinc';
+import { selectBlacklistedOutpointMap, doFetchSubCount, selectSubCountForUri } from 'lbryinc';
 import { selectYoutubeChannels } from 'redux/selectors/user';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
 import { selectModerationBlockList } from 'redux/selectors/comments';
@@ -28,7 +28,7 @@ const select = (state, props) => {
     page: selectCurrentChannelPage(state),
     claim,
     isSubscribed: selectIsSubscribedForUri(state, props.uri),
-    blackListedOutpoints: selectBlackListedOutpoints(state),
+    blackListedOutpointMap: selectBlacklistedOutpointMap(state),
     subCount: selectSubCountForUri(state, props.uri),
     pending: makeSelectClaimIsPending(props.uri)(state),
     youtubeChannels: selectYoutubeChannels(state),

ui/page/channel/view.jsx

@@ -50,10 +50,7 @@ type Props = {
   channelIsMine: boolean,
   isSubscribed: boolean,
   channelIsBlocked: boolean,
-  blackListedOutpoints: Array<{
-    txid: string,
-    nout: number,
-  }>,
+  blackListedOutpointMap: { [string]: number },
   fetchSubCount: (string) => void,
   subCount: number,
   pending: boolean,
@@ -72,7 +69,7 @@ function ChannelPage(props: Props) {
     // page, ?page= may come back some day?
     channelIsMine,
     isSubscribed,
-    blackListedOutpoints,
+    blackListedOutpointMap,
     fetchSubCount,
     subCount,
     pending,
@@ -137,10 +134,8 @@ function ChannelPage(props: Props) {
 
   let channelIsBlackListed = false;
 
-  if (claim && blackListedOutpoints) {
-    channelIsBlackListed = blackListedOutpoints.some(
-      (outpoint) => outpoint.txid === claim.txid && outpoint.nout === claim.nout
-    );
+  if (claim && blackListedOutpointMap) {
+    channelIsBlackListed = blackListedOutpointMap[`${claim.txid}:${claim.nout}`];
   }
 
   // If a user changes tabs, update the url so it stays on the same page if they refresh.

ui/page/show/index.js

@@ -24,7 +24,7 @@ import { normalizeURI } from 'util/lbryURI';
 import * as COLLECTIONS_CONSTS from 'constants/collections';
 import { push } from 'connected-react-router';
 import { makeSelectChannelInSubscriptions } from 'redux/selectors/subscriptions';
-import { selectBlackListedOutpoints } from 'lbryinc';
+import { selectBlacklistedOutpointMap } from 'lbryinc';
 import ShowPage from './view';
 
 const select = (state, props) => {
@@ -73,7 +73,7 @@ const select = (state, props) => {
     uri,
     claim,
     isResolvingUri: selectIsUriResolving(state, uri),
-    blackListedOutpoints: selectBlackListedOutpoints(state),
+    blackListedOutpointMap: selectBlacklistedOutpointMap(state),
     totalPages: makeSelectTotalPagesForChannel(uri, PAGE_SIZE)(state),
     isSubscribed: makeSelectChannelInSubscriptions(uri)(state),
     title: selectTitleForUri(state, uri),

ui/page/show/view.jsx

@@ -28,10 +28,7 @@ type Props = {
   uri: string,
   claim: StreamClaim,
   location: UrlLocation,
-  blackListedOutpoints: Array<{
-    txid: string,
-    nout: number,
-  }>,
+  blackListedOutpointMap: { [string]: number },
   title: string,
   claimIsMine: boolean,
   claimIsPending: boolean,
@@ -50,7 +47,7 @@ function ShowPage(props: Props) {
     resolveUri,
     uri,
     claim,
-    blackListedOutpoints,
+    blackListedOutpointMap,
     location,
     claimIsMine,
     isSubscribed,
@@ -181,14 +178,11 @@ function ShowPage(props: Props) {
   } else if (claim.name.length && claim.name[0] === '@') {
     innerContent = <ChannelPage uri={uri} location={location} />;
   } else if (claim) {
-    let isClaimBlackListed = false;
-
-    isClaimBlackListed =
-      blackListedOutpoints &&
-      blackListedOutpoints.some(
-        (outpoint) =>
-          (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
-          (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
+    const isClaimBlackListed =
+      blackListedOutpointMap &&
+      Boolean(
+        (signingChannel && blackListedOutpointMap[`${signingChannel.txid}:${signingChannel.nout}`]) ||
+          blackListedOutpointMap[`${claim.txid}:${claim.nout}`]
       );
 
     if (isClaimBlackListed && !claimIsMine) {