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);

ui/component/commentsList/view.jsx

@@ -32,6 +32,7 @@ type Props = {
   allCommentIds: any,
   pinnedComments: Array<Comment>,
   topLevelComments: Array<Comment>,
+  resolvedComments: Array<Comment>,
   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<string>) => Promise<any>,
   commentsAreExpanded?: boolean,
+  fetchReacts: (Array<string>) => Promise<any>,
+  doResolveUris: (Array<string>) => 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) => (
       <CommentView
         isTopLevel
         threadDepth={3}
@@ -247,22 +259,19 @@ function CommentList(props: Props) {
         isFiat={comment.is_fiat}
       />
     ));
-  };
 
-  const sortButton = (label, icon, sortOption) => {
-    return (
-      <Button
-        button="alt"
-        label={label}
-        icon={icon}
-        iconSize={18}
-        onClick={() => changeSort(sortOption)}
-        className={classnames(`button-toggle`, {
-          'button-toggle--active': sort === sortOption,
-        })}
-      />
-    );
-  };
+  const sortButton = (label, icon, sortOption) => (
+    <Button
+      button="alt"
+      label={label}
+      icon={icon}
+      iconSize={18}
+      onClick={() => changeSort(sortOption)}
+      className={classnames(`button-toggle`, {
+        'button-toggle--active': sort === sortOption,
+      })}
+    />
+  );
 
   return (
     <Card
@@ -299,7 +308,7 @@ function CommentList(props: Props) {
             })}
           >
             {readyToDisplayComments && pinnedComments && getCommentElems(pinnedComments)}
-            {readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)}
+            {readyToDisplayComments && resolvedComments && getCommentElems(resolvedComments)}
           </ul>
 
           {!hasDefaultExpansion && (