diff --git a/ui/component/commentsReplies/index.js b/ui/component/commentsReplies/index.js index 9f6ae6bb3..74ed3be5c 100644 --- a/ui/component/commentsReplies/index.js +++ b/ui/component/commentsReplies/index.js @@ -1,15 +1,29 @@ import { connect } from 'react-redux'; -import { makeSelectClaimIsMine, selectMyChannelClaims } from 'lbry-redux'; +import { makeSelectClaimIsMine, selectMyChannelClaims, makeSelectClaimForUri, doResolveUris } from 'lbry-redux'; import { selectIsFetchingCommentsByParentId, makeSelectRepliesForParentId } from 'redux/selectors/comments'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; import CommentsReplies from './view'; -const select = (state, props) => ({ - fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state), - claimIsMine: makeSelectClaimIsMine(props.uri)(state), - userCanComment: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, - myChannels: selectMyChannelClaims(state), - isFetchingByParentId: selectIsFetchingCommentsByParentId(state), -}); +const select = (state, props) => { + const fetchedReplies = makeSelectRepliesForParentId(props.parentId)(state); + const resolvedReplies = []; -export default connect(select)(CommentsReplies); + if (fetchedReplies && fetchedReplies.length > 0) { + fetchedReplies.map( + (comment) => Boolean(makeSelectClaimForUri(comment.channel_url)(state)) && resolvedReplies.push(comment) + ); + } + + 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); diff --git a/ui/component/commentsReplies/view.jsx b/ui/component/commentsReplies/view.jsx index ecbd973de..d353789b7 100644 --- a/ui/component/commentsReplies/view.jsx +++ b/ui/component/commentsReplies/view.jsx @@ -6,7 +6,8 @@ import React from 'react'; import Spinner from 'component/spinner'; type Props = { - fetchedReplies: Array, + fetchedReplies: Array, + resolvedReplies: Array, uri: string, parentId: string, claimIsMine: boolean, @@ -18,6 +19,7 @@ type Props = { isFetchingByParentId: { [string]: boolean }, hasMore: boolean, supportDisabled: boolean, + doResolveUris: (Array) => void, onShowMore?: () => void, }; @@ -26,6 +28,7 @@ function CommentsReplies(props: Props) { uri, parentId, fetchedReplies, + resolvedReplies, claimIsMine, myChannels, linkedCommentId, @@ -35,10 +38,22 @@ function CommentsReplies(props: Props) { isFetchingByParentId, hasMore, supportDisabled, + doResolveUris, onShowMore, } = props; const [isExpanded, setExpanded] = React.useState(true); + const isResolvingReplies = fetchedReplies && resolvedReplies.length !== fetchedReplies.length; + + // Batch resolve comment channel urls + React.useEffect(() => { + if (!fetchedReplies) return; + + const urisToResolve = []; + fetchedReplies.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url)); + + if (urisToResolve.length > 0) doResolveUris(urisToResolve); + }, [fetchedReplies, doResolveUris]); return !numDirectReplies ? null : (
@@ -56,8 +71,9 @@ function CommentsReplies(props: Props) {
)} - {isFetchingByParentId[parentId] && ( + {(isFetchingByParentId[parentId] || isResolvingReplies) && (