Restore comment pagination

This reverts commit e6addb8c2a, reversing
changes made to 47b594107a.

flow-typed/Comment.js

@@ -13,6 +13,7 @@ declare type Comment = {
   parent_id?: number, // comment_id of comment this is in reply to
   is_pinned: boolean,
   support_amount: number,
+  replies: number, // number of direct replies (i.e. excluding nested replies).
 };
 
 declare type PerChannelSettings = {
@@ -27,15 +28,21 @@ declare type PerChannelSettings = {
 declare type CommentsState = {
   commentsByUri: { [string]: string },
   superChatsByUri: { [string]: { totalAmount: number, comments: Array<Comment> } },
-  byId: { [string]: Array<string> },
+  byId: { [string]: Array<string> }, // ClaimID -> list of fetched comment IDs.
-  repliesByParentId: { [string]: Array<string> }, // ParentCommentID -> list of reply comments
+  totalCommentsById: {}, // ClaimId -> ultimate total (including replies) in commentron.
-  topLevelCommentsById: { [string]: Array<string> }, // ClaimID -> list of top level comments
+  repliesByParentId: { [string]: Array<string> }, // ParentCommentID -> list of fetched replies.
+  totalRepliesByParentId: {}, // ParentCommentID -> total replies in commentron.
+  topLevelCommentsById: { [string]: Array<string> }, // ClaimID -> list of fetched top level comments.
+  topLevelTotalPagesById: { [string]: number }, // ClaimID -> total number of top-level pages in commentron. Based on COMMENT_PAGE_SIZE_TOP_LEVEL.
+  topLevelTotalCommentsById: { [string]: number }, // ClaimID -> total top level comments in commentron.
   commentById: { [string]: Comment },
+  linkedCommentAncestors: { [string]: Array<string> }, // {"linkedCommentId": ["parentId", "grandParentId", ...]}
   isLoading: boolean,
+  isLoadingByParentId: { [string]: boolean },
   myComments: ?Set<string>,
   isFetchingReacts: boolean,
-  myReactsByCommentId: any,
+  myReactsByCommentId: ?{ [string]: Array<string> }, // {"CommentId:MyChannelId": ["like", "dislike", ...]}
-  othersReactsByCommentId: any,
+  othersReactsByCommentId: ?{ [string]: { [string]: number } }, // {"CommentId:MyChannelId": {"like": 2, "dislike": 2, ...}}
   pendingCommentReactions: Array<string>,
   moderationBlockList: ?Array<string>, // @KP rename to "personalBlockList"?
   adminBlockList: ?Array<string>,
@@ -64,17 +71,48 @@ declare type CommentReactParams = {
   remove?: boolean,
 };
 
+declare type CommentReactListParams = {
+  comment_ids?: string,
+  channel_id?: string,
+  channel_name?: string,
+  wallet_id?: string,
+  react_types?: string,
+};
+
 declare type CommentListParams = {
-  page: number,
+  page: number,             // pagination: which page of results
-  page_size: number,
+  page_size: number,        // pagination: nr of comments to show in a page (max 200)
-  claim_id: string,
+  claim_id: string,         // claim id of claim being commented on
+  channel_name?: string,    // signing channel name of claim (enables 'commentsEnabled' check)
+  channel_id?: string,      // signing channel claim id of claim (enables 'commentsEnabled' check)
+  author_claim_id?: string, // filters comments to just this author
+  parent_id?: string,       // filters comments to those under this thread
+  top_level?: boolean,      // filters to only top level comments
+  hidden?: boolean,         // if true, will show hidden comments as well
+  sort_by?: number,         // NEWEST=0, OLDEST=1, CONTROVERSY=2, POPULARITY=3,
 };
 
 declare type CommentListResponse = {
   items: Array<Comment>,
-  total_amount: number,
+  page: number,
+  page_size: number,
+  total_items: number,          // Grand total for the claim being commented on.
+  total_filtered_items: number, // Total for filtered queries (e.g. top_level=true, parent_id=xxx, etc.).
+  total_pages: number,
+  has_hidden_comments: boolean,
 };
 
+declare type CommentByIdParams = {
+  comment_id: string,
+  with_ancestors: boolean,
+}
+
+declare type CommentByIdResponse = {
+  item: Comment,
+  items: Comment,
+  ancestors: Array<Comment>,
+}
+
 declare type CommentAbandonParams = {
   comment_id: string,
   creator_channel_id?: string,
@@ -94,6 +132,16 @@ declare type CommentCreateParams = {
 
 declare type SuperListParams = {};
 
+declare type SuperListResponse = {
+  page: number,
+  page_size: number,
+  total_pages: number,
+  total_items: number,
+  total_amount: number,
+  items: Array<Comment>,
+  has_hidden_comments: boolean,
+};
+
 declare type ModerationBlockParams = {};
 
 declare type ModerationAddDelegateParams = {

static/app-strings.json

@@ -1445,6 +1445,7 @@
   "You loved this": "You loved this",
   "Creator loved this": "Creator loved this",
   "A channel is required to throw fire and slime": "A channel is required to throw fire and slime",
+  "The requested comment is no longer available.": "The requested comment is no longer available.",
   "Best": "Best",
   "Controversial": "Controversial",
   "Show Replies": "Show Replies",
@@ -1513,6 +1514,7 @@
   "Create A Channel": "Create A Channel",
   "At least 10 views are required to earn the reward, consume more!": "At least 10 views are required to earn the reward, consume more!",
   "Blocked %channel%": "Blocked %channel%",
+  "Comment(s) blocked.": "Comment(s) blocked.",
   "You earned %lbc% for streaming your first video.": "You earned %lbc% for streaming your first video.",
   "You earned %lbc% for successfully completing The Journey L4: Perfect Harmony.": "You earned %lbc% for successfully completing The Journey L4: Perfect Harmony.",
   "You earned %lbc% for successfully completing The Journey L3: Bliss.": "You earned %lbc% for successfully completing The Journey L3: Bliss.",

ui/comments.js

@@ -17,6 +17,7 @@ const Comments = {
   comment_list: (params: CommentListParams) => fetchCommentsApi('comment.List', params),
   comment_abandon: (params: CommentAbandonParams) => fetchCommentsApi('comment.Abandon', params),
   comment_create: (params: CommentCreateParams) => fetchCommentsApi('comment.Create', params),
+  comment_by_id: (params: CommentByIdParams) => fetchCommentsApi('comment.ByID', params),
   setting_list: (params: SettingsParams) => fetchCommentsApi('setting.List', params),
   setting_block_word: (params: BlockWordParams) => fetchCommentsApi('setting.BlockWord', params),
   setting_unblock_word: (params: BlockWordParams) => fetchCommentsApi('setting.UnBlockWord', params),

ui/component/channelDiscussion/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import { makeSelectCommentForCommentId } from 'redux/selectors/comments';
 import { DISABLE_COMMENTS_TAG } from 'constants/tags';
 import ChannelDiscussion from './view';
 import { makeSelectTagInClaimOrChannelForUri } from 'lbry-redux';
@@ -8,10 +7,9 @@ import { makeSelectTagInClaimOrChannelForUri } from 'lbry-redux';
 const select = (state, props) => {
   const { search } = props.location;
   const urlParams = new URLSearchParams(search);
-  const linkedCommentId = urlParams.get('lc');
 
   return {
-    linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state),
+    linkedCommentId: urlParams.get('lc'),
     commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
   };
 };

ui/component/channelDiscussion/view.jsx

@@ -5,19 +5,19 @@ import Empty from 'component/common/empty';
 
 type Props = {
   uri: string,
-  linkedComment: ?any,
+  linkedCommentId?: string,
   commentsDisabled: boolean,
 };
 
 function ChannelDiscussion(props: Props) {
-  const { uri, linkedComment, commentsDisabled } = props;
+  const { uri, linkedCommentId, commentsDisabled } = props;
 
   if (commentsDisabled) {
     return <Empty text={__('This channel has disabled comments on their page.')} />;
   }
   return (
     <section className="section">
-      <CommentsList uri={uri} linkedComment={linkedComment} />
+      <CommentsList uri={uri} linkedCommentId={linkedCommentId} />
     </section>
   );
 }

ui/component/comment/index.js

@@ -1,30 +1,43 @@
 import { connect } from 'react-redux';
-import { makeSelectStakedLevelForChannelUri, makeSelectClaimForUri, makeSelectThumbnailForUri, selectMyChannelClaims } from 'lbry-redux';
+import {
-import { doCommentUpdate } from 'redux/actions/comments';
+  makeSelectStakedLevelForChannelUri,
+  makeSelectClaimForUri,
+  makeSelectThumbnailForUri,
+  selectMyChannelClaims,
+} from 'lbry-redux';
+import { doCommentUpdate, doCommentList } from 'redux/actions/comments';
 import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { doToast } from 'redux/actions/notifications';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
-import { makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
+import { selectLinkedCommentAncestors, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
-import { selectActiveChannelClaim } from 'redux/selectors/app';
+import { selectActiveChannelId, selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectPlayingUri } from 'redux/selectors/content';
 import Comment from './view';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  claim: makeSelectClaimForUri(props.uri)(state),
+  const activeChannelId = selectActiveChannelId(state);
-  thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
+  const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
-  channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
+
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+  return {
-  othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
+    claim: makeSelectClaimForUri(props.uri)(state),
-  activeChannelClaim: selectActiveChannelClaim(state),
+    thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
-  myChannels: selectMyChannelClaims(state),
+    channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
-  playingUri: selectPlayingUri(state),
+    commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-  stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),
+    othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
-});
+    activeChannelClaim: selectActiveChannelClaim(state),
+    myChannels: selectMyChannelClaims(state),
+    playingUri: selectPlayingUri(state),
+    stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),
+    linkedCommentAncestors: selectLinkedCommentAncestors(state),
+  };
+};
 
 const perform = (dispatch) => ({
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   updateComment: (commentId, comment) => dispatch(doCommentUpdate(commentId, comment)),
+  fetchReplies: (uri, parentId, page, pageSize, sortBy) =>
+    dispatch(doCommentList(uri, parentId, page, pageSize, sortBy)),
   doToast: (options) => dispatch(doToast(options)),
 });
 

ui/component/comment/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
+import { SORT_BY, COMMENT_PAGE_SIZE_REPLIES } from 'constants/comment';
 import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field';
 import { SITE_NAME, SIMPLE_SITE, ENABLE_COMMENT_REACTIONS } from 'config';
 import React, { useEffect, useState } from 'react';
@@ -23,6 +24,8 @@ import CommentMenuList from 'component/commentMenuList';
 import UriIndicator from 'component/uriIndicator';
 import CreditAmount from 'component/common/credit-amount';
 
+const AUTO_EXPAND_ALL_REPLIES = false;
+
 type Props = {
   clearPlayingUri: () => void,
   uri: string,
@@ -36,8 +39,10 @@ type Props = {
   claimIsMine: boolean, // if you control the claim which this comment was posted on
   commentIsMine: boolean, // if this comment was signed by an owned channel
   updateComment: (string, string) => void,
+  fetchReplies: (string, string, number, number, number) => void,
   commentModBlock: (string) => void,
-  linkedComment?: any,
+  linkedCommentId?: string,
+  linkedCommentAncestors: { [string]: Array<string> },
   myChannels: ?Array<ChannelClaim>,
   commentingEnabled: boolean,
   doToast: ({ message: string }) => void,
@@ -53,6 +58,7 @@ type Props = {
   playingUri: ?PlayingUri,
   stakedLevel: number,
   supportAmount: number,
+  numDirectReplies: number,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -71,7 +77,9 @@ function Comment(props: Props) {
     commentIsMine,
     commentId,
     updateComment,
-    linkedComment,
+    fetchReplies,
+    linkedCommentId,
+    linkedCommentAncestors,
     commentingEnabled,
     myChannels,
     doToast,
@@ -82,18 +90,23 @@ function Comment(props: Props) {
     playingUri,
     stakedLevel,
     supportAmount,
+    numDirectReplies,
   } = props;
+
   const {
     push,
     replace,
     location: { pathname, search },
   } = useHistory();
+
   const [isReplying, setReplying] = React.useState(false);
   const [isEditing, setEditing] = useState(false);
   const [editedMessage, setCommentValue] = useState(message);
   const [charCount, setCharCount] = useState(editedMessage.length);
   // used for controlling the visibility of the menu icon
   const [mouseIsHovering, setMouseHover] = useState(false);
+  const [showReplies, setShowReplies] = useState(false);
+  const [page, setPage] = useState(0);
   const [advancedEditor] = usePersistedState('comment-editor-mode', false);
   const [displayDeadComment, setDisplayDeadComment] = React.useState(false);
   const hasChannels = myChannels && myChannels.length > 0;
@@ -111,6 +124,19 @@ function Comment(props: Props) {
     }
   } catch (e) {}
 
+  // Auto-expand (limited to linked-comments for now, but can be for all)
+  useEffect(() => {
+    const isInLinkedCommentChain =
+      linkedCommentId &&
+      linkedCommentAncestors[linkedCommentId] &&
+      linkedCommentAncestors[linkedCommentId].includes(commentId);
+
+    if (isInLinkedCommentChain || AUTO_EXPAND_ALL_REPLIES) {
+      setShowReplies(true);
+      setPage(1);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     if (isEditing) {
       setCharCount(editedMessage.length);
@@ -131,6 +157,12 @@ function Comment(props: Props) {
     }
   }, [author, authorUri, editedMessage, isEditing, setEditing]);
 
+  useEffect(() => {
+    if (page > 0) {
+      fetchReplies(uri, commentId, page, COMMENT_PAGE_SIZE_REPLIES, SORT_BY.OLDEST);
+    }
+  }, [page, uri, commentId, fetchReplies]);
+
   function handleEditMessageChanged(event) {
     setCommentValue(!SIMPLE_SITE && advancedEditor ? event : event.target.value);
   }
@@ -176,7 +208,7 @@ function Comment(props: Props) {
     >
       <div
         className={classnames('comment__content', {
-          'comment--highlighted': linkedComment && linkedComment.comment_id === commentId,
+          'comment--highlighted': linkedCommentId && linkedCommentId === commentId,
           'comment--slimed': slimedToDeath && !displayDeadComment,
         })}
       >
@@ -302,13 +334,43 @@ function Comment(props: Props) {
                   {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
                 </div>
 
+                {numDirectReplies > 0 && !showReplies && (
+                  <div className="comment__actions">
+                    <Button
+                      label={
+                        numDirectReplies < 2
+                          ? __('Show reply')
+                          : __('Show %count% replies', { count: numDirectReplies })
+                      }
+                      button="link"
+                      onClick={() => {
+                        setShowReplies(true);
+                        if (page === 0) {
+                          setPage(1);
+                        }
+                      }}
+                    />
+                  </div>
+                )}
+
+                {numDirectReplies > 0 && showReplies && (
+                  <div className="comment__actions">
+                    <Button label={__('Hide replies')} button="link" onClick={() => setShowReplies(false)} />
+                  </div>
+                )}
+
                 {isReplying && (
                   <CommentCreate
                     isReply
                     uri={uri}
                     parentId={commentId}
-                    onDoneReplying={() => setReplying(false)}
+                    onDoneReplying={() => {
-                    onCancelReplying={() => setReplying(false)}
+                      setShowReplies(true);
+                      setReplying(false);
+                    }}
+                    onCancelReplying={() => {
+                      setReplying(false);
+                    }}
                   />
                 )}
               </>
@@ -317,7 +379,16 @@ function Comment(props: Props) {
         </div>
       </div>
 
-      <CommentsReplies threadDepth={threadDepth - 1} uri={uri} parentId={commentId} linkedComment={linkedComment} />
+      {showReplies && (
+        <CommentsReplies
+          threadDepth={threadDepth - 1}
+          uri={uri}
+          parentId={commentId}
+          linkedCommentId={linkedCommentId}
+          numDirectReplies={numDirectReplies}
+          onShowMore={() => setPage(page + 1)}
+        />
+      )}
     </li>
   );
 }

ui/component/commentCreate/view.jsx

@@ -35,7 +35,6 @@ type Props = {
   toast: (string) => void,
   claimIsMine: boolean,
   sendTip: ({}, (any) => void, (any) => void) => void,
-  justCommented: Array<string>,
 };
 
 export function CommentCreate(props: Props) {
@@ -54,7 +53,6 @@ export function CommentCreate(props: Props) {
     livestream,
     claimIsMine,
     sendTip,
-    justCommented,
   } = props;
   const buttonref: ElementRef<any> = React.useRef();
   const {
@@ -153,7 +151,6 @@ export function CommentCreate(props: Props) {
           setIsReviewingSupportComment(false);
           setIsSupportComment(false);
           setCommentFailure(false);
-          justCommented.push(res.comment_id);
 
           if (onDoneReplying) {
             onDoneReplying();
@@ -217,7 +214,13 @@ export function CommentCreate(props: Props) {
             autoFocus
             button="primary"
             disabled={disabled}
-            label={isSubmitting ? __('Sending...') : (commentFailure && tipAmount === successTip.tipAmount) ? __('Re-submit') : __('Send')}
+            label={
+              isSubmitting
+                ? __('Sending...')
+                : commentFailure && tipAmount === successTip.tipAmount
+                ? __('Re-submit')
+                : __('Send')
+            }
             onClick={handleSupportComment}
           />
           <Button button="link" label={__('Cancel')} onClick={() => setIsReviewingSupportComment(false)} />

ui/component/commentMenuList/index.js

@@ -3,7 +3,6 @@ import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectC
 import {
   doCommentAbandon,
   doCommentPin,
-  doCommentList,
   doCommentModBlock,
   doCommentModBlockAsAdmin,
   doCommentModBlockAsModerator,
@@ -30,8 +29,7 @@ const perform = (dispatch) => ({
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
   muteChannel: (channelUri) => dispatch(doChannelMute(channelUri)),
-  pinComment: (commentId, remove) => dispatch(doCommentPin(commentId, remove)),
+  pinComment: (commentId, claimId, remove) => dispatch(doCommentPin(commentId, claimId, remove)),
-  fetchComments: (uri) => dispatch(doCommentList(uri)),
   //   setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)),
   commentModBlock: (commenterUri) => dispatch(doCommentModBlock(commenterUri)),
   commentModBlockAsAdmin: (commenterUri, blockerId) => dispatch(doCommentModBlockAsAdmin(commenterUri, blockerId)),

ui/component/commentMenuList/view.jsx

@@ -7,18 +7,15 @@ import Icon from 'component/common/icon';
 import { parseURI } from 'lbry-redux';
 
 type Props = {
-  uri: string,
   claim: ?Claim,
   clearPlayingUri: () => void,
   authorUri: string, // full LBRY Channel URI: lbry://@channel#123...
   commentId: string, // sha256 digest identifying the comment
   commentIsMine: boolean, // if this comment was signed by an owned channel
   deleteComment: (string, ?string) => void,
-  linkedComment?: any,
   isPinned: boolean,
-  pinComment: (string, boolean) => Promise<any>,
+  pinComment: (string, string, boolean) => Promise<any>,
   muteChannel: (string) => void,
-  fetchComments: (string) => void,
   handleEditComment: () => void,
   contentChannelPermanentUrl: any,
   activeChannelClaim: ?ChannelClaim,
@@ -35,7 +32,6 @@ type Props = {
 
 function CommentMenuList(props: Props) {
   const {
-    uri,
     claim,
     authorUri,
     commentIsMine,
@@ -49,7 +45,6 @@ function CommentMenuList(props: Props) {
     isTopLevel,
     isPinned,
     handleEditComment,
-    fetchComments,
     commentModBlock,
     commentModBlockAsAdmin,
     commentModBlockAsModerator,
@@ -77,8 +72,8 @@ function CommentMenuList(props: Props) {
     activeModeratorInfo &&
     Object.values(activeModeratorInfo.delegators).includes(contentChannelClaim.claim_id);
 
-  function handlePinComment(commentId, remove) {
+  function handlePinComment(commentId, claimId, remove) {
-    pinComment(commentId, remove).then(() => fetchComments(uri));
+    pinComment(commentId, claimId, remove);
   }
 
   function handleDeleteComment() {
@@ -122,7 +117,7 @@ function CommentMenuList(props: Props) {
       {activeChannelIsCreator && isTopLevel && (
         <MenuItem
           className="comment__menu-option menu__link"
-          onSelect={isPinned ? () => handlePinComment(commentId, true) : () => handlePinComment(commentId, false)}
+          onSelect={() => handlePinComment(commentId, claim ? claim.claim_id : '', isPinned)}
         >
           <span className={'button__content'}>
             <Icon aria-hidden icon={ICONS.PIN} className={'icon'} />

ui/component/commentReactions/index.js

@@ -6,17 +6,22 @@ import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment }
 import { doCommentReact } from 'redux/actions/comments';
 import { selectActiveChannelId } from 'redux/selectors/app';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  claim: makeSelectClaimForUri(props.uri)(state),
+  const activeChannelId = selectActiveChannelId(state);
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
-  myReacts: makeSelectMyReactionsForComment(props.commentId)(state),
-  othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
-  activeChannelId: selectActiveChannelId(state),
-});
 
-const perform = dispatch => ({
+  return {
+    claim: makeSelectClaimForUri(props.uri)(state),
+    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+    myReacts: makeSelectMyReactionsForComment(reactionKey)(state),
+    othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
+    activeChannelId,
+  };
+};
+
+const perform = (dispatch) => ({
   react: (commentId, type) => dispatch(doCommentReact(commentId, type)),
-  doToast: params => dispatch(doToast(params)),
+  doToast: (params) => dispatch(doToast(params)),
 });
 
 export default connect(select, perform)(Comment);

ui/component/commentsList/index.js

@@ -2,32 +2,42 @@ import { connect } from 'react-redux';
 import { makeSelectClaimIsMine, selectFetchingMyChannels, selectMyChannelClaims } from 'lbry-redux';
 import {
   makeSelectTopLevelCommentsForUri,
+  makeSelectTopLevelTotalPagesForUri,
   selectIsFetchingComments,
   makeSelectTotalCommentsCountForUri,
   selectOthersReactsById,
   makeSelectCommentsDisabledForUri,
+  selectMyReactionsByCommentId,
+  makeSelectCommentIdsForUri,
 } from 'redux/selectors/comments';
-import { doCommentList, doCommentReactList } from 'redux/actions/comments';
+import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from 'redux/actions/comments';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectActiveChannelId } from 'redux/selectors/app';
 import CommentsList from './view';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  myChannels: selectMyChannelClaims(state),
+  return {
-  comments: makeSelectTopLevelCommentsForUri(props.uri)(state),
+    myChannels: selectMyChannelClaims(state),
-  totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state),
+    allCommentIds: makeSelectCommentIdsForUri(props.uri)(state),
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+    topLevelComments: makeSelectTopLevelCommentsForUri(props.uri)(state),
-  isFetchingComments: selectIsFetchingComments(state),
+    topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(props.uri)(state),
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+    totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state),
-  commentsDisabledBySettings: makeSelectCommentsDisabledForUri(props.uri)(state),
+    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  fetchingChannels: selectFetchingMyChannels(state),
+    isFetchingComments: selectIsFetchingComments(state),
-  reactionsById: selectOthersReactsById(state),
+    commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-  activeChannelId: selectActiveChannelId(state),
+    commentsDisabledBySettings: makeSelectCommentsDisabledForUri(props.uri)(state),
-});
+    fetchingChannels: selectFetchingMyChannels(state),
+    myReactsByCommentId: selectMyReactionsByCommentId(state),
+    othersReactsById: selectOthersReactsById(state),
+    activeChannelId: selectActiveChannelId(state),
+  };
+};
 
 const perform = (dispatch) => ({
-  fetchComments: (uri) => dispatch(doCommentList(uri)),
+  fetchTopLevelComments: (uri, page, pageSize, sortBy) => dispatch(doCommentList(uri, '', page, pageSize, sortBy)),
-  fetchReacts: (uri) => dispatch(doCommentReactList(uri)),
+  fetchComment: (commentId) => dispatch(doCommentById(commentId)),
+  fetchReacts: (commentIds) => dispatch(doCommentReactList(commentIds)),
+  resetComments: (uri) => dispatch(doCommentReset(uri)),
 });
 
 export default connect(select, perform)(CommentsList);

ui/component/commentsList/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as REACTION_TYPES from 'constants/reactions';
 import * as ICONS from 'constants/icons';
-import { SORT_COMMENTS_NEW, SORT_COMMENTS_BEST, SORT_COMMENTS_CONTROVERSIAL } from 'constants/comment';
+import { COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY } from 'constants/comment';
 import React, { useEffect } from 'react';
 import classnames from 'classnames';
 import CommentView from 'component/comment';
@@ -11,59 +11,78 @@ import Card from 'component/common/card';
 import CommentCreate from 'component/commentCreate';
 import usePersistedState from 'effects/use-persisted-state';
 import { ENABLE_COMMENT_REACTIONS } from 'config';
-import { sortComments } from 'util/comments';
 import Empty from 'component/common/empty';
+import debounce from 'util/debounce';
+
+const DEBOUNCE_SCROLL_HANDLER_MS = 200;
+
+function scaleToDevicePixelRatio(value) {
+  const devicePixelRatio = window.devicePixelRatio || 1.0;
+  if (devicePixelRatio < 1.0) {
+    return Math.ceil(value / devicePixelRatio);
+  }
+  return Math.ceil(value * devicePixelRatio);
+}
 
 type Props = {
-  comments: Array<Comment>,
+  allCommentIds: any,
+  topLevelComments: Array<Comment>,
+  topLevelTotalPages: number,
   commentsDisabledBySettings: boolean,
-  fetchComments: (string) => void,
+  fetchTopLevelComments: (string, number, number, number) => void,
-  fetchReacts: (string) => Promise<any>,
+  fetchComment: (string) => void,
+  fetchReacts: (Array<string>) => Promise<any>,
+  resetComments: (string) => void,
   uri: string,
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
   isFetchingComments: boolean,
-  linkedComment: any,
+  linkedCommentId?: string,
   totalComments: number,
   fetchingChannels: boolean,
-  reactionsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
+  myReactsByCommentId: ?{ [string]: Array<string> }, // "CommentId:MyChannelId" -> reaction array (note the ID concatenation)
+  othersReactsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
   activeChannelId: ?string,
 };
 
 function CommentList(props: Props) {
   const {
-    fetchComments,
+    allCommentIds,
+    fetchTopLevelComments,
+    fetchComment,
     fetchReacts,
+    resetComments,
     uri,
-    comments,
+    topLevelComments,
+    topLevelTotalPages,
     commentsDisabledBySettings,
     claimIsMine,
     myChannels,
     isFetchingComments,
-    linkedComment,
+    linkedCommentId,
     totalComments,
     fetchingChannels,
-    reactionsById,
+    myReactsByCommentId,
+    othersReactsById,
     activeChannelId,
   } = props;
+
   const commentRef = React.useRef();
   const spinnerRef = React.useRef();
-  const [sort, setSort] = usePersistedState(
+  const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST;
-    'comment-sort',
+  const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT);
-    ENABLE_COMMENT_REACTIONS ? SORT_COMMENTS_BEST : SORT_COMMENTS_NEW
+  const [page, setPage] = React.useState(0);
-  );
+  const totalFetchedComments = allCommentIds ? allCommentIds.length : 0;
 
-  const [start] = React.useState(0);
-  const [end, setEnd] = React.useState(9);
   // Display comments immediately if not fetching reactions
   // If not, wait to show comments until reactions are fetched
   const [readyToDisplayComments, setReadyToDisplayComments] = React.useState(
-    Boolean(reactionsById) || !ENABLE_COMMENT_REACTIONS
+    Boolean(othersReactsById) || !ENABLE_COMMENT_REACTIONS
   );
-  const [justCommented] = React.useState([]);
+
-  const linkedCommentId = linkedComment && linkedComment.comment_id;
   const hasNoComments = !totalComments;
-  const moreBelow = totalComments - end > 0;
+  const moreBelow = page < topLevelTotalPages;
+
   const isMyComment = (channelId: string): boolean => {
     if (myChannels != null && channelId != null) {
       for (let i = 0; i < myChannels.length; i++) {
@@ -75,86 +94,124 @@ function CommentList(props: Props) {
     return false;
   };
 
-  const handleMoreBelow = React.useCallback(() => {
+  function changeSort(newSort) {
-    if (moreBelow) {
+    if (sort !== newSort) {
-      setEnd(end + 10);
+      setSort(newSort);
+      setPage(0); // Invalidate existing comments
     }
-  }, [end, setEnd, moreBelow]);
+  }
 
+  // Reset comments
   useEffect(() => {
-    fetchComments(uri);
+    if (page === 0) {
-  }, [fetchComments, uri]);
+      resetComments(uri);
-
+      setPage(1);
-  useEffect(() => {
-    if (totalComments && ENABLE_COMMENT_REACTIONS && !fetchingChannels) {
-      fetchReacts(uri)
-        .then(() => {
-          setReadyToDisplayComments(true);
-        })
-        .catch(() => setReadyToDisplayComments(true));
     }
-  }, [fetchReacts, uri, totalComments, activeChannelId, fetchingChannels]);
+  }, [page, uri, resetComments]);
 
+  // Fetch top-level comments
+  useEffect(() => {
+    if (page !== 0) {
+      if (page === 1 && linkedCommentId) {
+        fetchComment(linkedCommentId);
+      }
+
+      fetchTopLevelComments(uri, page, COMMENT_PAGE_SIZE_TOP_LEVEL, sort);
+    }
+  }, [fetchTopLevelComments, uri, page, resetComments, sort, linkedCommentId, fetchComment]);
+
+  // Fetch reacts
+  useEffect(() => {
+    if (totalFetchedComments > 0 && ENABLE_COMMENT_REACTIONS && !fetchingChannels) {
+      let idsForReactionFetch;
+
+      if (!othersReactsById || !myReactsByCommentId) {
+        idsForReactionFetch = allCommentIds;
+      } else {
+        idsForReactionFetch = allCommentIds.filter((commentId) => {
+          const key = activeChannelId ? `${commentId}:${activeChannelId}` : commentId;
+          return !othersReactsById[key] || (activeChannelId && !myReactsByCommentId[key]);
+        });
+      }
+
+      if (idsForReactionFetch.length !== 0) {
+        fetchReacts(idsForReactionFetch)
+          .then(() => {
+            setReadyToDisplayComments(true);
+          })
+          .catch(() => setReadyToDisplayComments(true));
+      }
+    }
+  }, [
+    totalFetchedComments,
+    allCommentIds,
+    othersReactsById,
+    myReactsByCommentId,
+    fetchReacts,
+    uri,
+    activeChannelId,
+    fetchingChannels,
+  ]);
+
+  // Scroll to linked-comment
   useEffect(() => {
     if (readyToDisplayComments && linkedCommentId && commentRef && commentRef.current) {
       commentRef.current.scrollIntoView({ block: 'start' });
-      window.scrollBy(0, -100);
+      window.scrollBy(0, -125);
     }
   }, [readyToDisplayComments, linkedCommentId]);
 
+  // Infinite scroll
   useEffect(() => {
-    function handleCommentScroll(e) {
+    function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) {
-      // $FlowFixMe
+      if (!spinnerRef || !spinnerRef.current) {
-      const rect = spinnerRef.current.getBoundingClientRect();
+        return false;
+      }
+
+      const rect = spinnerRef.current.getBoundingClientRect(); // $FlowFixMe
+      const windowH = window.innerHeight || document.documentElement.clientHeight; // $FlowFixMe
+      const windowW = window.innerWidth || document.documentElement.clientWidth; // $FlowFixMe
+
+      const isApproachingViewport = yPrefetchPx !== 0 && rect.top < windowH + scaleToDevicePixelRatio(yPrefetchPx);
 
       const isInViewport =
-        rect.top >= 0 &&
+        rect.width > 0 &&
-        rect.left >= 0 &&
+        rect.height > 0 &&
+        rect.bottom >= 0 &&
+        rect.right >= 0 &&
         // $FlowFixMe
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.top <= windowH &&
         // $FlowFixMe
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+        rect.left <= windowW;
 
-      if (isInViewport) {
+      return (isInViewport || isApproachingViewport) && page < topLevelTotalPages;
-        handleMoreBelow();
-      }
     }
 
+    const handleCommentScroll = debounce(() => {
+      if (shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
+        setPage(page + 1);
+      }
+    }, DEBOUNCE_SCROLL_HANDLER_MS);
+
     if (!isFetchingComments && readyToDisplayComments && moreBelow && spinnerRef && spinnerRef.current) {
-      window.addEventListener('scroll', handleCommentScroll);
+      if (shouldFetchNextPage(page, topLevelTotalPages, window, document, 0)) {
-    }
+        setPage(page + 1);
-
-    return () => window.removeEventListener('scroll', handleCommentScroll);
-  }, [moreBelow, handleMoreBelow, spinnerRef, isFetchingComments, readyToDisplayComments]);
-
-  function prepareComments(arrayOfComments, linkedComment, isFetchingComments) {
-    let orderedComments = [];
-
-    if (linkedComment) {
-      if (!linkedComment.parent_id) {
-        orderedComments = arrayOfComments.filter((c) => c.comment_id !== linkedComment.comment_id);
-        orderedComments.unshift(linkedComment);
       } else {
-        const parentComment = arrayOfComments.find((c) => c.comment_id === linkedComment.parent_id);
+        window.addEventListener('scroll', handleCommentScroll);
-        orderedComments = arrayOfComments.filter((c) => c.comment_id !== linkedComment.parent_id);
+        return () => window.removeEventListener('scroll', handleCommentScroll);
-
-        if (parentComment) {
-          orderedComments.unshift(parentComment);
-        }
       }
-    } else {
-      orderedComments = arrayOfComments;
     }
-    return orderedComments;
+  }, [
-  }
+    page,
+    moreBelow,
+    spinnerRef,
+    isFetchingComments,
+    readyToDisplayComments,
+    topLevelComments.length,
+    topLevelTotalPages,
+  ]);
 
-  // Default to newest first for apps that don't have comment reactions
+  const displayedComments = readyToDisplayComments ? topLevelComments : [];
-  const sortedComments = reactionsById
-    ? sortComments({ comments, reactionsById, sort, isMyComment, justCommented })
-    : [];
-  const displayedComments = readyToDisplayComments
-    ? prepareComments(sortedComments, linkedComment).slice(start, end)
-    : [];
 
   return (
     <Card
@@ -174,9 +231,9 @@ function CommentList(props: Props) {
                 label={__('Best')}
                 icon={ICONS.BEST}
                 iconSize={18}
-                onClick={() => setSort(SORT_COMMENTS_BEST)}
+                onClick={() => changeSort(SORT_BY.POPULARITY)}
                 className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_COMMENTS_BEST,
+                  'button-toggle--active': sort === SORT_BY.POPULARITY,
                 })}
               />
               <Button
@@ -184,9 +241,9 @@ function CommentList(props: Props) {
                 label={__('Controversial')}
                 icon={ICONS.CONTROVERSIAL}
                 iconSize={18}
-                onClick={() => setSort(SORT_COMMENTS_CONTROVERSIAL)}
+                onClick={() => changeSort(SORT_BY.CONTROVERSY)}
                 className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_COMMENTS_CONTROVERSIAL,
+                  'button-toggle--active': sort === SORT_BY.CONTROVERSY,
                 })}
               />
               <Button
@@ -194,9 +251,9 @@ function CommentList(props: Props) {
                 label={__('New')}
                 icon={ICONS.NEW}
                 iconSize={18}
-                onClick={() => setSort(SORT_COMMENTS_NEW)}
+                onClick={() => changeSort(SORT_BY.NEWEST)}
                 className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_COMMENTS_NEW,
+                  'button-toggle--active': sort === SORT_BY.NEWEST,
                 })}
               />
             </span>
@@ -206,22 +263,21 @@ function CommentList(props: Props) {
             icon={ICONS.REFRESH}
             title={__('Refresh')}
             onClick={() => {
-              fetchComments(uri);
+              setPage(0);
-              fetchReacts(uri);
             }}
           />
         </>
       }
       actions={
         <>
-          <CommentCreate uri={uri} justCommented={justCommented} />
+          <CommentCreate uri={uri} />
 
           {!commentsDisabledBySettings && !isFetchingComments && hasNoComments && (
             <Empty padded text={__('That was pretty deep. What do you think?')} />
           )}
 
           <ul className="comments" ref={commentRef}>
-            {comments &&
+            {topLevelComments &&
               displayedComments &&
               displayedComments.map((comment) => {
                 return (
@@ -238,9 +294,10 @@ function CommentList(props: Props) {
                     timePosted={comment.timestamp * 1000}
                     claimIsMine={claimIsMine}
                     commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-                    linkedComment={linkedComment}
+                    linkedCommentId={linkedCommentId}
                     isPinned={comment.is_pinned}
                     supportAmount={comment.support_amount}
+                    numDirectReplies={comment.replies}
                   />
                 );
               })}

ui/component/commentsReplies/index.js

@@ -1,14 +1,20 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimIsMine, selectMyChannelClaims } from 'lbry-redux';
-import { makeSelectRepliesForParentId } from 'redux/selectors/comments';
+import {
+  selectIsFetchingCommentsByParentId,
+  makeSelectRepliesForParentId,
+  makeSelectTotalRepliesForParentId,
+} from 'redux/selectors/comments';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import CommentsReplies from './view';
 
 const select = (state, props) => ({
-  comments: makeSelectRepliesForParentId(props.parentId)(state),
+  fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
+  totalReplies: makeSelectTotalRepliesForParentId(props.parentId)(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
   commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   myChannels: selectMyChannelClaims(state),
+  isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
 });
 
 export default connect(select)(CommentsReplies);

ui/component/commentsReplies/view.jsx

@@ -3,32 +3,45 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import Comment from 'component/comment';
 import Button from 'component/button';
+import Spinner from 'component/spinner';
+import ChannelThumbnail from 'component/channelThumbnail';
 
 type Props = {
-  comments: Array<any>,
+  fetchedReplies: Array<any>,
+  totalReplies: number,
   uri: string,
+  parentId: string,
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
-  linkedComment?: Comment,
+  linkedCommentId?: string,
   commentingEnabled: boolean,
   threadDepth: number,
+  numDirectReplies: number,
+  isFetchingByParentId: { [string]: boolean },
+  onShowMore?: () => void,
 };
 
 function CommentsReplies(props: Props) {
-  const { uri, comments, claimIsMine, myChannels, linkedComment, commentingEnabled, threadDepth } = props;
+  const {
+    uri,
+    parentId,
+    fetchedReplies,
+    totalReplies,
+    claimIsMine,
+    myChannels,
+    linkedCommentId,
+    commentingEnabled,
+    threadDepth,
+    numDirectReplies,
+    isFetchingByParentId,
+    onShowMore,
+  } = props;
+
   const [isExpanded, setExpanded] = React.useState(true);
-  const [start, setStart] = React.useState(0);
-  const [end, setEnd] = React.useState(9);
-  const sortedComments = comments ? [...comments].reverse() : [];
-  const numberOfComments = comments ? comments.length : 0;
-  const linkedCommentId = linkedComment ? linkedComment.comment_id : '';
-  const commentsIndexOfLInked = comments && sortedComments.findIndex((e) => e.comment_id === linkedCommentId);
 
   function showMore() {
-    if (start > 0) {
+    if (onShowMore) {
-      setStart(0);
+      onShowMore();
-    } else {
-      setEnd(numberOfComments);
     }
   }
 
@@ -44,35 +57,12 @@ function CommentsReplies(props: Props) {
     return false;
   }
 
-  function handleCommentDone() {
+  const displayedComments = fetchedReplies;
-    if (!isExpanded) {
-      setExpanded(true);
-      setStart(numberOfComments || 0);
-    }
-    setEnd(numberOfComments + 1);
-  }
-
-  React.useEffect(() => {
-    if (
-      setStart &&
-      setEnd &&
-      setExpanded &&
-      linkedCommentId &&
-      Number.isInteger(commentsIndexOfLInked) &&
-      commentsIndexOfLInked > -1
-    ) {
-      setStart(commentsIndexOfLInked);
-      setEnd(commentsIndexOfLInked + 1);
-      setExpanded(true);
-    }
-  }, [setStart, setEnd, setExpanded, linkedCommentId, commentsIndexOfLInked]);
-
-  const displayedComments = sortedComments.slice(start, end);
 
   return (
-    Boolean(numberOfComments) && (
+    Boolean(numDirectReplies) && (
       <div className="comment__replies-container">
-        {Boolean(numberOfComments) && !isExpanded && (
+        {Boolean(numDirectReplies) && !isExpanded && (
           <div className="comment__actions--nested">
             <Button
               className="comment__action"
@@ -82,13 +72,13 @@ function CommentsReplies(props: Props) {
             />
           </div>
         )}
-        {comments && displayedComments && isExpanded && (
+        {fetchedReplies && displayedComments && isExpanded && (
           <div>
             <div className="comment__replies">
               <Button className="comment__threadline" aria-label="Hide Replies" onClick={() => setExpanded(false)} />
 
               <ul className="comments--replies">
-                {displayedComments.map((comment, index) => {
+                {displayedComments.map((comment) => {
                   return (
                     <Comment
                       threadDepth={threadDepth}
@@ -102,22 +92,46 @@ function CommentsReplies(props: Props) {
                       timePosted={comment.timestamp * 1000}
                       claimIsMine={claimIsMine}
                       commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-                      linkedComment={linkedComment}
+                      linkedCommentId={linkedCommentId}
                       commentingEnabled={commentingEnabled}
-                      handleCommentDone={handleCommentDone}
                       supportAmount={comment.support_amount}
+                      numDirectReplies={comment.replies}
                     />
                   );
                 })}
+                {totalReplies < numDirectReplies && (
+                  <li className="comment comment--reply">
+                    <div className="comment__content">
+                      <div className="comment__thumbnail-wrapper">
+                        <ChannelThumbnail xsmall className="comment__author-thumbnail" />
+                      </div>
+                      <div className="comment__body-container comment--blocked">
+                        <div className="comment__meta">
+                          <em>---</em>
+                        </div>
+                        <div>
+                          <em>{__('Comment(s) blocked.')}</em>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                )}
               </ul>
             </div>
           </div>
         )}
-        {isExpanded && comments && (end < numberOfComments || start > 0) && (
+        {isExpanded && fetchedReplies && displayedComments.length < totalReplies && (
-          <div className="comment__actions">
+          <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>
     )
   );

ui/component/livestreamComments/view.jsx

@@ -17,7 +17,7 @@ type Props = {
   embed?: boolean,
   doCommentSocketConnect: (string, string) => void,
   doCommentSocketDisconnect: (string) => void,
-  doCommentList: (string, number, number) => void,
+  doCommentList: (string, string, number, number) => void,
   comments: Array<Comment>,
   fetchingComments: boolean,
   doSuperChatList: (string) => void,
@@ -68,7 +68,7 @@ export default function LivestreamComments(props: Props) {
 
   React.useEffect(() => {
     if (claimId) {
-      doCommentList(uri, 1, 75);
+      doCommentList(uri, '', 1, 75);
       doSuperChatList(uri);
       doCommentSocketConnect(uri, claimId);
     }

ui/constants/action_types.js

@@ -248,6 +248,8 @@ export const DISMISS_ERROR = 'DISMISS_ERROR';
 export const COMMENT_LIST_STARTED = 'COMMENT_LIST_STARTED';
 export const COMMENT_LIST_COMPLETED = 'COMMENT_LIST_COMPLETED';
 export const COMMENT_LIST_FAILED = 'COMMENT_LIST_FAILED';
+export const COMMENT_LIST_RESET = 'COMMENT_LIST_RESET';
+export const COMMENT_BY_ID_COMPLETED = 'COMMENT_BY_ID_COMPLETED';
 export const COMMENT_CREATE_STARTED = 'COMMENT_CREATE_STARTED';
 export const COMMENT_CREATE_COMPLETED = 'COMMENT_CREATE_COMPLETED';
 export const COMMENT_CREATE_FAILED = 'COMMENT_CREATE_FAILED';

ui/constants/comment.js

@@ -4,8 +4,18 @@ export const SORT_COMMENTS_NEW = 'new';
 export const SORT_COMMENTS_BEST = 'best';
 export const SORT_COMMENTS_CONTROVERSIAL = 'controversial';
 
+export const SORT_BY = {
+  NEWEST: 0,
+  OLDEST: 1,
+  CONTROVERSY: 2,
+  POPULARITY: 3,
+};
+
 export const BLOCK_LEVEL = {
   SELF: 'self',
   MODERATOR: 'moderator',
   ADMIN: 'admin',
 };
+
+export const COMMENT_PAGE_SIZE_TOP_LEVEL = 10;
+export const COMMENT_PAGE_SIZE_REPLIES = 10;

ui/page/file/index.js

@@ -16,7 +16,6 @@ import {
 import { makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
 import { selectShowMatureContent, makeSelectClientSetting } from 'redux/selectors/settings';
 import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
-import { makeSelectCommentForCommentId } from 'redux/selectors/comments';
 import { DISABLE_COMMENTS_TAG } from 'constants/tags';
 
 import FilePage from './view';
@@ -24,11 +23,10 @@ import FilePage from './view';
 const select = (state, props) => {
   const { search } = props.location;
   const urlParams = new URLSearchParams(search);
-  const linkedCommentId = urlParams.get('lc');
   const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
 
   return {
-    linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state),
+    linkedCommentId: urlParams.get('lc'),
     costInfo: makeSelectCostInfoForUri(props.uri)(state),
     metadata: makeSelectMetadataForUri(props.uri)(state),
     obscureNsfw: !selectShowMatureContent(state),

ui/page/file/view.jsx

@@ -27,7 +27,7 @@ type Props = {
   renderMode: string,
   obscureNsfw: boolean,
   isMature: boolean,
-  linkedComment: any,
+  linkedCommentId?: string,
   setPrimaryUri: (?string) => void,
   collection?: Collection,
   collectionId: string,
@@ -46,7 +46,7 @@ function FilePage(props: Props) {
     obscureNsfw,
     isMature,
     costInfo,
-    linkedComment,
+    linkedCommentId,
     setPrimaryUri,
     videoTheaterMode,
     commentsDisabled,
@@ -146,7 +146,7 @@ function FilePage(props: Props) {
             <div>
               {RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
               {commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
-              {!commentsDisabled && <CommentsList uri={uri} linkedComment={linkedComment} />}
+              {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
             </div>
             {!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />}
             {collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
@@ -157,7 +157,7 @@ function FilePage(props: Props) {
       {!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
       {isMarkdown && (
         <div className="file-page__post-comments">
-          <CommentsList uri={uri} linkedComment={linkedComment} />
+          <CommentsList uri={uri} linkedCommentId={linkedCommentId} />
         </div>
       )}
     </Page>

ui/redux/actions/comments.js

@@ -2,7 +2,7 @@
 import * as ACTIONS from 'constants/action_types';
 import * as REACTION_TYPES from 'constants/reactions';
 import * as PAGES from 'constants/pages';
-import { BLOCK_LEVEL } from 'constants/comment';
+import { SORT_BY, BLOCK_LEVEL } from 'constants/comment';
 import {
   Lbry,
   parseURI,
@@ -14,7 +14,6 @@ import {
 } from 'lbry-redux';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
-  makeSelectCommentIdsForUri,
   makeSelectMyReactionsForComment,
   makeSelectOthersReactionsForComment,
   selectPendingCommentReacts,
@@ -26,7 +25,22 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { toHex } from 'util/hex';
 import Comments from 'comments';
 
-export function doCommentList(uri: string, page: number = 1, pageSize: number = 99999) {
+const isDev = process.env.NODE_ENV !== 'production';
+
+function devToast(dispatch, msg) {
+  if (isDev) {
+    console.error(msg); // eslint-disable-line
+    dispatch(doToast({ isError: true, message: `DEV: ${msg}` }));
+  }
+}
+
+export function doCommentList(
+  uri: string,
+  parentId: string,
+  page: number = 1,
+  pageSize: number = 99999,
+  sortBy: number = SORT_BY.NEWEST
+) {
   return (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
     const claim = selectClaimsByUri(state)[uri];
@@ -43,6 +57,9 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
 
     dispatch({
       type: ACTIONS.COMMENT_LIST_STARTED,
+      data: {
+        parentId,
+      },
     });
 
     // Adding 'channel_id' and 'channel_name' enables "CreatorSettings > commentsEnabled".
@@ -52,20 +69,28 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
       page,
       claim_id: claimId,
       page_size: pageSize,
+      parent_id: parentId || undefined,
+      top_level: !parentId,
       channel_id: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
       channel_name: authorChannelClaim ? authorChannelClaim.name : undefined,
+      sort_by: sortBy,
     })
       .then((result: CommentListResponse) => {
-        const { items: comments } = result;
+        const { items: comments, total_items, total_filtered_items, total_pages } = result;
         dispatch({
           type: ACTIONS.COMMENT_LIST_COMPLETED,
           data: {
             comments,
+            parentId,
+            totalItems: total_items,
+            totalFilteredItems: total_filtered_items,
+            totalPages: total_pages,
             claimId: claimId,
             authorClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
             uri: uri,
           },
         });
+
         return result;
       })
       .catch((error) => {
@@ -78,6 +103,7 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
             },
           });
         } else {
+          devToast(dispatch, `doCommentList: ${error.message}`);
           dispatch({
             type: ACTIONS.COMMENT_LIST_FAILED,
             data: error,
@@ -87,6 +113,60 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
   };
 }
 
+export function doCommentById(commentId: string, toastIfNotFound: boolean = true) {
+  return (dispatch: Dispatch, getState: GetState) => {
+    return Comments.comment_by_id({ comment_id: commentId, with_ancestors: true })
+      .then((result: CommentByIdResponse) => {
+        const { item, items, ancestors } = result;
+
+        dispatch({
+          type: ACTIONS.COMMENT_BY_ID_COMPLETED,
+          data: {
+            comment: item || items, // Requested a change to rename it to 'item'. This covers both.
+            ancestors: ancestors,
+          },
+        });
+
+        return result;
+      })
+      .catch((error) => {
+        if (error.message === 'sql: no rows in result set' && toastIfNotFound) {
+          dispatch(
+            doToast({
+              isError: true,
+              message: __('The requested comment is no longer available.'),
+            })
+          );
+        } else {
+          devToast(dispatch, error.message);
+        }
+      });
+  };
+}
+
+export function doCommentReset(uri: string) {
+  return (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const claim = selectClaimsByUri(state)[uri];
+    const claimId = claim ? claim.claim_id : null;
+
+    if (!claimId) {
+      dispatch({
+        type: ACTIONS.COMMENT_LIST_FAILED,
+        data: 'unable to find claim for uri',
+      });
+      return;
+    }
+
+    dispatch({
+      type: ACTIONS.COMMENT_LIST_RESET,
+      data: {
+        claimId,
+      },
+    });
+  };
+}
+
 export function doSuperChatList(uri: string) {
   return (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
@@ -105,7 +185,7 @@ export function doSuperChatList(uri: string) {
     return Comments.super_list({
       claim_id: claimId,
     })
-      .then((result: CommentListResponse) => {
+      .then((result: SuperListResponse) => {
         const { items: comments, total_amount: totalAmount } = result;
         dispatch({
           type: ACTIONS.COMMENT_SUPER_CHAT_LIST_COMPLETED,
@@ -125,17 +205,16 @@ export function doSuperChatList(uri: string) {
   };
 }
 
-export function doCommentReactList(uri: string | null, commentId?: string) {
+export function doCommentReactList(commentIds: Array<string>) {
   return (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
     const activeChannelClaim = selectActiveChannelClaim(state);
-    const commentIds = uri ? makeSelectCommentIdsForUri(uri)(state) : [commentId];
 
     dispatch({
       type: ACTIONS.COMMENT_REACTION_LIST_STARTED,
     });
 
-    const params: { comment_ids: string, channel_name?: string, channel_id?: string } = {
+    const params: CommentReactListParams = {
       comment_ids: commentIds.join(','),
     };
 
@@ -152,10 +231,12 @@ export function doCommentReactList(uri: string | null, commentId?: string) {
           data: {
             myReactions: myReactions || {},
             othersReactions,
+            channelId: activeChannelClaim ? activeChannelClaim.claim_id : undefined,
           },
         });
       })
       .catch((error) => {
+        devToast(dispatch, `doCommentReactList: ${error.message}`);
         dispatch({
           type: ACTIONS.COMMENT_REACTION_LIST_FAILED,
           data: error,
@@ -190,8 +271,9 @@ export function doCommentReact(commentId: string, type: string) {
       return;
     }
 
-    let myReacts = makeSelectMyReactionsForComment(commentId)(state);
+    const reactKey = `${commentId}:${activeChannelClaim.claim_id}`;
-    const othersReacts = makeSelectOthersReactionsForComment(commentId)(state);
+    const myReacts = makeSelectMyReactionsForComment(reactKey)(state);
+    const othersReacts = makeSelectOthersReactionsForComment(reactKey)(state);
     const params: CommentReactParams = {
       comment_ids: commentId,
       channel_name: activeChannelClaim.name,
@@ -225,8 +307,8 @@ export function doCommentReact(commentId: string, type: string) {
     dispatch({
       type: ACTIONS.COMMENT_REACTION_LIST_COMPLETED,
       data: {
-        myReactions: { [commentId]: myReactsObj },
+        myReactions: { [reactKey]: myReactsObj },
-        othersReactions: { [commentId]: othersReacts },
+        othersReactions: { [reactKey]: othersReacts },
       },
     });
 
@@ -379,7 +461,7 @@ export function doCommentCreate(
   };
 }
 
-export function doCommentPin(commentId: string, remove: boolean) {
+export function doCommentPin(commentId: string, claimId: string, remove: boolean) {
   return (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
     const activeChannel = selectActiveChannelClaim(state);
@@ -402,7 +484,11 @@ export function doCommentPin(commentId: string, remove: boolean) {
       .then((result: CommentPinResponse) => {
         dispatch({
           type: ACTIONS.COMMENT_PIN_COMPLETED,
-          data: result,
+          data: {
+            pinnedComment: result.items,
+            claimId,
+            unpin: remove,
+          },
         });
       })
       .catch((error) => {

ui/redux/reducers/comments.js

@@ -3,17 +3,26 @@ import * as ACTIONS from 'constants/action_types';
 import { handleActions } from 'util/redux-utils';
 import { BLOCK_LEVEL } from 'constants/comment';
 import { isURIEqual } from 'lbry-redux';
+
+const IS_DEV = process.env.NODE_ENV !== 'production';
+
 const defaultState: CommentsState = {
   commentById: {}, // commentId -> Comment
-  byId: {}, // ClaimID -> list of comments
+  byId: {}, // ClaimID -> list of fetched comment IDs.
-  repliesByParentId: {}, // ParentCommentID -> list of reply comments
+  totalCommentsById: {}, // ClaimId -> ultimate total (including replies) in commentron.
-  topLevelCommentsById: {}, // ClaimID -> list of top level comments
+  repliesByParentId: {}, // ParentCommentID -> list of fetched replies.
+  totalRepliesByParentId: {}, // ParentCommentID -> total replies in commentron.
+  topLevelCommentsById: {}, // ClaimID -> list of fetched top level comments.
+  topLevelTotalPagesById: {}, // ClaimID -> total number of top-level pages in commentron. Based on COMMENT_PAGE_SIZE_TOP_LEVEL.
+  topLevelTotalCommentsById: {}, // ClaimID -> total top level comments in commentron.
   // TODO:
   // Remove commentsByUri
   // It is not needed and doesn't provide anything but confusion
   commentsByUri: {}, // URI -> claimId
+  linkedCommentAncestors: {}, // {"linkedCommentId": ["parentId", "grandParentId", ...]}
   superChatsByUri: {},
   isLoading: false,
+  isLoadingByParentId: {},
   isCommenting: false,
   myComments: undefined,
   isFetchingReacts: false,
@@ -39,6 +48,14 @@ const defaultState: CommentsState = {
   fetchingBlockedWords: false,
 };
 
+function pushToArrayInObject(obj, key, valueToPush) {
+  if (!obj[key]) {
+    obj[key] = [valueToPush];
+  } else if (!obj[key].includes(valueToPush)) {
+    obj[key].push(valueToPush);
+  }
+}
+
 export default handleActions(
   {
     [ACTIONS.COMMENT_CREATE_STARTED]: (state: CommentsState, action: any): CommentsState => ({
@@ -58,10 +75,13 @@ export default handleActions(
         uri,
         livestream,
       }: { comment: Comment, claimId: string, uri: string, livestream: boolean } = action.data;
+
       const commentById = Object.assign({}, state.commentById);
       const byId = Object.assign({}, state.byId);
+      const totalCommentsById = Object.assign({}, state.totalCommentsById);
       const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
       const repliesByParentId = Object.assign({}, state.repliesByParentId); // {ParentCommentID -> [commentIds...] } list of reply comments
+      const totalRepliesByParentId = Object.assign({}, state.totalRepliesByParentId);
       const commentsByUri = Object.assign({}, state.commentsByUri);
       const comments = byId[claimId] || [];
       const newCommentIds = comments.slice();
@@ -75,12 +95,27 @@ export default handleActions(
         newCommentIds.unshift(comment.comment_id);
         byId[claimId] = newCommentIds;
 
+        if (totalCommentsById[claimId]) {
+          totalCommentsById[claimId] += 1;
+        }
+
         if (comment['parent_id']) {
           if (!repliesByParentId[comment.parent_id]) {
             repliesByParentId[comment.parent_id] = [comment.comment_id];
           } else {
             repliesByParentId[comment.parent_id].unshift(comment.comment_id);
           }
+
+          if (!totalRepliesByParentId[comment.parent_id]) {
+            totalRepliesByParentId[comment.parent_id] = 1;
+          } else {
+            totalRepliesByParentId[comment.parent_id] += 1;
+          }
+
+          // Update the parent's "replies" value
+          if (commentById[comment.parent_id]) {
+            commentById[comment.parent_id].replies = (commentById[comment.parent_id].replies || 0) + 1;
+          }
         } else {
           if (!topLevelCommentsById[claimId]) {
             commentsByUri[uri] = claimId;
@@ -95,8 +130,10 @@ export default handleActions(
         ...state,
         topLevelCommentsById,
         repliesByParentId,
+        totalRepliesByParentId,
         commentById,
         byId,
+        totalCommentsById,
         commentsByUri,
         isLoading: false,
         isCommenting: false,
@@ -147,12 +184,14 @@ export default handleActions(
     },
 
     [ACTIONS.COMMENT_REACTION_LIST_COMPLETED]: (state: CommentsState, action: any): CommentsState => {
-      const { myReactions, othersReactions } = action.data;
+      const { myReactions, othersReactions, channelId } = action.data;
       const myReacts = Object.assign({}, state.myReactsByCommentId);
       const othersReacts = Object.assign({}, state.othersReactsByCommentId);
+
       if (myReactions) {
         Object.entries(myReactions).forEach(([commentId, reactions]) => {
-          myReacts[commentId] = Object.entries(reactions).reduce((acc, [name, count]) => {
+          const key = channelId ? `${commentId}:${channelId}` : commentId;
+          myReacts[key] = Object.entries(reactions).reduce((acc, [name, count]) => {
             if (count === 1) {
               acc.push(name);
             }
@@ -160,9 +199,11 @@ export default handleActions(
           }, []);
         });
       }
+
       if (othersReactions) {
         Object.entries(othersReactions).forEach(([commentId, reactions]) => {
-          othersReacts[commentId] = reactions;
+          const key = channelId ? `${commentId}:${channelId}` : commentId;
+          othersReacts[key] = reactions;
         });
       }
 
@@ -174,10 +215,32 @@ export default handleActions(
       };
     },
 
-    [ACTIONS.COMMENT_LIST_STARTED]: (state) => ({ ...state, isLoading: true }),
+    [ACTIONS.COMMENT_LIST_STARTED]: (state, action: any) => {
+      const { parentId } = action.data;
+      const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
+      if (parentId) {
+        isLoadingByParentId[parentId] = true;
+      }
+
+      return {
+        ...state,
+        isLoading: true,
+        isLoadingByParentId,
+      };
+    },
 
     [ACTIONS.COMMENT_LIST_COMPLETED]: (state: CommentsState, action: any) => {
-      const { comments, claimId, uri, disabled, authorClaimId } = action.data;
+      const {
+        comments,
+        parentId,
+        totalItems,
+        totalFilteredItems,
+        totalPages,
+        claimId,
+        uri,
+        disabled,
+        authorClaimId,
+      } = action.data;
       const commentsDisabledChannelIds = [...state.commentsDisabledChannelIds];
 
       if (disabled) {
@@ -185,10 +248,16 @@ export default handleActions(
           commentsDisabledChannelIds.push(authorClaimId);
         }
 
+        const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
+        if (parentId) {
+          isLoadingByParentId[parentId] = false;
+        }
+
         return {
           ...state,
           commentsDisabledChannelIds,
           isLoading: false,
+          isLoadingByParentId,
         };
       } else {
         const index = commentsDisabledChannelIds.indexOf(authorClaimId);
@@ -200,49 +269,135 @@ export default handleActions(
       const commentById = Object.assign({}, state.commentById);
       const byId = Object.assign({}, state.byId);
       const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
+      const topLevelTotalCommentsById = Object.assign({}, state.topLevelTotalCommentsById);
+      const topLevelTotalPagesById = Object.assign({}, state.topLevelTotalPagesById);
       const commentsByUri = Object.assign({}, state.commentsByUri);
+      const repliesByParentId = Object.assign({}, state.repliesByParentId);
+      const totalCommentsById = Object.assign({}, state.totalCommentsById);
+      const totalRepliesByParentId = Object.assign({}, state.totalRepliesByParentId);
+      const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
+
+      const commonUpdateAction = (comment, commentById, commentIds, index) => {
+        // map the comment_ids to the new comments
+        commentById[comment.comment_id] = comment;
+        commentIds[index] = comment.comment_id;
+      };
 
-      const tempRepliesByParent = {};
-      const topLevelComments = [];
       if (comments) {
         // we use an Array to preserve order of listing
         // in reality this doesn't matter and we can just
         // sort comments by their timestamp
         const commentIds = Array(comments.length);
 
-        // map the comment_ids to the new comments
+        // totalCommentsById[claimId] = totalItems;
-        for (let i = 0; i < comments.length; i++) {
+        // --> currently, this value is only correct when done via a top-level query.
-          const comment = comments[i];
+        // Until this is fixed, I'm moving it downwards to **
-          if (comment['parent_id']) {
-            if (!tempRepliesByParent[comment.parent_id]) {
-              tempRepliesByParent[comment.parent_id] = [comment.comment_id];
-            } else {
-              tempRepliesByParent[comment.parent_id].push(comment.comment_id);
-            }
-          } else {
-            commentById[comment.comment_id] = comment;
-            topLevelComments.push(comment.comment_id);
-          }
-          commentIds[i] = comments[i].comment_id;
-          commentById[commentIds[i]] = comments[i];
-        }
-        topLevelCommentsById[claimId] = topLevelComments;
 
-        byId[claimId] = commentIds;
+        // --- Top-level comments ---
+        if (!parentId) {
+          totalCommentsById[claimId] = totalItems; // **
+
+          topLevelTotalCommentsById[claimId] = totalFilteredItems;
+          topLevelTotalPagesById[claimId] = totalPages;
+
+          if (!topLevelCommentsById[claimId]) {
+            topLevelCommentsById[claimId] = [];
+          }
+
+          const topLevelCommentIds = topLevelCommentsById[claimId];
+
+          for (let i = 0; i < comments.length; ++i) {
+            const comment = comments[i];
+            commonUpdateAction(comment, commentById, commentIds, i);
+
+            if (IS_DEV && comment['parent_id']) console.error('Invalid top-level comment:', comment); // eslint-disable-line
+
+            if (!topLevelCommentIds.includes(comment.comment_id)) {
+              topLevelCommentIds.push(comment.comment_id);
+            }
+          }
+        }
+        // --- Replies ---
+        else {
+          totalRepliesByParentId[parentId] = totalFilteredItems;
+          isLoadingByParentId[parentId] = false;
+
+          for (let i = 0; i < comments.length; ++i) {
+            const comment = comments[i];
+            commonUpdateAction(comment, commentById, commentIds, i);
+
+            if (IS_DEV && !comment['parent_id']) console.error('Missing parent_id:', comment); // eslint-disable-line
+            if (IS_DEV && comment.parent_id !== parentId) console.error('Black sheep in the family?:', comment); // eslint-disable-line
+
+            pushToArrayInObject(repliesByParentId, parentId, comment.comment_id);
+          }
+        }
+
+        byId[claimId] ? byId[claimId].push(...commentIds) : (byId[claimId] = commentIds);
         commentsByUri[uri] = claimId;
       }
 
-      const repliesByParentId = Object.assign({}, state.repliesByParentId, tempRepliesByParent); // {ParentCommentID -> [commentIds...] } list of reply comments
-
       return {
         ...state,
         topLevelCommentsById,
+        topLevelTotalCommentsById,
+        topLevelTotalPagesById,
         repliesByParentId,
+        totalCommentsById,
+        totalRepliesByParentId,
         byId,
         commentById,
         commentsByUri,
         commentsDisabledChannelIds,
         isLoading: false,
+        isLoadingByParentId,
+      };
+    },
+
+    [ACTIONS.COMMENT_BY_ID_COMPLETED]: (state: CommentsState, action: any) => {
+      const { comment, ancestors } = action.data;
+      const claimId = comment.claim_id;
+
+      const commentById = Object.assign({}, state.commentById);
+      const byId = Object.assign({}, state.byId);
+      const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
+      const topLevelTotalCommentsById = Object.assign({}, state.topLevelTotalCommentsById);
+      const topLevelTotalPagesById = Object.assign({}, state.topLevelTotalPagesById);
+      const repliesByParentId = Object.assign({}, state.repliesByParentId);
+      const linkedCommentAncestors = Object.assign({}, state.linkedCommentAncestors);
+
+      const updateStore = (comment, commentById, byId, repliesByParentId, topLevelCommentsById) => {
+        // 'comment.ByID' doesn't populate 'replies'. We should have at least 1
+        // at the moment, and the correct value will populated by 'comment.List'.
+        commentById[comment.comment_id] = { ...comment, replies: 1 };
+        byId[claimId] ? byId[claimId].unshift(comment.comment_id) : (byId[claimId] = [comment.comment_id]);
+
+        const parentId = comment.parent_id;
+        if (comment.parent_id) {
+          pushToArrayInObject(repliesByParentId, parentId, comment.comment_id);
+        } else {
+          pushToArrayInObject(topLevelCommentsById, claimId, comment.comment_id);
+        }
+      };
+
+      updateStore(comment, commentById, byId, repliesByParentId, topLevelCommentsById);
+
+      if (ancestors) {
+        ancestors.forEach((ancestor) => {
+          updateStore(ancestor, commentById, byId, repliesByParentId, topLevelCommentsById);
+          pushToArrayInObject(linkedCommentAncestors, comment.comment_id, ancestor.comment_id);
+        });
+      }
+
+      return {
+        ...state,
+        topLevelCommentsById,
+        topLevelTotalCommentsById,
+        topLevelTotalPagesById,
+        repliesByParentId,
+        byId,
+        commentById,
+        linkedCommentAncestors,
       };
     },
 
@@ -273,6 +428,51 @@ export default handleActions(
       isLoading: false,
     }),
 
+    [ACTIONS.COMMENT_LIST_RESET]: (state: CommentsState, action: any) => {
+      const { claimId } = action.data;
+
+      const byId = Object.assign({}, state.byId);
+      const totalCommentsById = Object.assign({}, state.totalCommentsById);
+      const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
+      const topLevelTotalCommentsById = Object.assign({}, state.topLevelTotalCommentsById);
+      const topLevelTotalPagesById = Object.assign({}, state.topLevelTotalPagesById);
+      const myReacts = Object.assign({}, state.myReactsByCommentId);
+      const othersReacts = Object.assign({}, state.othersReactsByCommentId);
+
+      function deleteReacts(reactObj, commentIdsToRemove) {
+        if (commentIdsToRemove && commentIdsToRemove.length > 0) {
+          let reactionKeys = Object.keys(reactObj);
+          reactionKeys.forEach((rk) => {
+            const colonIndex = rk.indexOf(':');
+            const commentId = colonIndex === -1 ? rk : rk.substring(0, colonIndex);
+            if (commentIdsToRemove.includes(commentId)) {
+              delete reactObj[rk];
+            }
+          });
+        }
+      }
+
+      deleteReacts(myReacts, byId[claimId]);
+      deleteReacts(othersReacts, byId[claimId]);
+
+      delete byId[claimId];
+      delete totalCommentsById[claimId];
+      delete topLevelCommentsById[claimId];
+      delete topLevelTotalCommentsById[claimId];
+      delete topLevelTotalPagesById[claimId];
+
+      return {
+        ...state,
+        byId,
+        totalCommentsById,
+        topLevelCommentsById,
+        topLevelTotalCommentsById,
+        topLevelTotalPagesById,
+        myReactsByCommentId: myReacts,
+        othersReactsByCommentId: othersReacts,
+      };
+    },
+
     [ACTIONS.COMMENT_RECEIVED]: (state: CommentsState, action: any) => {
       const { uri, claimId, comment } = action.data;
       const commentsByUri = Object.assign({}, state.commentsByUri);
@@ -352,21 +552,50 @@ export default handleActions(
       const { comment_id } = action.data;
       const commentById = Object.assign({}, state.commentById);
       const byId = Object.assign({}, state.byId);
+      const repliesByParentId = Object.assign({}, state.repliesByParentId); // {ParentCommentID -> [commentIds...] } list of reply comments
+      const totalRepliesByParentId = Object.assign({}, state.totalRepliesByParentId);
+      const totalCommentsById = Object.assign({}, state.totalCommentsById);
+
+      const comment = commentById[comment_id];
 
       // to remove the comment and its references
-      const claimId = commentById[comment_id].claim_id;
+      const claimId = comment.claim_id;
       for (let i = 0; i < byId[claimId].length; i++) {
         if (byId[claimId][i] === comment_id) {
           byId[claimId].splice(i, 1);
           break;
         }
       }
+
+      // Update replies
+      if (comment['parent_id'] && repliesByParentId[comment.parent_id]) {
+        const index = repliesByParentId[comment.parent_id].indexOf(comment.comment_id);
+        if (index > -1) {
+          repliesByParentId[comment.parent_id].splice(index, 1);
+
+          if (commentById[comment.parent_id]) {
+            commentById[comment.parent_id].replies = Math.max(0, (commentById[comment.parent_id].replies || 0) - 1);
+          }
+
+          if (totalRepliesByParentId[comment.parent_id]) {
+            totalRepliesByParentId[comment.parent_id] = Math.max(0, totalRepliesByParentId[comment.parent_id] - 1);
+          }
+        }
+      }
+
+      if (totalCommentsById[claimId]) {
+        totalCommentsById[claimId] = Math.max(0, totalCommentsById[claimId] - 1);
+      }
+
       delete commentById[comment_id];
 
       return {
         ...state,
         commentById,
         byId,
+        totalCommentsById,
+        repliesByParentId,
+        totalRepliesByParentId,
         isLoading: false,
       };
     },
@@ -390,11 +619,41 @@ export default handleActions(
         isCommenting: false,
       };
     },
-
     [ACTIONS.COMMENT_UPDATE_FAILED]: (state: CommentsState, action: any) => ({
       ...state,
       isCmmenting: false,
     }),
+
+    [ACTIONS.COMMENT_PIN_COMPLETED]: (state: CommentsState, action: any) => {
+      const { pinnedComment, claimId, unpin } = action.data;
+      const commentById = Object.assign({}, state.commentById);
+      const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById);
+
+      if (pinnedComment && topLevelCommentsById[claimId]) {
+        const index = topLevelCommentsById[claimId].indexOf(pinnedComment.comment_id);
+        if (index > -1) {
+          topLevelCommentsById[claimId].splice(index, 1);
+
+          if (unpin) {
+            // Without the sort score, I have no idea where to put it. Just
+            // dump it at the bottom. Users can refresh if they want it back to
+            // the correct sorted position.
+            topLevelCommentsById[claimId].push(pinnedComment.comment_id);
+          } else {
+            topLevelCommentsById[claimId].unshift(pinnedComment.comment_id);
+          }
+
+          commentById[pinnedComment.comment_id] = pinnedComment;
+        }
+      }
+
+      return {
+        ...state,
+        commentById,
+        topLevelCommentsById,
+      };
+    },
+
     [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED]: (state: CommentsState, action: any) => ({
       ...state,
       fetchingModerationBlockList: true,

ui/redux/selectors/comments.js

@@ -9,6 +9,7 @@ const selectState = (state) => state.comments || {};
 
 export const selectCommentsById = createSelector(selectState, (state) => state.commentById || {});
 export const selectIsFetchingComments = createSelector(selectState, (state) => state.isLoading);
+export const selectIsFetchingCommentsByParentId = createSelector(selectState, (state) => state.isLoadingByParentId);
 export const selectIsPostingComment = createSelector(selectState, (state) => state.isCommenting);
 export const selectIsFetchingReacts = createSelector(selectState, (state) => state.isFetchingReacts);
 export const selectCommentsDisabledChannelIds = createSelector(
@@ -143,19 +144,28 @@ export const selectCommentsByUri = createSelector(selectState, (state) => {
   return comments;
 });
 
+export const selectLinkedCommentAncestors = createSelector(selectState, (state) => state.linkedCommentAncestors);
+
 export const makeSelectCommentIdsForUri = (uri: string) =>
   createSelector(selectState, selectCommentsByUri, selectClaimsById, (state, byUri) => {
     const claimId = byUri[uri];
     return state.byId[claimId];
   });
 
-export const makeSelectMyReactionsForComment = (commentId: string) =>
+export const selectMyReactionsByCommentId = createSelector(selectState, (state) => state.myReactsByCommentId);
+
+/**
+ * makeSelectMyReactionsForComment
+ *
+ * @param commentIdChannelId Format = "commentId:MyChannelId".
+ */
+export const makeSelectMyReactionsForComment = (commentIdChannelId: string) =>
   createSelector(selectState, (state) => {
     if (!state.myReactsByCommentId) {
       return [];
     }
 
-    return state.myReactsByCommentId[commentId] || [];
+    return state.myReactsByCommentId[commentIdChannelId] || [];
   });
 
 export const makeSelectOthersReactionsForComment = (commentId: string) =>
@@ -276,6 +286,18 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
     }
   );
 
+export const makeSelectTopLevelTotalCommentsForUri = (uri: string) =>
+  createSelector(selectState, selectCommentsByUri, (state, byUri) => {
+    const claimId = byUri[uri];
+    return state.topLevelTotalCommentsById[claimId] || 0;
+  });
+
+export const makeSelectTopLevelTotalPagesForUri = (uri: string) =>
+  createSelector(selectState, selectCommentsByUri, (state, byUri) => {
+    const claimId = byUri[uri];
+    return state.topLevelTotalPagesById[claimId] || 0;
+  });
+
 export const makeSelectRepliesForParentId = (id: string) =>
   createSelector(
     selectState, // no selectRepliesByParentId
@@ -334,9 +356,15 @@ export const makeSelectRepliesForParentId = (id: string) =>
     }
   );
 
+export const makeSelectTotalRepliesForParentId = (parentId: string) =>
+  createSelector(selectState, (state) => {
+    return state.totalRepliesByParentId[parentId] || 0;
+  });
+
 export const makeSelectTotalCommentsCountForUri = (uri: string) =>
-  createSelector(makeSelectCommentsForUri(uri), (comments) => {
+  createSelector(selectState, selectCommentsByUri, (state, byUri) => {
-    return comments ? comments.length : 0;
+    const claimId = byUri[uri];
+    return state.totalCommentsById[claimId] || 0;
   });
 
 // Personal list

ui/scss/component/_comments.scss

@@ -441,3 +441,7 @@ $thumbnailWidthSmall: 1rem;
 .comment__tip-input {
   margin: var(--spacing-s) 0;
 }
+
+.comment--blocked {
+  opacity: 0.5;
+}

ui/util/comments.js

@@ -10,11 +10,10 @@ type SortProps = {
   reactionsById: {},
   sort: string,
   isMyComment: (string) => boolean,
-  justCommented: Array<string>,
 };
 
 export function sortComments(sortProps: SortProps): Array<Comment> {
-  const { comments, reactionsById, sort, isMyComment, justCommented } = sortProps;
+  const { comments, reactionsById, sort, isMyComment } = sortProps;
 
   if (!comments) return [];
 
@@ -29,12 +28,10 @@ export function sortComments(sortProps: SortProps): Array<Comment> {
 
     const aIsMine = isMyComment(a.channel_id);
     const bIsMine = isMyComment(b.channel_id);
-    const aIsMyRecent = justCommented.includes(a.comment_id);
-    const bIsMyRecent = justCommented.includes(b.comment_id);
 
-    if (aIsMine && justCommented.length && aIsMyRecent) {
+    if (aIsMine) {
       return -1;
-    } else if (bIsMine && justCommented.length && bIsMyRecent) {
+    } else if (bIsMine) {
       return 1;
     }