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
parent b6ad4ae974
commit da63991972
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
6 changed files with 183 additions and 168 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 { 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

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

@ -7,7 +7,7 @@ import {
selectMyChannelClaims,
} from 'redux/selectors/claims';
import {
makeSelectTopLevelCommentsForUri,
selectTopLevelCommentsForUri,
makeSelectTopLevelTotalPagesForUri,
selectIsFetchingComments,
selectIsFetchingCommentsById,
@ -17,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';
@ -25,7 +25,7 @@ import CommentsList from './view';
const select = (state, props) => {
const activeChannelClaim = selectActiveChannelClaim(state);
const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
const topLevelComments = selectTopLevelCommentsForUri(state, props.uri);
const resolvedComments =
topLevelComments && topLevelComments.length > 0
@ -37,7 +37,7 @@ const select = (state, props) => {
resolvedComments,
myChannels: selectMyChannelClaims(state),
allCommentIds: makeSelectCommentIdsForUri(props.uri)(state),
pinnedComments: makeSelectPinnedCommentsForUri(props.uri)(state),
pinnedComments: selectPinnedCommentsForUri(state, props.uri),
topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(props.uri)(state),
totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state),
claim: makeSelectClaimForUri(props.uri)(state),

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

@ -1,12 +1,12 @@
import { connect } from 'react-redux';
import { doResolveUris } from 'redux/actions/claims';
import { makeSelectClaimIsMine, selectMyChannelClaims, makeSelectClaimForUri } from 'redux/selectors/claims';
import { selectIsFetchingCommentsByParentId, makeSelectRepliesForParentId } from 'redux/selectors/comments';
import { selectIsFetchingCommentsByParentId, selectRepliesForParentId } from 'redux/selectors/comments';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import CommentsReplies from './view';
const select = (state, props) => {
const 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)

10
ui/component/livestreamComments/index.js
View file

@ -3,18 +3,20 @@ import { makeSelectClaimForUri, selectMyChannelClaims } from 'redux/selectors/cl
import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
import { doCommentList, doSuperChatList } from 'redux/actions/comments';
import {
makeSelectTopLevelCommentsForUri,
selectTopLevelCommentsForUri,
selectIsFetchingComments,
makeSelectSuperChatsForUri,
makeSelectSuperChatTotalAmountForUri,
makeSelectPinnedCommentsForUri,
selectPinnedCommentsForUri,
} from 'redux/selectors/comments';
import LivestreamComments from './view';
const MAX_LIVESTREAM_COMMENTS = 75;
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
comments: makeSelectTopLevelCommentsForUri(props.uri)(state).slice(0, 75),
pinnedComments: makeSelectPinnedCommentsForUri(props.uri)(state),
comments: selectTopLevelCommentsForUri(state, props.uri, MAX_LIVESTREAM_COMMENTS),
pinnedComments: selectPinnedCommentsForUri(state, props.uri),
fetchingComments: selectIsFetchingComments(state),
superChats: makeSelectSuperChatsForUri(props.uri)(state),
superChatsTotalAmount: makeSelectSuperChatTotalAmountForUri(props.uri)(state),

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 {
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),

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

@ -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) =>
createSelector(
export const selectPinnedCommentsForUri = createCachedSelector(
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,
@ -108,8 +129,11 @@ export const selectCommentsByClaimId = createSelector(selectState, selectComment
export const selectSuperchatsByUri = (state: State) => selectState(state).superChatsByUri;
export const selectTopLevelCommentsByClaimId = createSelector(selectState, selectCommentsById, (state, byId) => {
const byClaimId = state.topLevelCommentsById || {};
export const selectTopLevelCommentsByClaimId = createSelector(
(state) => selectState(state).topLevelCommentsById,
selectCommentsById,
(topLevelCommentsById, byId) => {
const byClaimId = topLevelCommentsById || {};
const comments = {};
// replace every comment_id in the list with the actual comment object
@ -123,7 +147,8 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
});
return comments;
});
}
);
export const makeSelectCommentForCommentId = (commentId: string) =>
createSelector(selectCommentsById, (comments) => comments[commentId]);
@ -145,26 +170,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) =>
@ -173,34 +178,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) =>
createSelector(
(state) => state,
export const selectCommentsForUri = createCachedSelector(
(state, uri) => uri,
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) =>
createSelector(
(state) => state,
export const selectTopLevelCommentsForUri = createCachedSelector(
(state, uri) => uri,
(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) => {
@ -214,14 +233,14 @@ export const makeSelectTopLevelTotalPagesForUri = (uri: string) =>
return state.topLevelTotalPagesById[claimId] || 0;
});
export const makeSelectRepliesForParentId = (id: string) =>
createSelector(
(state) => state,
export const selectRepliesForParentId = createCachedSelector(
(state, id) => id,
(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 = replyIdsByParentId[id] || [];
const replyIdsForParent = repliesByParentId[id] || [];
if (!replyIdsForParent.length) return null;
const comments = [];
@ -230,38 +249,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) =>
createSelector(
selectClaimsById,
selectMyActiveClaims,
selectMutedChannels,
selectModerationBlockList,
selectAdminBlockList,
selectModeratorBlockList,
selectBlacklistedOutpointMap,
selectFilteredOutpointMap,
selectShowMatureContent,
(
const filterComments = (comments: Array<Comment>, claimId?: string, filterInputs: any) => {
const filterProps = filterInputs.reduce(function (acc, cur, i) {
acc[filterCommentsPropKeys[i]] = cur;
return acc;
}, {});
const {
claimsById,
myClaims,
mutedChannels,
personalBlockList,
adminBlockList,
moderatorBlockList,
blacklistedMap,
filteredMap,
showMatureContent
) => {
showMatureContent,
} = filterProps;
return comments
? comments.filter((comment) => {
if (!comment) {
@ -296,7 +310,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;
}
}
@ -305,8 +319,7 @@ const makeSelectFilteredComments = (comments: Array<Comment>, claimId?: string)
return !mutedChannels.includes(comment.channel_url);
})
: [];
}
);
};
export const makeSelectTotalReplyPagesForParentId = (parentId: string) =>
createSelector(selectState, (state) => {