Merge branch 'master' of github.com:lbryio/lbry-desktop

flow-typed/Comment.js

@@ -45,6 +45,7 @@ declare type CommentsState = {
   isLoading: boolean,
   isLoadingById: boolean,
   isLoadingByParentId: { [string]: boolean },
+  isCommenting: boolean,
   myComments: ?Set<string>,
   isFetchingReacts: boolean,
   myReactsByCommentId: ?{ [string]: Array<string> }, // {"CommentId:MyChannelId": ["like", "dislike", ...]}

package.json

@@ -56,6 +56,7 @@
     "match-sorter": "^6.3.0",
     "parse-duration": "^1.0.0",
     "proxy-polyfill": "0.1.6",
+    "re-reselect": "^4.0.0",
     "react-datetime-picker": "^3.2.1",
     "react-plastic": "^1.1.1",
     "react-top-loading-bar": "^2.0.1",

static/app-strings.json

@@ -2220,5 +2220,7 @@
   "filtered": "filtered",
   "View All Playlists": "View All Playlists",
   "Your wallet is not currently using a cloud sync service. You are in control of backing up your wallet.": "Your wallet is not currently using a cloud sync service. You are in control of backing up your wallet.",
+  "Sending": "Sending",
+  "You sent %lbc%": "You sent %lbc%",
   "--end--": "--end--"
 }

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/claimPreview/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import {
-  makeSelectClaimForUri,
+  selectClaimForUri,
   makeSelectIsUriResolving,
   makeSelectClaimIsMine,
   makeSelectClaimIsPending,
@@ -8,7 +8,7 @@ import {
   makeSelectReflectingClaimForUri,
   makeSelectClaimWasPurchased,
   makeSelectTitleForUri,
-  makeSelectDateForUri,
+  selectDateForUri,
 } from 'redux/selectors/claims';
 import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
 import {
@@ -30,14 +30,14 @@ import ClaimPreview from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
 
 const select = (state, props) => {
-  const claim = props.uri && makeSelectClaimForUri(props.uri)(state);
+  const claim = props.uri && selectClaimForUri(state, props.uri);
   const media = claim && claim.value && (claim.value.video || claim.value.audio);
   const mediaDuration = media && media.duration && formatMediaDuration(media.duration, { screenReader: true });
 
   return {
     claim,
     mediaDuration,
-    date: props.uri && makeSelectDateForUri(props.uri)(state),
+    date: props.uri && selectDateForUri(state, props.uri),
     title: props.uri && makeSelectTitleForUri(props.uri)(state),
     pending: props.uri && makeSelectClaimIsPending(props.uri)(state),
     reflectingProgress: props.uri && makeSelectReflectingClaimForUri(props.uri)(state),
@@ -45,7 +45,6 @@ const select = (state, props) => {
     claimIsMine: props.uri && makeSelectClaimIsMine(props.uri)(state),
     isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
     isResolvingRepost: props.uri && makeSelectIsUriResolving(props.repostUrl)(state),
-    repostClaim: props.uri && makeSelectClaimForUri(props.uri)(state),
     nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
     blackListedOutpoints: selectBlackListedOutpoints(state),
     filteredOutpoints: selectFilteredOutpoints(state),

ui/component/claimPreviewTile/index.js

@@ -6,7 +6,7 @@ import {
   makeSelectTitleForUri,
   makeSelectChannelForClaimUri,
   makeSelectClaimIsNsfw,
-  makeSelectDateForUri,
+  selectDateForUri,
 } from 'redux/selectors/claims';
 import { doFileGet } from 'redux/actions/file';
 import { doResolveUri } from 'redux/actions/claims';
@@ -24,7 +24,7 @@ const select = (state, props) => {
   return {
     claim,
     mediaDuration,
-    date: props.uri && makeSelectDateForUri(props.uri)(state),
+    date: props.uri && selectDateForUri(state, props.uri),
     channel: props.uri && makeSelectChannelForClaimUri(props.uri)(state),
     isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state),
     thumbnail: props.uri && makeSelectThumbnailForUri(props.uri)(state),

ui/component/claimTags/index.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { makeSelectTagsForUri } from 'redux/selectors/claims';
+import { selectTagsForUri } from 'redux/selectors/claims';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import ClaimTags from './view';
 
 const select = (state, props) => ({
-  tags: makeSelectTagsForUri(props.uri)(state),
+  tags: selectTagsForUri(state, props.uri),
   followedTags: selectFollowedTags(state),
 });
 

ui/component/comment/index.js

@@ -12,7 +12,7 @@ import { doSetPlayingUri } from 'redux/actions/content';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import {
   selectLinkedCommentAncestors,
-  makeSelectOthersReactionsForComment,
+  selectOthersReactsForComment,
   makeSelectTotalReplyPagesForParentId,
 } from 'redux/selectors/comments';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
@@ -29,7 +29,7 @@ const select = (state, props) => {
     thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
     channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
     commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-    othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
+    othersReacts: selectOthersReactsForComment(state, reactionKey),
     activeChannelClaim,
     myChannels: selectMyChannelClaims(state),
     playingUri: selectPlayingUri(state),

ui/component/commentReactions/index.js

@@ -3,7 +3,7 @@ import Comment from './view';
 import { makeSelectClaimIsMine, makeSelectClaimForUri } from 'redux/selectors/claims';
 import { doResolveUri } from 'redux/actions/claims';
 import { doToast } from 'redux/actions/notifications';
-import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
+import { selectMyReactsForComment, selectOthersReactsForComment } from 'redux/selectors/comments';
 import { doCommentReact } from 'redux/actions/comments';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 
@@ -15,8 +15,8 @@ const select = (state, props) => {
   return {
     claim: makeSelectClaimForUri(props.uri)(state),
     claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-    myReacts: makeSelectMyReactionsForComment(reactionKey)(state),
+    myReacts: selectMyReactsForComment(state, reactionKey),
-    othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
+    othersReacts: selectOthersReactsForComment(state, reactionKey),
     activeChannelId,
   };
 };

ui/component/commentsList/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { doResolveUris } from 'redux/actions/claims';
 import {
   makeSelectClaimForUri,
   makeSelectClaimIsMine,
@@ -6,17 +7,17 @@ import {
   selectMyChannelClaims,
 } from 'redux/selectors/claims';
 import {
-  makeSelectTopLevelCommentsForUri,
+  selectTopLevelCommentsForUri,
   makeSelectTopLevelTotalPagesForUri,
   selectIsFetchingComments,
   selectIsFetchingCommentsById,
   selectIsFetchingReacts,
   makeSelectTotalCommentsCountForUri,
-  selectOthersReactsById,
+  selectOthersReacts,
-  selectMyReactionsByCommentId,
+  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),
@@ -38,8 +47,8 @@ const select = (state, props) => {
     isFetchingReacts: selectIsFetchingReacts(state),
     fetchingChannels: selectFetchingMyChannels(state),
     settingsByChannelId: selectSettingsByChannelId(state),
-    myReactsByCommentId: selectMyReactionsByCommentId(state),
+    myReactsByCommentId: selectMyReacts(state),
-    othersReactsById: selectOthersReactsById(state),
+    othersReactsById: selectOthersReacts(state),
     activeChannelId: activeChannelClaim && activeChannelClaim.claim_id,
   };
 };
@@ -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);
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  const resolvedReplies =
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+    fetchedReplies && fetchedReplies.length > 0
-  myChannels: selectMyChannelClaims(state),
+      ? fetchedReplies.filter(({ channel_url }) => makeSelectClaimForUri(channel_url)(state) !== undefined)
-  isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
+      : [];
-});
 
-export default connect(select)(CommentsReplies);
+  return {
+    fetchedReplies,
+    resolvedReplies,
+    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+    userCanComment: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+    myChannels: selectMyChannelClaims(state),
+    isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
+  };
+};
+
+const perform = (dispatch) => ({ doResolveUris: (uris) => dispatch(doResolveUris(uris, true)) });
+
+export default connect(select, perform)(CommentsReplies);

ui/component/dateTime/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
-import { makeSelectDateForUri } from 'redux/selectors/claims';
+import { selectDateForUri } from 'redux/selectors/claims';
 import * as SETTINGS from 'constants/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import DateTime from './view';
 
 const select = (state, props) => ({
-  date: props.date || makeSelectDateForUri(props.uri)(state),
+  date: props.date || selectDateForUri(state, props.uri),
   clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
 });
 export default connect(select)(DateTime);

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/actions/comments.js

@@ -9,8 +9,8 @@ import { selectClaimsByUri, selectMyChannelClaims } from 'redux/selectors/claims
 import { doClaimSearch } from 'redux/actions/claims';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
-  makeSelectMyReactionsForComment,
+  selectMyReactsForComment,
-  makeSelectOthersReactionsForComment,
+  selectOthersReactsForComment,
   selectPendingCommentReacts,
   selectModerationBlockList,
   selectModerationDelegatorsById,
@@ -466,8 +466,8 @@ export function doCommentReact(commentId: string, type: string) {
     }
 
     const reactKey = `${commentId}:${activeChannelClaim.claim_id}`;
-    const myReacts = makeSelectMyReactionsForComment(reactKey)(state);
+    const myReacts = selectMyReactsForComment(state, reactKey) || [];
-    const othersReacts = makeSelectOthersReactionsForComment(reactKey)(state);
+    const othersReacts = selectOthersReactsForComment(state, reactKey) || {};
 
     const signatureData = await channelSignName(activeChannelClaim.claim_id, activeChannelClaim.name);
     if (!signatureData) {

ui/redux/reducers/tags.js

@@ -65,11 +65,22 @@ export default handleActions(
     [ACTIONS.USER_STATE_POPULATE]: (state: TagState, action: { data: { tags: ?Array<string> } }) => {
       const { tags } = action.data;
       if (Array.isArray(tags)) {
+        const next = tags && tags.filter((tag) => typeof tag === 'string');
+        const prev = state.followedTags;
+
+        if (next && prev && prev.length === next.length && prev.every((value, index) => value === next[index])) {
+          // No changes
+          return state;
+        }
+
+        // New state
         return {
           ...state,
-          followedTags: tags,
+          followedTags: next || [],
         };
       }
+
+      // Purge 'followedTags'
       return {
         ...state,
       };

ui/redux/selectors/claims.js

@@ -2,20 +2,22 @@
 import { normalizeURI, parseURI, isURIValid } from 'util/lbryURI';
 import { selectSupportsByOutpoint } from 'redux/selectors/wallet';
 import { createSelector } from 'reselect';
+import { createCachedSelector } from 're-reselect';
 import { isClaimNsfw, filterClaims } from 'util/claim';
 import * as CLAIM from 'constants/claim';
 
+type State = { claims: any };
+
 const selectState = (state) => state.claims || {};
 
-export const selectById = createSelector(selectState, (state) => state.byId || {});
+export const selectById = (state: State) => selectState(state).byId || {};
-
+export const selectPendingClaimsById = (state: State) => selectState(state).pendingById || {};
-export const selectPendingClaimsById = createSelector(selectState, (state) => state.pendingById || {});
 
 export const selectClaimsById = createSelector(selectById, selectPendingClaimsById, (byId, pendingById) => {
   return Object.assign(byId, pendingById); // do I need merged to keep metadata?
 });
 
-export const selectClaimIdsByUri = createSelector(selectState, (state) => state.claimsByUri || {});
+export const selectClaimIdsByUri = (state: State) => selectState(state).claimsByUri || {};
 
 export const selectCurrentChannelPage = createSelector(selectState, (state) => state.currentChannelPage || 1);
 
@@ -74,6 +76,43 @@ export const selectReflectingById = createSelector(selectState, (state) => state
 
 export const makeSelectClaimForClaimId = (claimId: string) => createSelector(selectClaimsById, (byId) => byId[claimId]);
 
+export const selectClaimForUri = createCachedSelector(
+  selectClaimIdsByUri,
+  selectClaimsById,
+  (state, uri) => uri,
+  (state, uri, returnRepost = true) => returnRepost,
+  (byUri, byId, uri, returnRepost) => {
+    const validUri = isURIValid(uri);
+
+    if (validUri && byUri) {
+      const claimId = uri && byUri[normalizeURI(uri)];
+      const claim = byId[claimId];
+
+      // Make sure to return the claim as is so apps can check if it's been resolved before (null) or still needs to be resolved (undefined)
+      if (claimId === null) {
+        return null;
+      } else if (claimId === undefined) {
+        return undefined;
+      }
+
+      const repostedClaim = claim && claim.reposted_claim;
+      if (repostedClaim && returnRepost) {
+        const channelUrl =
+          claim.signing_channel && (claim.signing_channel.canonical_url || claim.signing_channel.permanent_url);
+
+        return {
+          ...repostedClaim,
+          repost_url: normalizeURI(uri),
+          repost_channel_url: channelUrl,
+          repost_bid_amount: claim && claim.meta && claim.meta.effective_amount,
+        };
+      } else {
+        return claim;
+      }
+    }
+  }
+)((state, uri, returnRepost = true) => `${uri}:${returnRepost ? '1' : '0'}`);
+
 export const makeSelectClaimForUri = (uri: string, returnRepost: boolean = true) =>
   createSelector(selectClaimIdsByUri, selectClaimsById, (byUri, byId) => {
     const validUri = isURIValid(uri);
@@ -228,6 +267,11 @@ export const makeSelectTotalPagesInChannelSearch = (uri: string) =>
     return byChannel['pageCount'];
   });
 
+export const selectMetadataForUri = createCachedSelector(selectClaimForUri, (claim, uri) => {
+  const metadata = claim && claim.value;
+  return metadata || (claim === undefined ? undefined : null);
+})((state, uri) => uri);
+
 export const makeSelectMetadataForUri = (uri: string) =>
   createSelector(makeSelectClaimForUri(uri), (claim) => {
     const metadata = claim && claim.value;
@@ -242,8 +286,9 @@ export const makeSelectMetadataItemForUri = (uri: string, key: string) =>
 export const makeSelectTitleForUri = (uri: string) =>
   createSelector(makeSelectMetadataForUri(uri), (metadata) => metadata && metadata.title);
 
-export const makeSelectDateForUri = (uri: string) =>
+export const selectDateForUri = createCachedSelector(
-  createSelector(makeSelectClaimForUri(uri), (claim) => {
+  selectClaimForUri, // input: (state, uri, ?returnRepost)
+  (claim) => {
     const timestamp =
       claim &&
       claim.value &&
@@ -257,7 +302,8 @@ export const makeSelectDateForUri = (uri: string) =>
     }
     const dateObj = new Date(timestamp);
     return dateObj;
-  });
+  }
+)((state, uri) => uri);
 
 export const makeSelectAmountForUri = (uri: string) =>
   createSelector(makeSelectClaimForUri(uri), (claim) => {
@@ -493,6 +539,10 @@ export const makeSelectMyChannelPermUrlForName = (name: string) =>
     return matchingClaim ? matchingClaim.permanent_url : null;
   });
 
+export const selectTagsForUri = createCachedSelector(selectMetadataForUri, (metadata: ?GenericMetadata) => {
+  return (metadata && metadata.tags) || [];
+})((state, uri) => uri);
+
 export const makeSelectTagsForUri = (uri: string) =>
   createSelector(makeSelectMetadataForUri(uri), (metadata: ?GenericMetadata) => {
     return (metadata && metadata.tags) || [];

ui/redux/selectors/comments.js

@@ -1,43 +1,79 @@
 // @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';
 import { selectClaimsById, selectMyActiveClaims } from 'redux/selectors/claims';
 import { isClaimNsfw } from 'util/claim';
 
+type State = { comments: CommentsState };
+
 const selectState = (state) => state.comments || {};
 
-export const selectCommentsById = createSelector(selectState, (state) => state.commentById || {});
+export const selectCommentsById = (state: State) => selectState(state).commentById || {};
-export const selectIsFetchingComments = createSelector(selectState, (state) => state.isLoading);
+export const selectIsFetchingComments = (state: State) => selectState(state).isLoading;
-export const selectIsFetchingCommentsById = createSelector(selectState, (state) => state.isLoadingById);
+export const selectIsFetchingCommentsById = (state: State) => selectState(state).isLoadingById;
-export const selectIsFetchingCommentsByParentId = createSelector(selectState, (state) => state.isLoadingByParentId);
+export const selectIsFetchingCommentsByParentId = (state: State) => selectState(state).isLoadingByParentId;
-export const selectIsFetchingReacts = createSelector(selectState, (state) => state.isFetchingReacts);
+export const selectIsFetchingReacts = (state: State) => selectState(state).isFetchingReacts;
-export const selectOthersReactsById = createSelector(selectState, (state) => state.othersReactsByCommentId);
 
-export const selectPinnedCommentsById = createSelector(selectState, (state) => state.pinnedCommentsById);
+export const selectMyReacts = (state: State) => state.comments.myReactsByCommentId;
-export const makeSelectPinnedCommentsForUri = (uri: string) =>
+export const selectMyReactsForComment = (state: State, commentIdChannelId: string) => {
-  createSelector(
+  // @commentIdChannelId: Format = 'commentId:MyChannelId'
-    selectCommentsByUri,
+  return state.comments.myReactsByCommentId && state.comments.myReactsByCommentId[commentIdChannelId];
-    selectCommentsById,
+};
-    selectPinnedCommentsById,
-    (byUri, byId, pinnedCommentsById) => {
-      const claimId = byUri[uri];
-      const pinnedCommentIds = pinnedCommentsById && pinnedCommentsById[claimId];
-      const pinnedComments = [];
 
-      if (pinnedCommentIds) {
+export const selectOthersReacts = (state: State) => state.comments.othersReactsByCommentId;
-        pinnedCommentIds.forEach((commentId) => {
+export const selectOthersReactsForComment = (state: State, id: string) => {
-          pinnedComments.push(byId[commentId]);
+  return state.comments.othersReactsByCommentId && state.comments.othersReactsByCommentId[id];
-        });
+};
-      }
 
-      return pinnedComments;
+// 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;
     }
-  );
+  });
 
-export const selectModerationBlockList = createSelector(selectState, (state) =>
+  return comments;
-  state.moderationBlockList ? state.moderationBlockList.reverse() : []
+});
+
+export const selectPinnedCommentsById = (state: State) => selectState(state).pinnedCommentsById;
+export const selectPinnedCommentsForUri = createCachedSelector(
+  selectCommentsByUri,
+  selectCommentsById,
+  selectPinnedCommentsById,
+  (state, uri) => uri,
+  (byUri, byId, pinnedCommentsById, uri) => {
+    const claimId = byUri[uri];
+    const pinnedCommentIds = pinnedCommentsById && pinnedCommentsById[claimId];
+    const pinnedComments = [];
+
+    if (pinnedCommentIds) {
+      pinnedCommentIds.forEach((commentId) => {
+        pinnedComments.push(byId[commentId]);
+      });
+    }
+
+    return pinnedComments;
+  }
+)((state, uri) => uri);
+
+export const selectModerationBlockList = createSelector(
+  (state) => selectState(state).moderationBlockList,
+  (moderationBlockList) => {
+    return moderationBlockList ? moderationBlockList.reverse() : [];
+  }
 );
 export const selectAdminBlockList = createSelector(selectState, (state) =>
   state.adminBlockList ? state.adminBlockList.reverse() : []
@@ -46,35 +82,19 @@ export const selectModeratorBlockList = createSelector(selectState, (state) =>
   state.moderatorBlockList ? state.moderatorBlockList.reverse() : []
 );
 
-export const selectPersonalTimeoutMap = createSelector(selectState, (state) => state.personalTimeoutMap);
+export const selectPersonalTimeoutMap = (state: State) => selectState(state).personalTimeoutMap;
-export const selectAdminTimeoutMap = createSelector(selectState, (state) => state.adminTimeoutMap);
+export const selectAdminTimeoutMap = (state: State) => selectState(state).adminTimeoutMap;
-export const selectModeratorTimeoutMap = createSelector(selectState, (state) => state.moderatorTimeoutMap);
+export const selectModeratorTimeoutMap = (state: State) => selectState(state).moderatorTimeoutMap;
-
+export const selectModeratorBlockListDelegatorsMap = (state: State) =>
-export const selectModeratorBlockListDelegatorsMap = createSelector(
+  selectState(state).moderatorBlockListDelegatorsMap;
-  selectState,
+export const selectTogglingForDelegatorMap = (state: State) => selectState(state).togglingForDelegatorMap;
-  (state) => state.moderatorBlockListDelegatorsMap
+export const selectBlockingByUri = (state: State) => selectState(state).blockingByUri;
-);
+export const selectUnBlockingByUri = (state: State) => selectState(state).unBlockingByUri;
-
+export const selectFetchingModerationBlockList = (state: State) => selectState(state).fetchingModerationBlockList;
-export const selectTogglingForDelegatorMap = createSelector(selectState, (state) => state.togglingForDelegatorMap);
+export const selectModerationDelegatesById = (state: State) => selectState(state).moderationDelegatesById;
-
+export const selectIsFetchingModerationDelegates = (state: State) => selectState(state).fetchingModerationDelegates;
-export const selectBlockingByUri = createSelector(selectState, (state) => state.blockingByUri);
+export const selectModerationDelegatorsById = (state: State) => selectState(state).moderationDelegatorsById;
-export const selectUnBlockingByUri = createSelector(selectState, (state) => state.unBlockingByUri);
+export const selectIsFetchingModerationDelegators = (state: State) => selectState(state).fetchingModerationDelegators;
-export const selectFetchingModerationBlockList = createSelector(
-  selectState,
-  (state) => state.fetchingModerationBlockList
-);
-
-export const selectModerationDelegatesById = createSelector(selectState, (state) => state.moderationDelegatesById);
-export const selectIsFetchingModerationDelegates = createSelector(
-  selectState,
-  (state) => state.fetchingModerationDelegates
-);
-
-export const selectModerationDelegatorsById = createSelector(selectState, (state) => state.moderationDelegatorsById);
-export const selectIsFetchingModerationDelegators = createSelector(
-  selectState,
-  (state) => state.fetchingModerationDelegators
-);
 
 export const selectHasAdminChannel = createSelector(selectState, (state) => {
   const myChannelIds = Object.keys(state.moderationDelegatorsById);
@@ -107,24 +127,29 @@ export const selectCommentsByClaimId = createSelector(selectState, selectComment
   return comments;
 });
 
-export const selectSuperchatsByUri = createSelector(selectState, (state) => state.superChatsByUri);
+// 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,
-  const comments = {};
+  selectCommentsById,
+  (topLevelCommentsById, byId) => {
+    const byClaimId = topLevelCommentsById || {};
+    const comments = {};
 
-  // replace every comment_id in the list with the actual comment object
+    // replace every comment_id in the list with the actual comment object
-  Object.keys(byClaimId).forEach((claimId) => {
+    Object.keys(byClaimId).forEach((claimId) => {
-    const commentIds = byClaimId[claimId];
+      const commentIds = byClaimId[claimId];
 
-    comments[claimId] = Array(commentIds === null ? 0 : commentIds.length);
+      comments[claimId] = Array(commentIds === null ? 0 : commentIds.length);
-    for (let i = 0; i < commentIds.length; i++) {
+      for (let i = 0; i < commentIds.length; i++) {
-      comments[claimId][i] = byId[commentIds[i]];
+        comments[claimId][i] = byId[commentIds[i]];
-    }
+      }
-  });
+    });
 
-  return comments;
+    return comments;
-});
+  }
+);
 
 export const makeSelectCommentForCommentId = (commentId: string) =>
   createSelector(selectCommentsById, (comments) => comments[commentId]);
@@ -146,27 +171,7 @@ export const selectRepliesByParentId = createSelector(selectState, selectComment
   return comments;
 });
 
-// previously this used a mapping from claimId -> Array<Comments>
+export const selectLinkedCommentAncestors = (state: State) => selectState(state).linkedCommentAncestors;
-/* 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 = createSelector(selectState, (state) => state.linkedCommentAncestors);
 
 export const makeSelectCommentIdsForUri = (uri: string) =>
   createSelector(selectState, selectCommentsByUri, selectClaimsById, (state, byUri) => {
@@ -174,62 +179,48 @@ export const makeSelectCommentIdsForUri = (uri: string) =>
     return state.byId[claimId];
   });
 
-export const selectMyReactionsByCommentId = createSelector(selectState, (state) => state.myReactsByCommentId);
+const filterCommentsDepOnList = {
+  claimsById: selectClaimsById,
+  myClaims: selectMyActiveClaims,
+  mutedChannels: selectMutedChannels,
+  personalBlockList: selectModerationBlockList,
+  blacklistedMap: selectBlacklistedOutpointMap,
+  filteredMap: selectFilteredOutpointMap,
+  showMatureContent: selectShowMatureContent,
+};
 
-/**
+const filterCommentsPropKeys = Object.keys(filterCommentsDepOnList);
- * makeSelectMyReactionsForComment
- *
- * @param commentIdChannelId Format = "commentId:MyChannelId".
- */
-export const makeSelectMyReactionsForComment = (commentIdChannelId: string) =>
-  createSelector(selectState, (state) => {
-    if (!state.myReactsByCommentId) {
-      return [];
-    }
 
-    return state.myReactsByCommentId[commentIdChannelId] || [];
+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 makeSelectOthersReactionsForComment = (commentId: string) =>
+export const selectCommentsForUri = createCachedSelector(
-  createSelector(selectState, (state) => {
+  (state, uri) => uri,
-    if (!state.othersReactsByCommentId) {
+  selectCommentsByClaimId,
-      return {};
+  selectCommentsByUri,
-    }
+  ...Object.values(filterCommentsDepOnList),
+  (uri, byClaimId, byUri, ...filterInputs) => {
+    const claimId = byUri[uri];
+    const comments = byClaimId && byClaimId[claimId];
+    return filterComments(comments, claimId, filterInputs);
+  }
+)((state, uri) => uri);
 
-    return state.othersReactsByCommentId[commentId] || {};
+export const selectTopLevelCommentsForUri = createCachedSelector(
-  });
+  (state, uri) => uri,
-
+  (state, uri, maxCount) => maxCount,
-export const selectPendingCommentReacts = createSelector(selectState, (state) => state.pendingCommentReactions);
+  selectTopLevelCommentsByClaimId,
-
+  selectCommentsByUri,
-export const selectSettingsByChannelId = createSelector(selectState, (state) => state.settingsByChannelId);
+  ...Object.values(filterCommentsDepOnList),
-
+  (uri, maxCount = -1, byClaimId, byUri, ...filterInputs) => {
-export const selectFetchingCreatorSettings = createSelector(selectState, (state) => state.fetchingSettings);
+    const claimId = byUri[uri];
-
+    const comments = byClaimId && byClaimId[claimId];
-export const selectFetchingBlockedWords = createSelector(selectState, (state) => state.fetchingBlockedWords);
+    const filtered = filterComments(comments, claimId, filterInputs);
-
+    return maxCount > 0 ? filtered.slice(0, maxCount) : filtered;
-export const makeSelectCommentsForUri = (uri: string) =>
+  }
-  createSelector(
+)((state, uri, maxCount = -1) => `${uri}:${maxCount}`);
-    (state) => state,
-    selectCommentsByClaimId,
-    selectCommentsByUri,
-    (state, byClaimId, byUri) => {
-      const claimId = byUri[uri];
-      const comments = byClaimId && byClaimId[claimId];
-      return makeSelectFilteredComments(comments, claimId)(state);
-    }
-  );
-
-export const makeSelectTopLevelCommentsForUri = (uri: string) =>
-  createSelector(
-    (state) => state,
-    selectTopLevelCommentsByClaimId,
-    selectCommentsByUri,
-    (state, byClaimId, byUri) => {
-      const claimId = byUri[uri];
-      const comments = byClaimId && byClaimId[claimId];
-      return makeSelectFilteredComments(comments, claimId)(state);
-    }
-  );
 
 export const makeSelectTopLevelTotalCommentsForUri = (uri: string) =>
   createSelector(selectState, selectCommentsByUri, (state, byUri) => {
@@ -243,99 +234,93 @@ 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,
+  selectCommentsById,
-    (state, commentsById) => {
+  ...Object.values(filterCommentsDepOnList),
-      // const claimId = byUri[uri]; // just parentId (id)
+  (id, repliesByParentId, commentsById, ...filterInputs) => {
-      const replyIdsByParentId = state.comments.repliesByParentId;
+    // const claimId = byUri[uri]; // just parentId (id)
-      const replyIdsForParent = replyIdsByParentId[id] || [];
+    const replyIdsForParent = repliesByParentId[id] || [];
-      if (!replyIdsForParent.length) return null;
+    if (!replyIdsForParent.length) return null;
 
-      const comments = [];
+    const comments = [];
-      replyIdsForParent.forEach((cid) => {
+    replyIdsForParent.forEach((cid) => {
-        comments.push(commentsById[cid]);
+      comments.push(commentsById[cid]);
-      });
+    });
-      // const comments = byParentId && byParentId[id];
+    // 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,
+    claimsById,
-    selectBlacklistedOutpointMap,
+    myClaims,
-    selectFilteredOutpointMap,
+    mutedChannels,
-    selectShowMatureContent,
+    personalBlockList,
-    (
+    blacklistedMap,
-      claimsById,
+    filteredMap,
-      myClaims,
+    showMatureContent,
-      mutedChannels,
+  } = filterProps;
-      personalBlockList,
+
-      adminBlockList,
+  return comments
-      moderatorBlockList,
+    ? comments.filter((comment) => {
-      blacklistedMap,
+        if (!comment) {
-      filteredMap,
+          // It may have been recently deleted after being blocked
-      showMatureContent
+          return false;
-    ) => {
+        }
-      return comments
+
-        ? comments.filter((comment) => {
+        const channelClaim = claimsById[comment.channel_id];
-            if (!comment) {
+
-              // It may have been recently deleted after being blocked
+        // Return comment if `channelClaim` doesn't exist so the component knows to resolve the author
+        if (channelClaim) {
+          if (myClaims && myClaims.size > 0) {
+            const claimIsMine = channelClaim.is_my_output || myClaims.has(channelClaim.claim_id);
+            if (claimIsMine) {
+              return true;
+            }
+          }
+
+          const outpoint = `${channelClaim.txid}:${channelClaim.nout}`;
+          if (blacklistedMap[outpoint] || filteredMap[outpoint]) {
+            return false;
+          }
+
+          if (!showMatureContent) {
+            const claimIsMature = isClaimNsfw(channelClaim);
+            if (claimIsMature) {
               return false;
             }
+          }
+        }
 
-            const channelClaim = claimsById[comment.channel_id];
+        if (claimId) {
-
+          const claimIdIsMine = myClaims && myClaims.size > 0 && myClaims.has(claimId);
-            // Return comment if `channelClaim` doesn't exist so the component knows to resolve the author
+          if (!claimIdIsMine) {
-            if (channelClaim) {
+            if (personalBlockList.includes(comment.channel_url)) {
-              if (myClaims && myClaims.size > 0) {
+              return false;
-                const claimIsMine = channelClaim.is_my_output || myClaims.has(channelClaim.claim_id);
-                if (claimIsMine) {
-                  return true;
-                }
-              }
-
-              const outpoint = `${channelClaim.txid}:${channelClaim.nout}`;
-              if (blacklistedMap[outpoint] || filteredMap[outpoint]) {
-                return false;
-              }
-
-              if (!showMatureContent) {
-                const claimIsMature = isClaimNsfw(channelClaim);
-                if (claimIsMature) {
-                  return false;
-                }
-              }
             }
+          }
+        }
 
-            if (claimId) {
+        return !mutedChannels.includes(comment.channel_url);
-              const claimIdIsMine = myClaims && myClaims.size > 0 && myClaims.has(claimId);
+      })
-              if (!claimIdIsMine) {
+    : [];
-                if (personalBlockList.includes(comment.channel_url) || adminBlockList.includes(comment.channel_url)) {
+};
-                  return false;
-                }
-              }
-            }
-
-            return !mutedChannels.includes(comment.channel_url);
-          })
-        : [];
-    }
-  );
 
 export const makeSelectTotalReplyPagesForParentId = (parentId: string) =>
   createSelector(selectState, (state) => {

ui/redux/selectors/tags.js

@@ -1,16 +1,16 @@
 // @flow
 import { createSelector } from 'reselect';
 
-const selectState = (state: { tags: TagState }) => state.tags || {};
+type State = { tags: TagState };
+
+const selectState = (state: State) => state.tags || {};
 
 export const selectKnownTagsByName = createSelector(selectState, (state: TagState): KnownTags => state.knownTags);
 
-export const selectFollowedTagsList = createSelector(selectState, (state: TagState): Array<string> =>
+export const selectFollowedTagsList = (state: State) => selectState(state).followedTags;
-  state.followedTags.filter(tag => typeof tag === 'string')
-);
 
 export const selectFollowedTags = createSelector(selectFollowedTagsList, (followedTags: Array<string>): Array<Tag> =>
-  followedTags.map(tag => ({ name: tag.toLowerCase() })).sort((a, b) => a.name.localeCompare(b.name))
+  followedTags.map((tag) => ({ name: tag.toLowerCase() })).sort((a, b) => a.name.localeCompare(b.name))
 );
 
 export const selectUnfollowedTags = createSelector(
@@ -19,7 +19,7 @@ export const selectUnfollowedTags = createSelector(
   (tagsByName: KnownTags, followedTags: Array<string>): Array<Tag> => {
     const followedTagsSet = new Set(followedTags);
     let tagsToReturn = [];
-    Object.keys(tagsByName).forEach(key => {
+    Object.keys(tagsByName).forEach((key) => {
       if (!followedTagsSet.has(key)) {
         const { name } = tagsByName[key];
         tagsToReturn.push({ name: name.toLowerCase() });
@@ -31,6 +31,6 @@ export const selectUnfollowedTags = createSelector(
 );
 
 export const makeSelectIsFollowingTag = (tag: string) =>
-  createSelector(selectFollowedTags, followedTags => {
+  createSelector(selectFollowedTags, (followedTags) => {
-    return followedTags.some(followedTag => followedTag.name === tag.toLowerCase());
+    return followedTags.some((followedTag) => followedTag.name === tag.toLowerCase());
   });

yarn.lock

@@ -13179,6 +13179,11 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+re-reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/re-reselect/-/re-reselect-4.0.0.tgz#9ddec4c72c4d952f68caa5aa4b76a9ed38b75cac"
+  integrity sha512-wuygyq8TXUlSdVXv2kigXxQNOgdb9m7LbIjwfTNGSpaY1riLd5e+VeQjlQMyUtrk0oiyhi1AqIVynworl3qxHA==
+
 react-async-script@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.1.1.tgz#f481c6c5f094bf4b94a9d52da0d0dda2e1a74bdf"