Merge origin/local-comments-hl into stable

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.96.0] - Not released
+### Changed
+- Moved comments highlight logic from redux to PostComments' state
 
 ## [1.95.3] - 2021-03-05
 ### Fixed

src/components/post-comment.jsx

@@ -20,13 +20,11 @@ import { CommentEditForm } from './comment-edit-form';
 class PostComment extends Component {
   commentContainer;
   commentForm;
-  commentsAreHighlighted;
 
   constructor(props) {
     super(props);
 
     this.commentForm = null;
-    this.commentsAreHighlighted = false;
   }
 
   scrollToComment = () => {
@@ -53,13 +51,7 @@ class PostComment extends Component {
   }
 
   componentWillUnmount() {
-    if (this.enterTimeout) {
-      clearTimeout(this.enterTimeout);
-    }
-    if (this.commentsAreHighlighted) {
-      this.props.clearHighlightComment(undefined, true);
-      this.commentsAreHighlighted = false;
-    }
+    this.enterTimeout && clearTimeout(this.enterTimeout);
   }
 
   reply = () => this.props.replyWithArrows(this.props.id);
@@ -95,26 +87,9 @@ class PostComment extends Component {
     this.props.deleteComment(this.props.id, this.props.postId),
   );
 
-  userHoverHandlers = {
-    hover: (username) => {
-      this.props.highlightComment(username);
-      this.commentsAreHighlighted = true;
-    },
-    leave: (username) => {
-      this.props.clearHighlightComment(username);
-      this.commentsAreHighlighted = false;
-    },
-  };
-
   arrowHoverHandlers = {
-    hover: (arrows) => {
-      this.props.highlightArrowComment(this.props.id, arrows);
-      this.commentsAreHighlighted = true;
-    },
-    leave: () => {
-      this.props.clearHighlightComment(undefined, true);
-      this.commentsAreHighlighted = false;
-    },
+    hover: (arrows) => this.props.arrowsHighlightHandlers.hover(this.props.id, arrows),
+    leave: () => this.props.arrowsHighlightHandlers.leave(),
   };
 
   renderBody() {
@@ -150,7 +125,7 @@ class PostComment extends Component {
     const authorAndButtons = (
       <span aria-label={`Comment by ${this.props.user.username}`}>
         {' -'}&nbsp;
-        <UserName user={this.props.user} userHover={this.userHoverHandlers} />
+        <UserName user={this.props.user} userHover={this.props.authorHighlightHandlers} />
         {this.props.isEditable ? (
           <span>
             {' '}
@@ -206,7 +181,7 @@ class PostComment extends Component {
             text={this.props.body}
             readMoreStyle={this.props.readMoreStyle}
             highlightTerms={this.props.highlightTerms}
-            userHover={this.userHoverHandlers}
+            userHover={this.props.authorHighlightHandlers}
             arrowHover={this.arrowHoverHandlers}
             showMedia={this.props.showMedia}
           />
@@ -241,7 +216,7 @@ class PostComment extends Component {
   render() {
     const className = classnames({
       comment: true,
-      highlighted: this.props.highlighted,
+      highlighted: this.props.highlightComments && this.props.highlighted,
       'omit-bubble': this.props.omitBubble,
       'is-hidden': !!this.props.hideType,
       'highlight-from-url': this.props.highlightedFromUrl,
@@ -270,7 +245,13 @@ function selectState(state, ownProps) {
   const showTimestamps =
     state.user.frontendPreferences?.comments?.showTimestamps ||
     CONFIG.frontendPreferences.defaultValues.comments.showTimestamps;
-  return { ...editState, showTimestamps, isEditing: ownProps.isEditing || editState.isEditing };
+  const { highlightComments } = state.user.frontendPreferences.comments;
+  return {
+    ...editState,
+    showTimestamps,
+    highlightComments,
+    isEditing: ownProps.isEditing || editState.isEditing,
+  };
 }
 
 export default connect(selectState, null, null, { forwardRef: true })(PostComment);

src/components/post-comments/index.jsx

@@ -27,6 +27,8 @@ export default class PostComments extends Component {
 
   state = {
     folded: true,
+    highlightedAuthor: null,
+    highlightedCommentId: null,
   };
 
   mentionCommentAuthor = (commentId) => {
@@ -106,12 +108,42 @@ export default class PostComments extends Component {
     return false;
   }
 
-  handleHighlightCommentByAuthor = (authorUserName) => {
-    this.props.commentEdit.highlightComment(this.props.post.id, authorUserName);
+  authorHighlightHandlers = {
+    hover: (username) => this.setState({ highlightedAuthor: username }),
+    leave: () => this.setState({ highlightedAuthor: null }),
   };
 
-  handleHighlightCommentByArrows = (comment_id, arrows) => {
-    this.props.commentEdit.highlightComment(this.props.post.id, undefined, arrows, comment_id);
+  arrowsHighlightHandlers = {
+    hover: (baseCommentId, nArrows) => {
+      const {
+        comments,
+        post: { omittedComments, omittedCommentsOffset },
+      } = this.props;
+      let absBaseIndex = comments.findIndex((c) => c.id === baseCommentId);
+      if (absBaseIndex === -1) {
+        // Comment not found
+        return;
+      }
+      if (absBaseIndex >= omittedCommentsOffset) {
+        absBaseIndex += omittedComments;
+      }
+      const absHlIndex = absBaseIndex - nArrows;
+
+      if (absHlIndex < 0) {
+        // Too many arrows
+        return;
+      }
+
+      if (absHlIndex < omittedCommentsOffset) {
+        this.setState({ highlightedCommentId: comments[absHlIndex].id });
+      } else {
+        const hlIndex = absHlIndex - omittedComments;
+        if (hlIndex >= omittedCommentsOffset) {
+          this.setState({ highlightedCommentId: comments[hlIndex].id });
+        }
+      }
+    },
+    leave: () => this.setState({ highlightedCommentId: null }),
   };
 
   renderComment = (comment, index = 0) => {
@@ -129,13 +161,17 @@ export default class PostComments extends Component {
           replyWithArrows={this.replyWithArrows}
           isModeratingComments={props.post.isModeratingComments}
           {...props.commentEdit}
-          highlightComment={this.handleHighlightCommentByAuthor}
-          highlightArrowComment={this.handleHighlightCommentByArrows}
+          authorHighlightHandlers={this.authorHighlightHandlers}
+          arrowsHighlightHandlers={this.arrowsHighlightHandlers}
           showMedia={this.props.showMedia}
           readMoreStyle={props.readMoreStyle}
           highlightTerms={props.highlightTerms}
           currentUser={props.post.user}
           forceAbsTimestamps={props.forceAbsTimestamps}
+          highlighted={
+            comment.user?.username === this.state.highlightedAuthor ||
+            comment.id === this.state.highlightedCommentId
+          }
         />
       )
     );

src/components/select-utils.js

@@ -32,8 +32,6 @@ import {
   addComment,
   toggleEditingComment,
   saveEditingComment,
-  highlightComment,
-  clearHighlightComment,
   likeComment,
   unlikeComment,
   getCommentLikes,
@@ -47,31 +45,8 @@ const MAX_LIKES = 4;
 
 export const ommitBubblesThreshold = 600 * 1000; // 10 min
 
-const allFalse = () => false;
-
 const tokenizeHashtags = hashTags();
 
-const commentHighlighter = ({ commentsHighlights, user, posts }, commentsPostId, commentList) => {
-  const { postId, author, arrows, baseCommentId } = commentsHighlights;
-  const { comments } = user.frontendPreferences;
-  const { omittedComments } = posts[commentsPostId];
-  if (!comments.highlightComments) {
-    return allFalse;
-  }
-
-  if (commentsPostId !== postId) {
-    return allFalse;
-  }
-
-  const baseIndex = commentList.indexOf(baseCommentId);
-  const highlightIndex = baseIndex + omittedComments - arrows;
-  const highlightCommentId = commentList[highlightIndex < baseIndex ? highlightIndex : -1];
-
-  return (commentId, commentAuthor) =>
-    (author && commentAuthor && author === commentAuthor.username) ||
-    highlightCommentId === commentId;
-};
-
 const emptyLikes = Object.freeze({
   likes: Object.freeze([]),
 });
@@ -147,7 +122,6 @@ export const joinPostData = (state) => (postId) => {
   const postViewState = state.postsViewState[post.id];
   const { omitRepeatedBubbles } = state.user.frontendPreferences.comments;
   const hashedCommentId = getCommentId(state.routing.locationBeforeTransitions.hash);
-  const highlightComment = commentHighlighter(state, postId, post.comments);
 
   let prevComment = null;
   const comments = post.comments
@@ -177,7 +151,6 @@ export const joinPostData = (state) => (postId) => {
         omitBubble,
         isEditable: user.id === comment.createdBy,
         isDeletable: isModeratable || isModeratable,
-        highlighted: highlightComment(commentId, author),
         likesList: selectCommentLikes(state, commentId),
         highlightedFromUrl: commentId === hashedCommentId,
       };
@@ -245,9 +218,6 @@ export function postActions(dispatch) {
       saveEditingComment: (commentId, newValue) =>
         dispatch(saveEditingComment(commentId, newValue)),
       deleteComment: (commentId, postId) => dispatch(deleteComment(commentId, postId)),
-      highlightComment: (postId, author, arrows, baseCommentId) =>
-        dispatch(highlightComment(postId, author, arrows, baseCommentId)),
-      clearHighlightComment: (author) => dispatch(clearHighlightComment(author)),
       likeComment: (commentId) => dispatch(likeComment(commentId)),
       unlikeComment: (commentId) => dispatch(unlikeComment(commentId)),
       getCommentLikes: (commentId) => dispatch(getCommentLikes(commentId)),

src/redux/action-creators.js

@@ -745,20 +745,6 @@ export function archiveStartRestoration(params) {
   };
 }
 
-export function highlightComment(postId, author, arrows, baseCommentId) {
-  return {
-    type: ActionTypes.HIGHLIGHT_COMMENT,
-    postId,
-    author,
-    arrows,
-    baseCommentId,
-  };
-}
-
-export function clearHighlightComment(author, force = false) {
-  return { type: ActionTypes.CLEAR_HIGHLIGHT_COMMENT, author, force };
-}
-
 export function blockedByMe() {
   return {
     type: ActionTypes.BLOCKED_BY_ME,

src/redux/action-types.js

@@ -93,8 +93,6 @@ export const UNSUBSCRIBE_FROM_GROUP = 'UNSUBSCRIBE_FROM_GROUP';
 export const MAKE_GROUP_ADMIN = 'MAKE_GROUP_ADMIN';
 export const UNADMIN_GROUP_ADMIN = 'UNADMIN_GROUP_ADMIN';
 export const REVOKE_USER_REQUEST = 'REVOKE_USER_REQUEST';
-export const HIGHLIGHT_COMMENT = 'HIGHLIGHT_COMMENT';
-export const CLEAR_HIGHLIGHT_COMMENT = 'CLEAR_HIGHLIGHT_COMMENT';
 export const BLOCKED_BY_ME = 'BLOCKED_BY_ME';
 export const GET_SUMMARY = 'GET_SUMMARY';
 export const GET_USER_SUMMARY = 'GET_USER_SUMMARY';

src/redux/reducers.js

@@ -1642,20 +1642,6 @@ export function groupAdmins(state = [], action) {
   return state;
 }
 
-export function commentsHighlights(state = {}, action) {
-  switch (action.type) {
-    case ActionTypes.HIGHLIGHT_COMMENT: {
-      return { ...action };
-    }
-    case ActionTypes.CLEAR_HIGHLIGHT_COMMENT: {
-      if (action.force || action.author === state.author) {
-        return {};
-      }
-    }
-  }
-  return state;
-}
-
 const userActionsStatusesStatusMaps = combineReducers({
   subscribing: asyncStatesMap(
     [

test/unit/select-utils/join-post-data.js

@@ -38,7 +38,6 @@ const composeState = ({ subsequentComments, setting, omittedComments = 0, withDe
         createdAt: (2000 + (withDelay ? ommitBubblesThreshold : 0)).toString(10),
       },
     },
-    commentsHighlights: {},
     commentLikes: {},
     commentEditState: {
       [comment1.id]: {},