Revert "[Comments] Batch resolve" (#61)

This reverts commit caadd889ce, reversing changes made to 8b2c7a2b21. ## Issue - Infinite `resolve` loop when deleted channel is present in the comments. - Since it was only displayed comments with resolved channels, it masked away those comments. While that may or may not be regarded as a defect, I think we should do it at Commentron instead of at the app if we want to filter deleted channels. I vote to show comments from deleted channels, since it might have good conversation thread.
2021-10-13 20:59:32 +08:00 · 2021-10-13 20:59:32 +08:00 · 0e96f8d468
commit 0e96f8d468
parent d5ad63c6e9
4 changed files with 114 additions and 147 deletions
--- a/ui/component/commentsList/index.js
+++ b/ui/component/commentsList/index.js
@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import {
-  doResolveUris,
  makeSelectClaimForUri,
  makeSelectClaimIsMine,
  selectFetchingMyChannels,
@ -25,21 +24,11 @@ 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),
@ -60,7 +49,6 @@ 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);
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@ -32,7 +32,6 @@ type Props = {
  allCommentIds: any,
  pinnedComments: Array<Comment>,
  topLevelComments: Array<Comment>,
-  resolvedComments: Array<Comment>,
  topLevelTotalPages: number,
  uri: string,
  claim: ?Claim,
@ -48,9 +47,8 @@ type Props = {
  othersReactsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
  activeChannelId: ?string,
  settingsByChannelId: { [channelId: string]: PerChannelSettings },
-  commentsAreExpanded?: boolean,
  fetchReacts: (Array<string>) => Promise<any>,
-  doResolveUris: (Array<string>) => void,
+  commentsAreExpanded?: boolean,
  fetchTopLevelComments: (string, number, number, number) => void,
  fetchComment: (string) => void,
  resetComments: (string) => void,
@ -62,7 +60,6 @@ function CommentList(props: Props) {
    uri,
    pinnedComments,
    topLevelComments,
-    resolvedComments,
    topLevelTotalPages,
    claim,
    claimIsMine,
@ -77,9 +74,8 @@ function CommentList(props: Props) {
    othersReactsById,
    activeChannelId,
    settingsByChannelId,
-    commentsAreExpanded,
    fetchReacts,
-    doResolveUris,
+    commentsAreExpanded,
    fetchTopLevelComments,
    fetchComment,
    resetComments,
@ -225,16 +221,8 @@ function CommentList(props: Props) {
    }
  }, [hasDefaultExpansion, isFetchingComments, moreBelow, page, readyToDisplayComments, topLevelTotalPages]);

-  // 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 getCommentElems = (comments) => {
+    return comments.map((comment) => (
      <CommentView
        isTopLevel
        threadDepth={3}
@ -259,19 +247,22 @@ function CommentList(props: Props) {
        isFiat={comment.is_fiat}
      />
    ));
+  };

-  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,
-      })}
-    />
-  );
+  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,
+        })}
+      />
+    );
+  };

  return (
    <Card
@ -308,7 +299,7 @@ function CommentList(props: Props) {
            })}
          >
            {readyToDisplayComments && pinnedComments && getCommentElems(pinnedComments)}
-            {readyToDisplayComments && resolvedComments && getCommentElems(resolvedComments)}
+            {readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)}
          </ul>

          {!hasDefaultExpansion && (
--- a/ui/component/commentsReplies/index.js
+++ b/ui/component/commentsReplies/index.js
@ -1,29 +1,15 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimIsMine, selectMyChannelClaims, makeSelectClaimForUri, doResolveUris } from 'lbry-redux';
+import { makeSelectClaimIsMine, selectMyChannelClaims } 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 fetchedReplies = makeSelectRepliesForParentId(props.parentId)(state);
-  const resolvedReplies = [];
+const select = (state, props) => ({
+  fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+  myChannels: selectMyChannelClaims(state),
+  isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
+});

-  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);
+export default connect(select)(CommentsReplies);
--- a/ui/component/commentsReplies/view.jsx
+++ b/ui/component/commentsReplies/view.jsx
@ -1,26 +1,24 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import Button from 'component/button';
-import Comment from 'component/comment';
 import React from 'react';
+import Comment from 'component/comment';
+import Button from 'component/button';
 import Spinner from 'component/spinner';

 type Props = {
-  fetchedReplies: Array<Comment>,
-  resolvedReplies: Array<Comment>,
+  fetchedReplies: Array<any>,
  uri: string,
  parentId: string,
  claimIsMine: boolean,
  myChannels: ?Array<ChannelClaim>,
  linkedCommentId?: string,
-  userCanComment: boolean,
+  commentingEnabled: 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) {
@ -28,98 +26,102 @@ function CommentsReplies(props: Props) {
    uri,
    parentId,
    fetchedReplies,
-    resolvedReplies,
    claimIsMine,
    myChannels,
    linkedCommentId,
-    userCanComment,
+    commentingEnabled,
    threadDepth,
    numDirectReplies,
    isFetchingByParentId,
+    onShowMore,
    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;
+  function showMore() {
+    if (onShowMore) {
+      onShowMore();
+    }
+  }

-    const urisToResolve = [];
-    fetchedReplies.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));
+  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
+  function isMyComment(channelId: string) {
+    if (myChannels != null && channelId != null) {
+      for (let i = 0; i < myChannels.length; i++) {
+        if (myChannels[i].claim_id === channelId) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }

-    if (urisToResolve.length > 0) doResolveUris(urisToResolve);
-  }, [fetchedReplies, doResolveUris]);
+  const displayedComments = fetchedReplies;

-  return !numDirectReplies ? null : (
-    <div className="comment__replies-container">
-      {!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">
+  return (
+    Boolean(numDirectReplies) && (
+      <div className="comment__replies-container">
+        {Boolean(numDirectReplies) && !isExpanded && (
          <div className="comment__actions--nested">
-            <Spinner type="small" />
+            <Button
+              className="comment__action"
+              label={__('Show Replies')}
+              onClick={() => setExpanded(!isExpanded)}
+              icon={isExpanded ? ICONS.UP : ICONS.DOWN}
+            />
          </div>
-        </div>
-      )}
-    </div>
+        )}
+        {isExpanded && (
+          <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>
+    )
  );
 }