LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Comment-selectors: fix memoization

Browse source
This commit is contained in:
infinite-persistence 2021-10-11 14:02:17 +08:00 committed by jessopb
parent 4d01452447
commit 0459148e30
5 changed files with 207 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/channelMentionSuggestions/index.js
View file

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

18
ui/component/commentsList/index.js
View file

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

32
ui/component/commentsReplies/index.js
View file

@ -1,15 +1,27 @@
import { connect } from 'react-redux'; 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 { selectUserVerifiedEmail } from 'redux/selectors/user';
import CommentsReplies from './view'; 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);

4
ui/page/ownComments/index.js
View file

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

321
ui/redux/selectors/comments.js
View file

@ -1,5 +1,6 @@
// @flow // @flow
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { createCachedSelector } from 're-reselect';
import { selectMutedChannels } from 'redux/selectors/blocked'; import { selectMutedChannels } from 'redux/selectors/blocked';
import { selectShowMatureContent } from 'redux/selectors/settings'; import { selectShowMatureContent } from 'redux/selectors/settings';
import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc'; import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc';
@ -27,26 +28,46 @@ export const selectOthersReactsForComment = (state: State, id: string) => {
return state.comments.othersReactsByCommentId && state.comments.othersReactsByCommentId[id]; return state.comments.othersReactsByCommentId && state.comments.othersReactsByCommentId[id];
}; };
export const selectPinnedCommentsById = (state: State) => selectState(state).pinnedCommentsById; // previously this used a mapping from claimId -> Array<Comments>
export const makeSelectPinnedCommentsForUri = (uri: string) => /* export const selectCommentsById = createSelector(
createSelector( selectState,
selectCommentsByUri, state => state.byId || {}
selectCommentsById, ); */
selectPinnedCommentsById, export const selectCommentsByUri = createSelector(selectState, (state) => {
(byUri, byId, pinnedCommentsById) => { const byUri = state.commentsByUri || {};
const claimId = byUri[uri]; const comments = {};
const pinnedCommentIds = pinnedCommentsById && pinnedCommentsById[claimId]; Object.keys(byUri).forEach((uri) => {
const pinnedComments = []; const claimId = byUri[uri];
if (claimId === null) {
if (pinnedCommentIds) { comments[uri] = null;
pinnedCommentIds.forEach((commentId) => { } else {
pinnedComments.push(byId[commentId]); comments[uri] = claimId;
});
}
return pinnedComments;
} }
); });
return comments;
});
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( export const selectModerationBlockList = createSelector(
(state) => selectState(state).moderationBlockList, (state) => selectState(state).moderationBlockList,
@ -109,22 +130,26 @@ export const selectCommentsByClaimId = createSelector(selectState, selectComment
// no superchats? // no superchats?
export const selectSuperchatsByUri = (state: State) => selectState(state).superChatsByUri; 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) => export const makeSelectCommentForCommentId = (commentId: string) =>
createSelector(selectCommentsById, (comments) => comments[commentId]); createSelector(selectCommentsById, (comments) => comments[commentId]);
@ -146,26 +171,6 @@ export const selectRepliesByParentId = createSelector(selectState, selectComment
return comments; 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 selectLinkedCommentAncestors = (state: State) => selectState(state).linkedCommentAncestors;
export const makeSelectCommentIdsForUri = (uri: string) => export const makeSelectCommentIdsForUri = (uri: string) =>
@ -174,34 +179,48 @@ export const makeSelectCommentIdsForUri = (uri: string) =>
return state.byId[claimId]; 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 selectPendingCommentReacts = (state: State) => selectState(state).pendingCommentReactions;
export const selectSettingsByChannelId = (state: State) => selectState(state).settingsByChannelId; export const selectSettingsByChannelId = (state: State) => selectState(state).settingsByChannelId;
export const selectFetchingCreatorSettings = (state: State) => selectState(state).fetchingSettings; export const selectFetchingCreatorSettings = (state: State) => selectState(state).fetchingSettings;
export const selectFetchingBlockedWords = (state: State) => selectState(state).fetchingBlockedWords; export const selectFetchingBlockedWords = (state: State) => selectState(state).fetchingBlockedWords;
export const makeSelectCommentsForUri = (uri: string) => export const selectCommentsForUri = createCachedSelector(
createSelector( (state, uri) => uri,
(state) => state, selectCommentsByClaimId,
selectCommentsByClaimId, selectCommentsByUri,
selectCommentsByUri, ...Object.values(filterCommentsDepOnList),
(state, byClaimId, byUri) => { (uri, byClaimId, byUri, ...filterInputs) => {
const claimId = byUri[uri]; const claimId = byUri[uri];
const comments = byClaimId && byClaimId[claimId]; 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, selectTopLevelCommentsByClaimId,
selectCommentsByUri, selectCommentsByUri,
(state, byClaimId, byUri) => { ...Object.values(filterCommentsDepOnList),
const claimId = byUri[uri]; (uri, maxCount = -1, byClaimId, byUri, ...filterInputs) => {
const comments = byClaimId && byClaimId[claimId]; const claimId = byUri[uri];
return makeSelectFilteredComments(comments, claimId)(state); const comments = byClaimId && byClaimId[claimId];
} 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) => export const makeSelectTopLevelTotalCommentsForUri = (uri: string) =>
createSelector(selectState, selectCommentsByUri, (state, byUri) => { createSelector(selectState, selectCommentsByUri, (state, byUri) => {
@ -215,99 +234,93 @@ export const makeSelectTopLevelTotalPagesForUri = (uri: string) =>
return state.topLevelTotalPagesById[claimId] || 0; 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 comments List of comments to filter.
* @param claimId The claim that `comments` reside in. * @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; 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) => export const makeSelectTotalReplyPagesForParentId = (parentId: string) =>
createSelector(selectState, (state) => { createSelector(selectState, (state) => {