Comment-selectors: fix memoization

ui/component/channelMentionSuggestions/index.js

@@ -4,12 +4,12 @@ import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { withRouter } from 'react-router';
 import { makeSelectClaimForUri } from 'redux/selectors/claims';
 import { doResolveUris } from 'redux/actions/claims';
-import { makeSelectTopLevelCommentsForUri } from 'redux/selectors/comments';
+import { selectTopLevelCommentsForUri } from 'redux/selectors/comments';
 import ChannelMentionSuggestions from './view';
 
 const select = (state, props) => {
   const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri);
-  const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
+  const topLevelComments = selectTopLevelCommentsForUri(state, props.uri);
 
   const commentorUris = [];
   // Avoid repeated commentors

ui/component/commentsList/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { doResolveUris } from 'redux/actions/claims';
 import {
   makeSelectClaimForUri,
   makeSelectClaimIsMine,
@@ -6,7 +7,7 @@ import {
   selectMyChannelClaims,
 } from 'redux/selectors/claims';
 import {
-  makeSelectTopLevelCommentsForUri,
+  selectTopLevelCommentsForUri,
   makeSelectTopLevelTotalPagesForUri,
   selectIsFetchingComments,
   selectIsFetchingCommentsById,
@@ -16,7 +17,7 @@ import {
   selectMyReacts,
   makeSelectCommentIdsForUri,
   selectSettingsByChannelId,
-  makeSelectPinnedCommentsForUri,
+  selectPinnedCommentsForUri,
 } from 'redux/selectors/comments';
 import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from 'redux/actions/comments';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
@@ -24,11 +25,19 @@ import CommentsList from './view';
 
 const select = (state, props) => {
   const activeChannelClaim = selectActiveChannelClaim(state);
+  const topLevelComments = selectTopLevelCommentsForUri(state, props.uri);
+
+  const resolvedComments =
+    topLevelComments && topLevelComments.length > 0
+      ? topLevelComments.filter(({ channel_url }) => makeSelectClaimForUri(channel_url)(state) !== undefined)
+      : [];
+
   return {
+    topLevelComments,
+    resolvedComments,
     myChannels: selectMyChannelClaims(state),
     allCommentIds: makeSelectCommentIdsForUri(props.uri)(state),
-    pinnedComments: makeSelectPinnedCommentsForUri(props.uri)(state),
+    pinnedComments: selectPinnedCommentsForUri(state, props.uri),
-    topLevelComments: makeSelectTopLevelCommentsForUri(props.uri)(state),
     topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(props.uri)(state),
     totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state),
     claim: makeSelectClaimForUri(props.uri)(state),
@@ -49,6 +58,7 @@ const perform = (dispatch) => ({
   fetchComment: (commentId) => dispatch(doCommentById(commentId)),
   fetchReacts: (commentIds) => dispatch(doCommentReactList(commentIds)),
   resetComments: (claimId) => dispatch(doCommentReset(claimId)),
+  doResolveUris: (uris) => dispatch(doResolveUris(uris, true)),
 });
 
 export default connect(select, perform)(CommentsList);

ui/component/commentsReplies/index.js

@@ -1,15 +1,27 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimIsMine, selectMyChannelClaims } from 'redux/selectors/claims';
+import { doResolveUris } from 'redux/actions/claims';
-import { selectIsFetchingCommentsByParentId, makeSelectRepliesForParentId } from 'redux/selectors/comments';
+import { makeSelectClaimIsMine, selectMyChannelClaims, makeSelectClaimForUri } from 'redux/selectors/claims';
+import { selectIsFetchingCommentsByParentId, selectRepliesForParentId } from 'redux/selectors/comments';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import CommentsReplies from './view';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
+  const fetchedReplies = selectRepliesForParentId(state, props.parentId);
+  const resolvedReplies =
+    fetchedReplies && fetchedReplies.length > 0
+      ? fetchedReplies.filter(({ channel_url }) => makeSelectClaimForUri(channel_url)(state) !== undefined)
+      : [];
+
+  return {
+    fetchedReplies,
+    resolvedReplies,
     claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+    userCanComment: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
     myChannels: selectMyChannelClaims(state),
     isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
-});
+  };
+};
 
-export default connect(select)(CommentsReplies);
+const perform = (dispatch) => ({ doResolveUris: (uris) => dispatch(doResolveUris(uris, true)) });
+
+export default connect(select, perform)(CommentsReplies);

ui/page/ownComments/index.js

@@ -3,7 +3,7 @@ import { doCommentListOwn, doCommentReset } from 'redux/actions/comments';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import {
   selectIsFetchingComments,
-  makeSelectCommentsForUri,
+  selectCommentsForUri,
   makeSelectTotalCommentsCountForUri,
   makeSelectTopLevelTotalPagesForUri,
 } from 'redux/selectors/comments';
@@ -17,7 +17,7 @@ const select = (state) => {
 
   return {
     activeChannelClaim,
-    allComments: makeSelectCommentsForUri(uri)(state),
+    allComments: selectCommentsForUri(state, uri),
     totalComments: makeSelectTotalCommentsCountForUri(uri)(state),
     topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(uri)(state),
     isFetchingComments: selectIsFetchingComments(state),

ui/redux/selectors/comments.js

@@ -1,5 +1,6 @@
 // @flow
 import { createSelector } from 'reselect';
+import { createCachedSelector } from 're-reselect';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc';
@@ -27,13 +28,33 @@ export const selectOthersReactsForComment = (state: State, id: string) => {
   return state.comments.othersReactsByCommentId && state.comments.othersReactsByCommentId[id];
 };
 
+// previously this used a mapping from claimId -> Array<Comments>
+/* export const selectCommentsById = createSelector(
+ selectState,
+ state => state.byId || {}
+ ); */
+export const selectCommentsByUri = createSelector(selectState, (state) => {
+  const byUri = state.commentsByUri || {};
+  const comments = {};
+  Object.keys(byUri).forEach((uri) => {
+    const claimId = byUri[uri];
+    if (claimId === null) {
+      comments[uri] = null;
+    } else {
+      comments[uri] = claimId;
+    }
+  });
+
+  return comments;
+});
+
 export const selectPinnedCommentsById = (state: State) => selectState(state).pinnedCommentsById;
-export const makeSelectPinnedCommentsForUri = (uri: string) =>
+export const selectPinnedCommentsForUri = createCachedSelector(
-  createSelector(
   selectCommentsByUri,
   selectCommentsById,
   selectPinnedCommentsById,
-    (byUri, byId, pinnedCommentsById) => {
+  (state, uri) => uri,
+  (byUri, byId, pinnedCommentsById, uri) => {
     const claimId = byUri[uri];
     const pinnedCommentIds = pinnedCommentsById && pinnedCommentsById[claimId];
     const pinnedComments = [];
@@ -46,7 +67,7 @@ export const makeSelectPinnedCommentsForUri = (uri: string) =>
 
     return pinnedComments;
   }
-  );
+)((state, uri) => uri);
 
 export const selectModerationBlockList = createSelector(
   (state) => selectState(state).moderationBlockList,
@@ -109,8 +130,11 @@ export const selectCommentsByClaimId = createSelector(selectState, selectComment
 // no superchats?
 export const selectSuperchatsByUri = (state: State) => selectState(state).superChatsByUri;
 
-export const selectTopLevelCommentsByClaimId = createSelector(selectState, selectCommentsById, (state, byId) => {
+export const selectTopLevelCommentsByClaimId = createSelector(
-  const byClaimId = state.topLevelCommentsById || {};
+  (state) => selectState(state).topLevelCommentsById,
+  selectCommentsById,
+  (topLevelCommentsById, byId) => {
+    const byClaimId = topLevelCommentsById || {};
     const comments = {};
 
     // replace every comment_id in the list with the actual comment object
@@ -124,7 +148,8 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
     });
 
     return comments;
-});
+  }
+);
 
 export const makeSelectCommentForCommentId = (commentId: string) =>
   createSelector(selectCommentsById, (comments) => comments[commentId]);
@@ -146,26 +171,6 @@ export const selectRepliesByParentId = createSelector(selectState, selectComment
   return comments;
 });
 
-// previously this used a mapping from claimId -> Array<Comments>
-/* export const selectCommentsById = createSelector(
-  selectState,
-  state => state.byId || {}
-); */
-export const selectCommentsByUri = createSelector(selectState, (state) => {
-  const byUri = state.commentsByUri || {};
-  const comments = {};
-  Object.keys(byUri).forEach((uri) => {
-    const claimId = byUri[uri];
-    if (claimId === null) {
-      comments[uri] = null;
-    } else {
-      comments[uri] = claimId;
-    }
-  });
-
-  return comments;
-});
-
 export const selectLinkedCommentAncestors = (state: State) => selectState(state).linkedCommentAncestors;
 
 export const makeSelectCommentIdsForUri = (uri: string) =>
@@ -174,34 +179,48 @@ export const makeSelectCommentIdsForUri = (uri: string) =>
     return state.byId[claimId];
   });
 
+const filterCommentsDepOnList = {
+  claimsById: selectClaimsById,
+  myClaims: selectMyActiveClaims,
+  mutedChannels: selectMutedChannels,
+  personalBlockList: selectModerationBlockList,
+  blacklistedMap: selectBlacklistedOutpointMap,
+  filteredMap: selectFilteredOutpointMap,
+  showMatureContent: selectShowMatureContent,
+};
+
+const filterCommentsPropKeys = Object.keys(filterCommentsDepOnList);
+
 export const selectPendingCommentReacts = (state: State) => selectState(state).pendingCommentReactions;
 export const selectSettingsByChannelId = (state: State) => selectState(state).settingsByChannelId;
 export const selectFetchingCreatorSettings = (state: State) => selectState(state).fetchingSettings;
 export const selectFetchingBlockedWords = (state: State) => selectState(state).fetchingBlockedWords;
 
-export const makeSelectCommentsForUri = (uri: string) =>
+export const selectCommentsForUri = createCachedSelector(
-  createSelector(
+  (state, uri) => uri,
-    (state) => state,
   selectCommentsByClaimId,
   selectCommentsByUri,
-    (state, byClaimId, byUri) => {
+  ...Object.values(filterCommentsDepOnList),
+  (uri, byClaimId, byUri, ...filterInputs) => {
     const claimId = byUri[uri];
     const comments = byClaimId && byClaimId[claimId];
-      return makeSelectFilteredComments(comments, claimId)(state);
+    return filterComments(comments, claimId, filterInputs);
   }
-  );
+)((state, uri) => uri);
 
-export const makeSelectTopLevelCommentsForUri = (uri: string) =>
+export const selectTopLevelCommentsForUri = createCachedSelector(
-  createSelector(
+  (state, uri) => uri,
-    (state) => state,
+  (state, uri, maxCount) => maxCount,
   selectTopLevelCommentsByClaimId,
   selectCommentsByUri,
-    (state, byClaimId, byUri) => {
+  ...Object.values(filterCommentsDepOnList),
+  (uri, maxCount = -1, byClaimId, byUri, ...filterInputs) => {
     const claimId = byUri[uri];
     const comments = byClaimId && byClaimId[claimId];
-      return makeSelectFilteredComments(comments, claimId)(state);
+    const filtered = filterComments(comments, claimId, filterInputs);
+    return maxCount > 0 ? filtered.slice(0, maxCount) : filtered;
   }
-  );
+)((state, uri, maxCount = -1) => `${uri}:${maxCount}`);
 
 export const makeSelectTopLevelTotalCommentsForUri = (uri: string) =>
   createSelector(selectState, selectCommentsByUri, (state, byUri) => {
@@ -215,14 +234,14 @@ export const makeSelectTopLevelTotalPagesForUri = (uri: string) =>
     return state.topLevelTotalPagesById[claimId] || 0;
   });
 
-export const makeSelectRepliesForParentId = (id: string) =>
+export const selectRepliesForParentId = createCachedSelector(
-  createSelector(
+  (state, id) => id,
-    (state) => state,
+  (state) => selectState(state).repliesByParentId,
   selectCommentsById,
-    (state, commentsById) => {
+  ...Object.values(filterCommentsDepOnList),
+  (id, repliesByParentId, commentsById, ...filterInputs) => {
     // const claimId = byUri[uri]; // just parentId (id)
-      const replyIdsByParentId = state.comments.repliesByParentId;
+    const replyIdsForParent = repliesByParentId[id] || [];
-      const replyIdsForParent = replyIdsByParentId[id] || [];
     if (!replyIdsForParent.length) return null;
 
     const comments = [];
@@ -231,38 +250,33 @@ export const makeSelectRepliesForParentId = (id: string) =>
     });
     // const comments = byParentId && byParentId[id];
 
-      return makeSelectFilteredComments(comments)(state);
+    return filterComments(comments, undefined, filterInputs);
   }
-  );
+)((state, id: string) => id);
 
 /**
- * makeSelectFilteredComments
+ * filterComments
  *
  * @param comments List of comments to filter.
  * @param claimId The claim that `comments` reside in.
+ * @oaram filterInputs Values returned by filterCommentsDepOnList.
  */
-const makeSelectFilteredComments = (comments: Array<Comment>, claimId?: string) =>
+const filterComments = (comments: Array<Comment>, claimId?: string, filterInputs: any) => {
-  createSelector(
+  const filterProps = filterInputs.reduce(function (acc, cur, i) {
-    selectClaimsById,
+    acc[filterCommentsPropKeys[i]] = cur;
-    selectMyActiveClaims,
+    return acc;
-    selectMutedChannels,
+  }, {});
-    selectModerationBlockList,
+
-    selectAdminBlockList,
+  const {
-    selectModeratorBlockList,
-    selectBlacklistedOutpointMap,
-    selectFilteredOutpointMap,
-    selectShowMatureContent,
-    (
     claimsById,
     myClaims,
     mutedChannels,
     personalBlockList,
-      adminBlockList,
-      moderatorBlockList,
     blacklistedMap,
     filteredMap,
-      showMatureContent
+    showMatureContent,
-    ) => {
+  } = filterProps;
+
   return comments
     ? comments.filter((comment) => {
         if (!comment) {
@@ -297,7 +311,7 @@ const makeSelectFilteredComments = (comments: Array<Comment>, claimId?: string)
         if (claimId) {
           const claimIdIsMine = myClaims && myClaims.size > 0 && myClaims.has(claimId);
           if (!claimIdIsMine) {
-                if (personalBlockList.includes(comment.channel_url) || adminBlockList.includes(comment.channel_url)) {
+            if (personalBlockList.includes(comment.channel_url)) {
               return false;
             }
           }
@@ -306,8 +320,7 @@ const makeSelectFilteredComments = (comments: Array<Comment>, claimId?: string)
         return !mutedChannels.includes(comment.channel_url);
       })
     : [];
-    }
+};
-  );
 
 export const makeSelectTotalReplyPagesForParentId = (parentId: string) =>
   createSelector(selectState, (state) => {