diff --git a/ui/component/commentsList/index.js b/ui/component/commentsList/index.js index c83dae73b..e9337e39d 100644 --- a/ui/component/commentsList/index.js +++ b/ui/component/commentsList/index.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; import { + doResolveUris, makeSelectClaimForUri, makeSelectClaimIsMine, selectFetchingMyChannels, @@ -24,11 +25,21 @@ import CommentsList from './view'; const select = (state, props) => { const activeChannelClaim = selectActiveChannelClaim(state); + const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state); + const resolvedComments = []; + + if (topLevelComments.length > 0) { + topLevelComments.map( + (comment) => Boolean(makeSelectClaimForUri(comment.channel_url)(state)) && resolvedComments.push(comment) + ); + } + return { + topLevelComments, + resolvedComments, myChannels: selectMyChannelClaims(state), allCommentIds: makeSelectCommentIdsForUri(props.uri)(state), pinnedComments: makeSelectPinnedCommentsForUri(props.uri)(state), - topLevelComments: makeSelectTopLevelCommentsForUri(props.uri)(state), topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(props.uri)(state), totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state), @@ -49,6 +60,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); diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx index debff2d0e..a04e27a8d 100644 --- a/ui/component/commentsList/view.jsx +++ b/ui/component/commentsList/view.jsx @@ -32,6 +32,7 @@ type Props = { allCommentIds: any, pinnedComments: Array, topLevelComments: Array, + resolvedComments: Array, topLevelTotalPages: number, uri: string, claim: ?Claim, @@ -47,8 +48,9 @@ type Props = { othersReactsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } }, activeChannelId: ?string, settingsByChannelId: { [channelId: string]: PerChannelSettings }, - fetchReacts: (Array) => Promise, commentsAreExpanded?: boolean, + fetchReacts: (Array) => Promise, + doResolveUris: (Array) => void, fetchTopLevelComments: (string, number, number, number) => void, fetchComment: (string) => void, resetComments: (string) => void, @@ -60,6 +62,7 @@ function CommentList(props: Props) { uri, pinnedComments, topLevelComments, + resolvedComments, topLevelTotalPages, claim, claimIsMine, @@ -74,8 +77,9 @@ function CommentList(props: Props) { othersReactsById, activeChannelId, settingsByChannelId, - fetchReacts, commentsAreExpanded, + fetchReacts, + doResolveUris, fetchTopLevelComments, fetchComment, resetComments, @@ -221,8 +225,16 @@ function CommentList(props: Props) { } }, [hasDefaultExpansion, isFetchingComments, moreBelow, page, readyToDisplayComments, topLevelTotalPages]); - const getCommentElems = (comments) => { - return comments.map((comment) => ( + // Batch resolve comment channel urls + useEffect(() => { + const urisToResolve = []; + topLevelComments.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url)); + + if (urisToResolve.length > 0) doResolveUris(urisToResolve); + }, [topLevelComments, doResolveUris]); + + const getCommentElems = (comments) => + comments.map((comment) => ( )); - }; - const sortButton = (label, icon, sortOption) => { - return ( -