[Comments] Batch resolve

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) => {
+  // Batch resolve comment channel urls
-    return comments.map((comment) => (
+  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) => {
+  const sortButton = (label, icon, sortOption) => (
-    return (
+    <Button
-      <Button
+      button="alt"
-        button="alt"
+      label={label}
-        label={label}
+      icon={icon}
-        icon={icon}
+      iconSize={18}
-        iconSize={18}
+      onClick={() => changeSort(sortOption)}
-        onClick={() => changeSort(sortOption)}
+      className={classnames(`button-toggle`, {
-        className={classnames(`button-toggle`, {
+        'button-toggle--active': sort === sortOption,
-          '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 && (

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) => ({
+const select = (state, props) => {
-  fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
+  const fetchedReplies = makeSelectRepliesForParentId(props.parentId)(state);
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  const resolvedReplies = [];
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-  myChannels: selectMyChannelClaims(state),
-  isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
-});
 
-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);

ui/component/commentsReplies/view.jsx

@@ -1,24 +1,26 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import React from 'react';
-import Comment from 'component/comment';
 import Button from 'component/button';
+import Comment from 'component/comment';
+import React from 'react';
 import Spinner from 'component/spinner';
 
 type Props = {
-  fetchedReplies: Array<any>,
+  fetchedReplies: Array<Comment>,
+  resolvedReplies: Array<Comment>,
   uri: string,
   parentId: string,
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
   linkedCommentId?: string,
-  commentingEnabled: boolean,
+  userCanComment: boolean,
   threadDepth: number,
   numDirectReplies: number, // Total replies for parentId as reported by 'comment[replies]'. Includes blocked items.
   isFetchingByParentId: { [string]: boolean },
-  onShowMore?: () => void,
   hasMore: boolean,
   supportDisabled: boolean,
+  doResolveUris: (Array<string>) => void,
+  onShowMore?: () => void,
 };
 
 function CommentsReplies(props: Props) {
@@ -26,102 +28,98 @@ function CommentsReplies(props: Props) {
     uri,
     parentId,
     fetchedReplies,
+    resolvedReplies,
     claimIsMine,
     myChannels,
     linkedCommentId,
-    commentingEnabled,
+    userCanComment,
     threadDepth,
     numDirectReplies,
     isFetchingByParentId,
-    onShowMore,
     hasMore,
     supportDisabled,
+    doResolveUris,
+    onShowMore,
   } = props;
 
   const [isExpanded, setExpanded] = React.useState(true);
+  const isResolvingReplies = fetchedReplies && resolvedReplies.length !== fetchedReplies.length;
 
-  function showMore() {
+  // Batch resolve comment channel urls
-    if (onShowMore) {
+  React.useEffect(() => {
-      onShowMore();
+    if (!fetchedReplies) return;
-    }
-  }
 
-  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
+    const urisToResolve = [];
-  function isMyComment(channelId: string) {
+    fetchedReplies.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));
-    if (myChannels != null && channelId != null) {
-      for (let i = 0; i < myChannels.length; i++) {
-        if (myChannels[i].claim_id === channelId) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
 
-  const displayedComments = fetchedReplies;
+    if (urisToResolve.length > 0) doResolveUris(urisToResolve);
+  }, [fetchedReplies, doResolveUris]);
 
-  return (
+  return !numDirectReplies ? null : (
-    Boolean(numDirectReplies) && (
+    <div className="comment__replies-container">
-      <div className="comment__replies-container">
+      {!isExpanded ? (
-        {Boolean(numDirectReplies) && !isExpanded && (
+        <div className="comment__actions--nested">
+          <Button
+            className="comment__action"
+            label={__('Show Replies')}
+            onClick={() => setExpanded(!isExpanded)}
+            icon={isExpanded ? ICONS.UP : ICONS.DOWN}
+          />
+        </div>
+      ) : (
+        <div className="comment__replies">
+          <Button className="comment__threadline" aria-label="Hide Replies" onClick={() => setExpanded(false)} />
+
+          <ul className="comments--replies">
+            {!isResolvingReplies &&
+              resolvedReplies.length > 0 &&
+              resolvedReplies.map((comment) => (
+                <Comment
+                  threadDepth={threadDepth}
+                  uri={uri}
+                  authorUri={comment.channel_url}
+                  author={comment.channel_name}
+                  claimId={comment.claim_id}
+                  commentId={comment.comment_id}
+                  key={comment.comment_id}
+                  message={comment.comment}
+                  timePosted={comment.timestamp * 1000}
+                  claimIsMine={claimIsMine}
+                  commentIsMine={
+                    comment.channel_id &&
+                    myChannels &&
+                    myChannels.some(({ claim_id }) => claim_id === comment.channel_id)
+                  }
+                  linkedCommentId={linkedCommentId}
+                  commentingEnabled={userCanComment}
+                  supportAmount={comment.support_amount}
+                  numDirectReplies={comment.replies}
+                  isModerator={comment.is_moderator}
+                  isGlobalMod={comment.is_global_mod}
+                  supportDisabled={supportDisabled}
+                />
+              ))}
+          </ul>
+        </div>
+      )}
+      {isExpanded && fetchedReplies && hasMore && (
+        <div className="comment__actions--nested">
+          <Button
+            button="link"
+            label={__('Show more')}
+            onClick={() => onShowMore && onShowMore()}
+            className="button--uri-indicator"
+          />
+        </div>
+      )}
+      {(isFetchingByParentId[parentId] || isResolvingReplies) && (
+        <div className="comment__replies-container">
           <div className="comment__actions--nested">
-            <Button
+            <Spinner type="small" />
-              className="comment__action"
-              label={__('Show Replies')}
-              onClick={() => setExpanded(!isExpanded)}
-              icon={isExpanded ? ICONS.UP : ICONS.DOWN}
-            />
           </div>
-        )}
+        </div>
-        {isExpanded && (
+      )}
-          <div>
+    </div>
-            <div className="comment__replies">
-              <Button className="comment__threadline" aria-label="Hide Replies" onClick={() => setExpanded(false)} />
-
-              <ul className="comments--replies">
-                {displayedComments &&
-                  displayedComments.map((comment) => {
-                    return (
-                      <Comment
-                        threadDepth={threadDepth}
-                        uri={uri}
-                        authorUri={comment.channel_url}
-                        author={comment.channel_name}
-                        claimId={comment.claim_id}
-                        commentId={comment.comment_id}
-                        key={comment.comment_id}
-                        message={comment.comment}
-                        timePosted={comment.timestamp * 1000}
-                        claimIsMine={claimIsMine}
-                        commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-                        linkedCommentId={linkedCommentId}
-                        commentingEnabled={commentingEnabled}
-                        supportAmount={comment.support_amount}
-                        numDirectReplies={comment.replies}
-                        isModerator={comment.is_moderator}
-                        isGlobalMod={comment.is_global_mod}
-                        supportDisabled={supportDisabled}
-                      />
-                    );
-                  })}
-              </ul>
-            </div>
-          </div>
-        )}
-        {isExpanded && fetchedReplies && hasMore && (
-          <div className="comment__actions--nested">
-            <Button button="link" label={__('Show more')} onClick={showMore} className="button--uri-indicator" />
-          </div>
-        )}
-        {isFetchingByParentId[parentId] && (
-          <div className="comment__replies-container">
-            <div className="comment__actions--nested">
-              <Spinner type="small" />
-            </div>
-          </div>
-        )}
-      </div>
-    )
   );
 }