[Comments] Batch fixes (#65)

2021-10-14 21:14:57 +08:00 · 2021-10-14 21:14:57 +08:00 · 2505d67a7d
commit 2505d67a7d
parent ea516f88dc 03ea298236
4 changed files with 180 additions and 121 deletions
--- 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,19 @@ import CommentsList from './view';

 const select = (state, props) => {
  const activeChannelClaim = selectActiveChannelClaim(state);
+  const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
+
+  const resolvedComments =
+    topLevelComments && topLevelComments.length > 0
+      ? topLevelComments.filter(({ channel_url }) => makeSelectClaimForUri(channel_url)(state) !== undefined)
+      : [];
+
  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 +58,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);
--- a/ui/component/commentsList/view.jsx
+++ b/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,
@ -83,19 +87,24 @@ function CommentList(props: Props) {

  const isMobile = useIsMobile();
  const isMediumScreen = useIsMediumScreen();
+  const desktopView = !isMobile && !isMediumScreen;
  const spinnerRef = React.useRef();
  const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST;
  const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT);
  const [page, setPage] = React.useState(0);
+  const [commentsToDisplay, setCommentsToDisplay] = React.useState(topLevelComments);
  const fetchedCommentsOnce = useFetched(isFetchingComments);
  const fetchedReactsOnce = useFetched(isFetchingReacts);
  const fetchedLinkedComment = useFetched(isFetchingCommentsById);
-  const hasDefaultExpansion = commentsAreExpanded || (!isMobile && !isMediumScreen);
+  const hasDefaultExpansion = commentsAreExpanded || desktopView;
  const [expandedComments, setExpandedComments] = React.useState(hasDefaultExpansion);
  const totalFetchedComments = allCommentIds ? allCommentIds.length : 0;
  const channelId = getChannelIdFromClaim(claim);
  const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
  const moreBelow = page < topLevelTotalPages;
+  const isResolvingComments = topLevelComments && resolvedComments.length !== topLevelComments.length;
+  const alreadyResolved = !isResolvingComments && resolvedComments.length !== 0;
+  const canDisplayComments = commentsToDisplay && commentsToDisplay.length === topLevelComments.length;

  // Display comments immediately if not fetching reactions
  // If not, wait to show comments until reactions are fetched
@ -206,12 +215,12 @@ function CommentList(props: Props) {
    }

    const handleCommentScroll = debounce(() => {
-      if (hasDefaultExpansion && shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
+      if (shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
        setPage(page + 1);
      }
    }, DEBOUNCE_SCROLL_HANDLER_MS);

-    if (!isFetchingComments && readyToDisplayComments && moreBelow && spinnerRef && spinnerRef.current) {
+    if (hasDefaultExpansion && !isFetchingComments && canDisplayComments && readyToDisplayComments && moreBelow) {
      if (shouldFetchNextPage(page, topLevelTotalPages, window, document, 0)) {
        setPage(page + 1);
      } else {
@ -219,10 +228,34 @@ function CommentList(props: Props) {
        return () => window.removeEventListener('scroll', handleCommentScroll);
      }
    }
-  }, [hasDefaultExpansion, isFetchingComments, moreBelow, page, readyToDisplayComments, topLevelTotalPages]);
+  }, [
+    canDisplayComments,
+    hasDefaultExpansion,
+    isFetchingComments,
+    moreBelow,
+    page,
+    readyToDisplayComments,
+    topLevelTotalPages,
+  ]);

-  const getCommentElems = (comments) => {
-    return comments.map((comment) => (
+  // Wait to only display topLevelComments after resolved or else
+  // other components will try to resolve again, like channelThumbnail
+  useEffect(() => {
+    if (!isResolvingComments) setCommentsToDisplay(topLevelComments);
+  }, [isResolvingComments, topLevelComments]);
+
+  // Batch resolve comment channel urls
+  useEffect(() => {
+    if (!topLevelComments || alreadyResolved) return;
+
+    const urisToResolve = [];
+    topLevelComments.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));
+
+    if (urisToResolve.length > 0) doResolveUris(urisToResolve);
+  }, [alreadyResolved, doResolveUris, topLevelComments]);
+
+  const getCommentElems = (comments) =>
+    comments.map((comment) => (
      <CommentView
        isTopLevel
        threadDepth={3}
@ -247,10 +280,8 @@ function CommentList(props: Props) {
        isFiat={comment.is_fiat}
      />
    ));
-  };

-  const sortButton = (label, icon, sortOption) => {
-    return (
+  const sortButton = (label, icon, sortOption) => (
    <Button
      button="alt"
      label={label}
@ -262,7 +293,6 @@ function CommentList(props: Props) {
      })}
    />
  );
-  };

  return (
    <Card
@ -294,12 +324,12 @@ function CommentList(props: Props) {

          <ul
            className={classnames({
-              comments: expandedComments,
-              'comments--contracted': !expandedComments,
+              comments: desktopView || expandedComments,
+              'comments--contracted': !desktopView && !expandedComments,
            })}
          >
            {readyToDisplayComments && pinnedComments && getCommentElems(pinnedComments)}
-            {readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)}
+            {readyToDisplayComments && commentsToDisplay && getCommentElems(commentsToDisplay)}
          </ul>

          {!hasDefaultExpansion && (
@ -323,7 +353,7 @@ function CommentList(props: Props) {
            </div>
          )}

-          {(isFetchingComments || (hasDefaultExpansion && moreBelow)) && (
+          {(isFetchingComments || (hasDefaultExpansion && moreBelow) || !canDisplayComments) && (
            <div className="main--empty" ref={spinnerRef}>
              <Spinner type="small" />
            </div>
--- a/ui/component/commentsReplies/index.js
+++ b/ui/component/commentsReplies/index.js
@ -1,15 +1,26 @@
 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),
+const select = (state, props) => {
+  const fetchedReplies = makeSelectRepliesForParentId(props.parentId)(state);
+  const resolvedReplies =
+    fetchedReplies && fetchedReplies.length > 0
+      ? fetchedReplies.filter(({ channel_url }) => makeSelectClaimForUri(channel_url)(state) !== undefined)
+      : [];
+
+  return {
+    fetchedReplies,
+    resolvedReplies,
    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+    userCanComment: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
    myChannels: selectMyChannelClaims(state),
    isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
-});
+  };
+};

-export default connect(select)(CommentsReplies);
+const perform = (dispatch) => ({ doResolveUris: (uris) => dispatch(doResolveUris(uris, true)) });
+
+export default connect(select, perform)(CommentsReplies);
--- a/ui/component/commentsReplies/view.jsx
+++ b/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,44 +28,45 @@ 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 [commentsToDisplay, setCommentsToDisplay] = React.useState(fetchedReplies);
+  const isResolvingReplies = fetchedReplies && resolvedReplies.length !== fetchedReplies.length;
+  const alreadyResolved = !isResolvingReplies && resolvedReplies.length !== 0;
+  const canDisplayComments = commentsToDisplay && commentsToDisplay.length === fetchedReplies.length;

-  function showMore() {
-    if (onShowMore) {
-      onShowMore();
-    }
-  }
+  // Batch resolve comment channel urls
+  React.useEffect(() => {
+    if (!fetchedReplies || alreadyResolved) return;

-  // 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;
-  }
+    const urisToResolve = [];
+    fetchedReplies.map(({ channel_url }) => channel_url !== undefined && urisToResolve.push(channel_url));

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

-  return (
-    Boolean(numDirectReplies) && (
+  // Wait to only display topLevelComments after resolved or else
+  // other components will try to resolve again, like channelThumbnail
+  React.useEffect(() => {
+    if (!isResolvingReplies) setCommentsToDisplay(fetchedReplies);
+  }, [isResolvingReplies, fetchedReplies]);
+
+  return !numDirectReplies ? null : (
    <div className="comment__replies-container">
-        {Boolean(numDirectReplies) && !isExpanded && (
+      {!isExpanded ? (
        <div className="comment__actions--nested">
          <Button
            className="comment__action"
@ -72,16 +75,15 @@ function CommentsReplies(props: Props) {
            icon={isExpanded ? ICONS.UP : ICONS.DOWN}
          />
        </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 (
+            {!isResolvingReplies &&
+              commentsToDisplay &&
+              commentsToDisplay.length > 0 &&
+              commentsToDisplay.map((comment) => (
                <Comment
                  threadDepth={threadDepth}
                  uri={uri}
@ -93,27 +95,34 @@ function CommentsReplies(props: Props) {
                  message={comment.comment}
                  timePosted={comment.timestamp * 1000}
                  claimIsMine={claimIsMine}
-                        commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
+                  commentIsMine={
+                    comment.channel_id &&
+                    myChannels &&
+                    myChannels.some(({ claim_id }) => claim_id === comment.channel_id)
+                  }
                  linkedCommentId={linkedCommentId}
-                        commentingEnabled={commentingEnabled}
+                  commentingEnabled={userCanComment}
                  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" />
+          <Button
+            button="link"
+            label={__('Show more')}
+            onClick={() => onShowMore && onShowMore()}
+            className="button--uri-indicator"
+          />
        </div>
      )}
-        {isFetchingByParentId[parentId] && (
+      {(isFetchingByParentId[parentId] || isResolvingReplies || !canDisplayComments) && (
        <div className="comment__replies-container">
          <div className="comment__actions--nested">
            <Spinner type="small" />
@ -121,7 +130,6 @@ function CommentsReplies(props: Props) {
        </div>
      )}
    </div>
-    )
  );
 }