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

CommentReactions: optimize othersReacts selection

Browse source 
One solution is to apply the same factory method used in `Comments` to memoize the selector for each key. Unfortunately, I'm not sure how to re-use the same factory for both `Comments` and `CommentReactions`, so we will be memoizing it twice. This feels a bit dumb.

Since `CommentReactions` is almost-always** a child of `Comments` and using the same comment key, just get the calculated value from the parent through an optional prop.

** notifications uses it too, but I guess we can be inefficient there since it's not a component that's constantly updating.
This commit is contained in:
infinite-persistence 2021-10-05 15:25:56 +08:00
parent 875128fc94
commit dc961b98ac
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/comment/view.jsx
View file

@ -361,7 +361,9 @@ function Comment(props: Props) {
icon={ICONS.REPLY} icon={ICONS.REPLY}
/> />
)} )}
{ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />} {ENABLE_COMMENT_REACTIONS && (
<CommentReactions uri={uri} commentId={commentId} othersReacts={othersReacts} />
)}
</div> </div>
)} )}

6
ui/component/commentReactions/index.js
View file

@ -1,5 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Comment from './view'; import CommentReactions from './view';
import { makeSelectClaimIsMine, makeSelectClaimForUri, doResolveUri } from 'lbry-redux'; import { makeSelectClaimIsMine, makeSelectClaimForUri, doResolveUri } from 'lbry-redux';
import { doToast } from 'redux/actions/notifications'; import { doToast } from 'redux/actions/notifications';
import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments'; import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
@ -15,7 +15,7 @@ const select = (state, props) => {
claim: makeSelectClaimForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state),
myReacts: makeSelectMyReactionsForComment(reactionKey)(state), myReacts: makeSelectMyReactionsForComment(reactionKey)(state),
othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state), othersReacts: props.othersReacts || makeSelectOthersReactionsForComment(reactionKey)(state),
activeChannelId, activeChannelId,
}; };
}; };
@ -26,4 +26,4 @@ const perform = (dispatch) => ({
doToast: (params) => dispatch(doToast(params)), doToast: (params) => dispatch(doToast(params)),
}); });
export default connect(select, perform)(Comment); export default connect(select, perform)(CommentReactions);