Revert comment pagination

until weird 'replies' and reaction-fetch spikes is investigated

flow-typed/Comment.js

@@ -13,7 +13,6 @@ 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 = {
@@ -28,21 +27,15 @@ declare type PerChannelSettings = {
 declare type CommentsState = {
   commentsByUri: { [string]: string },
   superChatsByUri: { [string]: { totalAmount: number, comments: Array<Comment> } },
-  byId: { [string]: Array<string> }, // ClaimID -> list of fetched comment IDs.
+  byId: { [string]: Array<string> },
-  totalCommentsById: {}, // ClaimId -> ultimate total (including replies) in commentron.
+  repliesByParentId: { [string]: Array<string> }, // ParentCommentID -> list of reply comments
-  repliesByParentId: { [string]: Array<string> }, // ParentCommentID -> list of fetched replies.
+  topLevelCommentsById: { [string]: Array<string> }, // ClaimID -> list of top level comments
-  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: ?{ [string]: Array<string> }, // {"CommentId:MyChannelId": ["like", "dislike", ...]}
+  myReactsByCommentId: any,
-  othersReactsByCommentId: ?{ [string]: { [string]: number } }, // {"CommentId:MyChannelId": {"like": 2, "dislike": 2, ...}}
+  othersReactsByCommentId: any,
   pendingCommentReactions: Array<string>,
   moderationBlockList: ?Array<string>, // @KP rename to "personalBlockList"?
   adminBlockList: ?Array<string>,
@@ -71,48 +64,17 @@ 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,             // pagination: which page of results
+  page: number,
-  page_size: number,        // pagination: nr of comments to show in a page (max 200)
+  page_size: number,
-  claim_id: string,         // claim id of claim being commented on
+  claim_id: string,
-  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>,
-  page: number,
+  total_amount: 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,
@@ -132,16 +94,6 @@ 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,7 +1445,6 @@
   "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",
@@ -1514,7 +1513,6 @@
   "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,7 +17,6 @@ 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,5 +1,6 @@
 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';
@@ -7,9 +8,10 @@ import { makeSelectTagInClaimOrChannelForUri } from 'lbry-redux';
 const select = (state, props) => {
   const { search } = props.location;
   const urlParams = new URLSearchParams(search);
+  const linkedCommentId = urlParams.get('lc');
 
   return {
-    linkedCommentId: urlParams.get('lc'),
+    linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state),
     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,
-  linkedCommentId?: string,
+  linkedComment: ?any,
   commentsDisabled: boolean,
 };
 
 function ChannelDiscussion(props: Props) {
-  const { uri, linkedCommentId, commentsDisabled } = props;
+  const { uri, linkedComment, commentsDisabled } = props;
 
   if (commentsDisabled) {
     return <Empty text={__('This channel has disabled comments on their page.')} />;
   }
   return (
     <section className="section">
-      <CommentsList uri={uri} linkedCommentId={linkedCommentId} />
+      <CommentsList uri={uri} linkedComment={linkedComment} />
     </section>
   );
 }

ui/component/comment/index.js

@@ -1,43 +1,30 @@
 import { connect } from 'react-redux';
-import {
+import { makeSelectStakedLevelForChannelUri, makeSelectClaimForUri, makeSelectThumbnailForUri, selectMyChannelClaims } from 'lbry-redux';
-  makeSelectStakedLevelForChannelUri,
+import { doCommentUpdate } from 'redux/actions/comments';
-  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 { selectLinkedCommentAncestors, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
+import { makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
-import { selectActiveChannelId, selectActiveChannelClaim } from 'redux/selectors/app';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectPlayingUri } from 'redux/selectors/content';
 import Comment from './view';
 
-const select = (state, props) => {
+const select = (state, props) => ({
-  const activeChannelId = selectActiveChannelId(state);
+  claim: makeSelectClaimForUri(props.uri)(state),
-  const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
+  thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
-
+  channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
-  return {
+  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-    claim: makeSelectClaimForUri(props.uri)(state),
+  othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
-    thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
+  activeChannelClaim: selectActiveChannelClaim(state),
-    channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
+  myChannels: selectMyChannelClaims(state),
-    commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+  playingUri: selectPlayingUri(state),
-    othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
+  stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(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,7 +1,6 @@
 // @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';
@@ -24,8 +23,6 @@ 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,
@@ -39,10 +36,8 @@ 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,
-  linkedCommentId?: string,
+  linkedComment?: any,
-  linkedCommentAncestors: { [string]: Array<string> },
   myChannels: ?Array<ChannelClaim>,
   commentingEnabled: boolean,
   doToast: ({ message: string }) => void,
@@ -58,7 +53,6 @@ type Props = {
   playingUri: ?PlayingUri,
   stakedLevel: number,
   supportAmount: number,
-  numDirectReplies: number,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -77,9 +71,7 @@ function Comment(props: Props) {
     commentIsMine,
     commentId,
     updateComment,
-    fetchReplies,
+    linkedComment,
-    linkedCommentId,
-    linkedCommentAncestors,
     commentingEnabled,
     myChannels,
     doToast,
@@ -90,23 +82,18 @@ 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;
@@ -124,19 +111,6 @@ 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);
@@ -157,12 +131,6 @@ 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);
   }
@@ -208,7 +176,7 @@ function Comment(props: Props) {
     >
       <div
         className={classnames('comment__content', {
-          'comment--highlighted': linkedCommentId && linkedCommentId === commentId,
+          'comment--highlighted': linkedComment && linkedComment.comment_id === commentId,
           'comment--slimed': slimedToDeath && !displayDeadComment,
         })}
       >
@@ -334,43 +302,13 @@ 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={() => {
+                    onDoneReplying={() => setReplying(false)}
-                      setShowReplies(true);
+                    onCancelReplying={() => setReplying(false)}
-                      setReplying(false);
-                    }}
-                    onCancelReplying={() => {
-                      setReplying(false);
-                    }}
                   />
                 )}
               </>
@@ -379,16 +317,7 @@ function Comment(props: Props) {
         </div>
       </div>
 
-      {showReplies && (
+      <CommentsReplies threadDepth={threadDepth - 1} uri={uri} parentId={commentId} linkedComment={linkedComment} />
-        <CommentsReplies
-          threadDepth={threadDepth - 1}
-          uri={uri}
-          parentId={commentId}
-          linkedCommentId={linkedCommentId}
-          numDirectReplies={numDirectReplies}
-          onShowMore={() => setPage(page + 1)}
-        />
-      )}
     </li>
   );
 }

ui/component/commentCreate/view.jsx

@@ -35,6 +35,7 @@ type Props = {
   toast: (string) => void,
   claimIsMine: boolean,
   sendTip: ({}, (any) => void, (any) => void) => void,
+  justCommented: Array<string>,
 };
 
 export function CommentCreate(props: Props) {
@@ -53,6 +54,7 @@ export function CommentCreate(props: Props) {
     livestream,
     claimIsMine,
     sendTip,
+    justCommented,
   } = props;
   const buttonref: ElementRef<any> = React.useRef();
   const {
@@ -151,6 +153,7 @@ export function CommentCreate(props: Props) {
           setIsReviewingSupportComment(false);
           setIsSupportComment(false);
           setCommentFailure(false);
+          justCommented.push(res.comment_id);
 
           if (onDoneReplying) {
             onDoneReplying();
@@ -214,13 +217,7 @@ export function CommentCreate(props: Props) {
             autoFocus
             button="primary"
             disabled={disabled}
-            label={
+            label={isSubmitting ? __('Sending...') : (commentFailure && tipAmount === successTip.tipAmount) ? __('Re-submit') : __('Send')}
-              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,6 +3,7 @@ import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectC
 import {
   doCommentAbandon,
   doCommentPin,
+  doCommentList,
   doCommentModBlock,
   doCommentModBlockAsAdmin,
   doCommentModBlockAsModerator,
@@ -29,7 +30,8 @@ const perform = (dispatch) => ({
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
   muteChannel: (channelUri) => dispatch(doChannelMute(channelUri)),
-  pinComment: (commentId, claimId, remove) => dispatch(doCommentPin(commentId, claimId, remove)),
+  pinComment: (commentId, remove) => dispatch(doCommentPin(commentId, 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,15 +7,18 @@ 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, string, boolean) => Promise<any>,
+  pinComment: (string, boolean) => Promise<any>,
   muteChannel: (string) => void,
+  fetchComments: (string) => void,
   handleEditComment: () => void,
   contentChannelPermanentUrl: any,
   activeChannelClaim: ?ChannelClaim,
@@ -32,6 +35,7 @@ type Props = {
 
 function CommentMenuList(props: Props) {
   const {
+    uri,
     claim,
     authorUri,
     commentIsMine,
@@ -45,6 +49,7 @@ function CommentMenuList(props: Props) {
     isTopLevel,
     isPinned,
     handleEditComment,
+    fetchComments,
     commentModBlock,
     commentModBlockAsAdmin,
     commentModBlockAsModerator,
@@ -72,8 +77,8 @@ function CommentMenuList(props: Props) {
     activeModeratorInfo &&
     Object.values(activeModeratorInfo.delegators).includes(contentChannelClaim.claim_id);
 
-  function handlePinComment(commentId, claimId, remove) {
+  function handlePinComment(commentId, remove) {
-    pinComment(commentId, claimId, remove);
+    pinComment(commentId, remove).then(() => fetchComments(uri));
   }
 
   function handleDeleteComment() {
@@ -117,7 +122,7 @@ function CommentMenuList(props: Props) {
       {activeChannelIsCreator && isTopLevel && (
         <MenuItem
           className="comment__menu-option menu__link"
-          onSelect={() => handlePinComment(commentId, claim ? claim.claim_id : '', isPinned)}
+          onSelect={isPinned ? () => handlePinComment(commentId, true) : () => handlePinComment(commentId, false)}
         >
           <span className={'button__content'}>
             <Icon aria-hidden icon={ICONS.PIN} className={'icon'} />

ui/component/commentReactions/index.js

@@ -6,22 +6,17 @@ import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment }
 import { doCommentReact } from 'redux/actions/comments';
 import { selectActiveChannelId } from 'redux/selectors/app';
 
-const select = (state, props) => {
+const select = (state, props) => ({
-  const activeChannelId = selectActiveChannelId(state);
+  claim: makeSelectClaimForUri(props.uri)(state),
-  const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  myReacts: makeSelectMyReactionsForComment(props.commentId)(state),
+  othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
+  activeChannelId: selectActiveChannelId(state),
+});
 
-  return {
+const perform = dispatch => ({
-    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,42 +2,32 @@ 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 { doCommentReset, doCommentList, doCommentById, doCommentReactList } from 'redux/actions/comments';
+import { doCommentList, 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) => ({
-  return {
+  myChannels: selectMyChannelClaims(state),
-    myChannels: selectMyChannelClaims(state),
+  comments: makeSelectTopLevelCommentsForUri(props.uri)(state),
-    allCommentIds: makeSelectCommentIdsForUri(props.uri)(state),
+  totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state),
-    topLevelComments: makeSelectTopLevelCommentsForUri(props.uri)(state),
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-    topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(props.uri)(state),
+  isFetchingComments: selectIsFetchingComments(state),
-    totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state),
+  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+  commentsDisabledBySettings: makeSelectCommentsDisabledForUri(props.uri)(state),
-    isFetchingComments: selectIsFetchingComments(state),
+  fetchingChannels: selectFetchingMyChannels(state),
-    commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+  reactionsById: selectOthersReactsById(state),
-    commentsDisabledBySettings: makeSelectCommentsDisabledForUri(props.uri)(state),
+  activeChannelId: selectActiveChannelId(state),
-    fetchingChannels: selectFetchingMyChannels(state),
+});
-    myReactsByCommentId: selectMyReactionsByCommentId(state),
-    othersReactsById: selectOthersReactsById(state),
-    activeChannelId: selectActiveChannelId(state),
-  };
-};
 
 const perform = (dispatch) => ({
-  fetchTopLevelComments: (uri, page, pageSize, sortBy) => dispatch(doCommentList(uri, '', page, pageSize, sortBy)),
+  fetchComments: (uri) => dispatch(doCommentList(uri)),
-  fetchComment: (commentId) => dispatch(doCommentById(commentId)),
+  fetchReacts: (uri) => dispatch(doCommentReactList(uri)),
-  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 { COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY } from 'constants/comment';
+import { SORT_COMMENTS_NEW, SORT_COMMENTS_BEST, SORT_COMMENTS_CONTROVERSIAL } from 'constants/comment';
 import React, { useEffect } from 'react';
 import classnames from 'classnames';
 import CommentView from 'component/comment';
@@ -11,78 +11,59 @@ 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 = {
-  allCommentIds: any,
+  comments: Array<Comment>,
-  topLevelComments: Array<Comment>,
-  topLevelTotalPages: number,
   commentsDisabledBySettings: boolean,
-  fetchTopLevelComments: (string, number, number, number) => void,
+  fetchComments: (string) => void,
-  fetchComment: (string) => void,
+  fetchReacts: (string) => Promise<any>,
-  fetchReacts: (Array<string>) => Promise<any>,
-  resetComments: (string) => void,
   uri: string,
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
   isFetchingComments: boolean,
-  linkedCommentId?: string,
+  linkedComment: any,
   totalComments: number,
   fetchingChannels: boolean,
-  myReactsByCommentId: ?{ [string]: Array<string> }, // "CommentId:MyChannelId" -> reaction array (note the ID concatenation)
+  reactionsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
-  othersReactsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
   activeChannelId: ?string,
 };
 
 function CommentList(props: Props) {
   const {
-    allCommentIds,
+    fetchComments,
-    fetchTopLevelComments,
-    fetchComment,
     fetchReacts,
-    resetComments,
     uri,
-    topLevelComments,
+    comments,
-    topLevelTotalPages,
     commentsDisabledBySettings,
     claimIsMine,
     myChannels,
     isFetchingComments,
-    linkedCommentId,
+    linkedComment,
     totalComments,
     fetchingChannels,
-    myReactsByCommentId,
+    reactionsById,
-    othersReactsById,
     activeChannelId,
   } = props;
-
   const commentRef = React.useRef();
   const spinnerRef = React.useRef();
-  const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST;
+  const [sort, setSort] = usePersistedState(
-  const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT);
+    'comment-sort',
-  const [page, setPage] = React.useState(0);
+    ENABLE_COMMENT_REACTIONS ? SORT_COMMENTS_BEST : SORT_COMMENTS_NEW
-  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(othersReactsById) || !ENABLE_COMMENT_REACTIONS
+    Boolean(reactionsById) || !ENABLE_COMMENT_REACTIONS
   );
-
+  const [justCommented] = React.useState([]);
+  const linkedCommentId = linkedComment && linkedComment.comment_id;
   const hasNoComments = !totalComments;
-  const moreBelow = page < topLevelTotalPages;
+  const moreBelow = totalComments - end > 0;
-
   const isMyComment = (channelId: string): boolean => {
     if (myChannels != null && channelId != null) {
       for (let i = 0; i < myChannels.length; i++) {
@@ -94,124 +75,86 @@ function CommentList(props: Props) {
     return false;
   };
 
-  function changeSort(newSort) {
+  const handleMoreBelow = React.useCallback(() => {
-    if (sort !== newSort) {
+    if (moreBelow) {
-      setSort(newSort);
+      setEnd(end + 10);
-      setPage(0); // Invalidate existing comments
     }
-  }
+  }, [end, setEnd, moreBelow]);
 
-  // Reset comments
   useEffect(() => {
-    if (page === 0) {
+    fetchComments(uri);
-      resetComments(uri);
+  }, [fetchComments, uri]);
-      setPage(1);
-    }
-  }, [page, uri, resetComments]);
 
-  // Fetch top-level comments
   useEffect(() => {
-    if (page !== 0) {
+    if (totalComments && ENABLE_COMMENT_REACTIONS && !fetchingChannels) {
-      if (page === 1 && linkedCommentId) {
+      fetchReacts(uri)
-        fetchComment(linkedCommentId);
+        .then(() => {
-      }
+          setReadyToDisplayComments(true);
-
+        })
-      fetchTopLevelComments(uri, page, COMMENT_PAGE_SIZE_TOP_LEVEL, sort);
+        .catch(() => setReadyToDisplayComments(true));
     }
-  }, [fetchTopLevelComments, uri, page, resetComments, sort, linkedCommentId, fetchComment]);
+  }, [fetchReacts, uri, totalComments, activeChannelId, fetchingChannels]);
 
-  // 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, -125);
+      window.scrollBy(0, -100);
     }
   }, [readyToDisplayComments, linkedCommentId]);
 
-  // Infinite scroll
   useEffect(() => {
-    function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) {
+    function handleCommentScroll(e) {
-      if (!spinnerRef || !spinnerRef.current) {
+      // $FlowFixMe
-        return false;
+      const rect = spinnerRef.current.getBoundingClientRect();
-      }
-
-      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.width > 0 &&
+        rect.top >= 0 &&
-        rect.height > 0 &&
+        rect.left >= 0 &&
-        rect.bottom >= 0 &&
-        rect.right >= 0 &&
         // $FlowFixMe
-        rect.top <= windowH &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
         // $FlowFixMe
-        rect.left <= windowW;
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth);
 
-      return (isInViewport || isApproachingViewport) && page < topLevelTotalPages;
+      if (isInViewport) {
-    }
+        handleMoreBelow();
-
-    const handleCommentScroll = debounce(() => {
-      if (shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
-        setPage(page + 1);
       }
-    }, DEBOUNCE_SCROLL_HANDLER_MS);
+    }
 
     if (!isFetchingComments && readyToDisplayComments && moreBelow && spinnerRef && spinnerRef.current) {
-      if (shouldFetchNextPage(page, topLevelTotalPages, window, document, 0)) {
+      window.addEventListener('scroll', handleCommentScroll);
-        setPage(page + 1);
-      } else {
-        window.addEventListener('scroll', handleCommentScroll);
-        return () => window.removeEventListener('scroll', handleCommentScroll);
-      }
     }
-  }, [
-    page,
-    moreBelow,
-    spinnerRef,
-    isFetchingComments,
-    readyToDisplayComments,
-    topLevelComments.length,
-    topLevelTotalPages,
-  ]);
 
-  const displayedComments = readyToDisplayComments ? topLevelComments : [];
+    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);
+        orderedComments = arrayOfComments.filter((c) => c.comment_id !== linkedComment.parent_id);
+
+        if (parentComment) {
+          orderedComments.unshift(parentComment);
+        }
+      }
+    } else {
+      orderedComments = arrayOfComments;
+    }
+    return orderedComments;
+  }
+
+  // Default to newest first for apps that don't have comment reactions
+  const sortedComments = reactionsById
+    ? sortComments({ comments, reactionsById, sort, isMyComment, justCommented })
+    : [];
+  const displayedComments = readyToDisplayComments
+    ? prepareComments(sortedComments, linkedComment).slice(start, end)
+    : [];
 
   return (
     <Card
@@ -231,9 +174,9 @@ function CommentList(props: Props) {
                 label={__('Best')}
                 icon={ICONS.BEST}
                 iconSize={18}
-                onClick={() => changeSort(SORT_BY.POPULARITY)}
+                onClick={() => setSort(SORT_COMMENTS_BEST)}
                 className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_BY.POPULARITY,
+                  'button-toggle--active': sort === SORT_COMMENTS_BEST,
                 })}
               />
               <Button
@@ -241,9 +184,9 @@ function CommentList(props: Props) {
                 label={__('Controversial')}
                 icon={ICONS.CONTROVERSIAL}
                 iconSize={18}
-                onClick={() => changeSort(SORT_BY.CONTROVERSY)}
+                onClick={() => setSort(SORT_COMMENTS_CONTROVERSIAL)}
                 className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_BY.CONTROVERSY,
+                  'button-toggle--active': sort === SORT_COMMENTS_CONTROVERSIAL,
                 })}
               />
               <Button
@@ -251,9 +194,9 @@ function CommentList(props: Props) {
                 label={__('New')}
                 icon={ICONS.NEW}
                 iconSize={18}
-                onClick={() => changeSort(SORT_BY.NEWEST)}
+                onClick={() => setSort(SORT_COMMENTS_NEW)}
                 className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_BY.NEWEST,
+                  'button-toggle--active': sort === SORT_COMMENTS_NEW,
                 })}
               />
             </span>
@@ -263,21 +206,22 @@ function CommentList(props: Props) {
             icon={ICONS.REFRESH}
             title={__('Refresh')}
             onClick={() => {
-              setPage(0);
+              fetchComments(uri);
+              fetchReacts(uri);
             }}
           />
         </>
       }
       actions={
         <>
-          <CommentCreate uri={uri} />
+          <CommentCreate uri={uri} justCommented={justCommented} />
 
           {!commentsDisabledBySettings && !isFetchingComments && hasNoComments && (
             <Empty padded text={__('That was pretty deep. What do you think?')} />
           )}
 
           <ul className="comments" ref={commentRef}>
-            {topLevelComments &&
+            {comments &&
               displayedComments &&
               displayedComments.map((comment) => {
                 return (
@@ -294,10 +238,9 @@ function CommentList(props: Props) {
                     timePosted={comment.timestamp * 1000}
                     claimIsMine={claimIsMine}
                     commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-                    linkedCommentId={linkedCommentId}
+                    linkedComment={linkedComment}
                     isPinned={comment.is_pinned}
                     supportAmount={comment.support_amount}
-                    numDirectReplies={comment.replies}
                   />
                 );
               })}

ui/component/commentsReplies/index.js

@@ -1,20 +1,14 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimIsMine, selectMyChannelClaims } from 'lbry-redux';
-import {
+import { makeSelectRepliesForParentId } from 'redux/selectors/comments';
-  selectIsFetchingCommentsByParentId,
-  makeSelectRepliesForParentId,
-  makeSelectTotalRepliesForParentId,
-} from 'redux/selectors/comments';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import CommentsReplies from './view';
 
 const select = (state, props) => ({
-  fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
+  comments: 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,45 +3,32 @@ 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 = {
-  fetchedReplies: Array<any>,
+  comments: Array<any>,
-  totalReplies: number,
   uri: string,
-  parentId: string,
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
-  linkedCommentId?: string,
+  linkedComment?: Comment,
   commentingEnabled: boolean,
   threadDepth: number,
-  numDirectReplies: number,
-  isFetchingByParentId: { [string]: boolean },
-  onShowMore?: () => void,
 };
 
 function CommentsReplies(props: Props) {
-  const {
+  const { uri, comments, claimIsMine, myChannels, linkedComment, commentingEnabled, threadDepth } = props;
-    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 (onShowMore) {
+    if (start > 0) {
-      onShowMore();
+      setStart(0);
+    } else {
+      setEnd(numberOfComments);
     }
   }
 
@@ -57,12 +44,35 @@ function CommentsReplies(props: Props) {
     return false;
   }
 
-  const displayedComments = fetchedReplies;
+  function handleCommentDone() {
+    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(numDirectReplies) && (
+    Boolean(numberOfComments) && (
       <div className="comment__replies-container">
-        {Boolean(numDirectReplies) && !isExpanded && (
+        {Boolean(numberOfComments) && !isExpanded && (
           <div className="comment__actions--nested">
             <Button
               className="comment__action"
@@ -72,13 +82,13 @@ function CommentsReplies(props: Props) {
             />
           </div>
         )}
-        {fetchedReplies && displayedComments && isExpanded && (
+        {comments && 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) => {
+                {displayedComments.map((comment, index) => {
                   return (
                     <Comment
                       threadDepth={threadDepth}
@@ -92,46 +102,22 @@ function CommentsReplies(props: Props) {
                       timePosted={comment.timestamp * 1000}
                       claimIsMine={claimIsMine}
                       commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-                      linkedCommentId={linkedCommentId}
+                      linkedComment={linkedComment}
                       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 && fetchedReplies && displayedComments.length < totalReplies && (
+        {isExpanded && comments && (end < numberOfComments || start > 0) && (
-          <div className="comment__actions--nested">
+          <div className="comment__actions">
             <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, string, number, number) => void,
+  doCommentList: (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,8 +248,6 @@ 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,18 +4,8 @@ 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,6 +16,7 @@ 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';
@@ -23,10 +24,11 @@ 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 {
-    linkedCommentId: urlParams.get('lc'),
+    linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state),
     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,
-  linkedCommentId?: string,
+  linkedComment: any,
   setPrimaryUri: (?string) => void,
   collection?: Collection,
   collectionId: string,
@@ -46,7 +46,7 @@ function FilePage(props: Props) {
     obscureNsfw,
     isMature,
     costInfo,
-    linkedCommentId,
+    linkedComment,
     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} linkedCommentId={linkedCommentId} />}
+              {!commentsDisabled && <CommentsList uri={uri} linkedComment={linkedComment} />}
             </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} linkedCommentId={linkedCommentId} />
+          <CommentsList uri={uri} linkedComment={linkedComment} />
         </div>
       )}
     </Page>

ui/redux/actions/comments.js

@@ -2,10 +2,11 @@
 import * as ACTIONS from 'constants/action_types';
 import * as REACTION_TYPES from 'constants/reactions';
 import * as PAGES from 'constants/pages';
-import { SORT_BY, BLOCK_LEVEL } from 'constants/comment';
+import { BLOCK_LEVEL } from 'constants/comment';
 import { Lbry, parseURI, buildURI, selectClaimsById, selectClaimsByUri, selectMyChannelClaims } from 'lbry-redux';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
+  makeSelectCommentIdsForUri,
   makeSelectMyReactionsForComment,
   makeSelectOthersReactionsForComment,
   selectPendingCommentReacts,
@@ -17,22 +18,7 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { toHex } from 'util/hex';
 import Comments from 'comments';
 
-const isDev = process.env.NODE_ENV !== 'production';
+export function doCommentList(uri: string, page: number = 1, pageSize: number = 99999) {
-
-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];
@@ -49,9 +35,6 @@ export function doCommentList(
 
     dispatch({
       type: ACTIONS.COMMENT_LIST_STARTED,
-      data: {
-        parentId,
-      },
     });
 
     // Adding 'channel_id' and 'channel_name' enables "CreatorSettings > commentsEnabled".
@@ -61,28 +44,20 @@ export function doCommentList(
       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, total_items, total_filtered_items, total_pages } = result;
+        const { items: comments } = 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) => {
@@ -95,7 +70,6 @@ export function doCommentList(
             },
           });
         } else {
-          devToast(dispatch, `doCommentList: ${error.message}`);
           dispatch({
             type: ACTIONS.COMMENT_LIST_FAILED,
             data: error,
@@ -105,60 +79,6 @@ export function doCommentList(
   };
 }
 
-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();
@@ -177,7 +97,7 @@ export function doSuperChatList(uri: string) {
     return Comments.super_list({
       claim_id: claimId,
     })
-      .then((result: SuperListResponse) => {
+      .then((result: CommentListResponse) => {
         const { items: comments, total_amount: totalAmount } = result;
         dispatch({
           type: ACTIONS.COMMENT_SUPER_CHAT_LIST_COMPLETED,
@@ -197,16 +117,17 @@ export function doSuperChatList(uri: string) {
   };
 }
 
-export function doCommentReactList(commentIds: Array<string>) {
+export function doCommentReactList(uri: string | null, commentId?: 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: CommentReactListParams = {
+    const params: { comment_ids: string, channel_name?: string, channel_id?: string } = {
       comment_ids: commentIds.join(','),
     };
 
@@ -223,12 +144,10 @@ export function doCommentReactList(commentIds: Array<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,
@@ -263,9 +182,8 @@ export function doCommentReact(commentId: string, type: string) {
       return;
     }
 
-    const reactKey = `${commentId}:${activeChannelClaim.claim_id}`;
+    let myReacts = makeSelectMyReactionsForComment(commentId)(state);
-    const myReacts = makeSelectMyReactionsForComment(reactKey)(state);
+    const othersReacts = makeSelectOthersReactionsForComment(commentId)(state);
-    const othersReacts = makeSelectOthersReactionsForComment(reactKey)(state);
     const params: CommentReactParams = {
       comment_ids: commentId,
       channel_name: activeChannelClaim.name,
@@ -299,8 +217,8 @@ export function doCommentReact(commentId: string, type: string) {
     dispatch({
       type: ACTIONS.COMMENT_REACTION_LIST_COMPLETED,
       data: {
-        myReactions: { [reactKey]: myReactsObj },
+        myReactions: { [commentId]: myReactsObj },
-        othersReactions: { [reactKey]: othersReacts },
+        othersReactions: { [commentId]: othersReacts },
       },
     });
 
@@ -453,7 +371,7 @@ export function doCommentCreate(
   };
 }
 
-export function doCommentPin(commentId: string, claimId: string, remove: boolean) {
+export function doCommentPin(commentId: string, remove: boolean) {
   return (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
     const activeChannel = selectActiveChannelClaim(state);
@@ -476,11 +394,7 @@ export function doCommentPin(commentId: string, claimId: string, remove: boolean
       .then((result: CommentPinResponse) => {
         dispatch({
           type: ACTIONS.COMMENT_PIN_COMPLETED,
-          data: {
+          data: result,
-            pinnedComment: result.items,
-            claimId,
-            unpin: remove,
-          },
         });
       })
       .catch((error) => {

ui/redux/reducers/comments.js

@@ -3,25 +3,17 @@ import * as ACTIONS from 'constants/action_types';
 import { handleActions } from 'util/redux-utils';
 import { BLOCK_LEVEL } from 'constants/comment';
 
-const IS_DEV = process.env.NODE_ENV !== 'production';
-
 const defaultState: CommentsState = {
   commentById: {}, // commentId -> Comment
-  byId: {}, // ClaimID -> list of fetched comment IDs.
+  byId: {}, // ClaimID -> list of comments
-  totalCommentsById: {}, // ClaimId -> ultimate total (including replies) in commentron.
+  repliesByParentId: {}, // ParentCommentID -> list of reply comments
-  repliesByParentId: {}, // ParentCommentID -> list of fetched replies.
+  topLevelCommentsById: {}, // ClaimID -> list of top level comments
-  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,
@@ -47,14 +39,6 @@ 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 => ({
@@ -74,13 +58,10 @@ 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();
@@ -94,27 +75,12 @@ 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;
@@ -129,10 +95,8 @@ export default handleActions(
         ...state,
         topLevelCommentsById,
         repliesByParentId,
-        totalRepliesByParentId,
         commentById,
         byId,
-        totalCommentsById,
         commentsByUri,
         isLoading: false,
         isCommenting: false,
@@ -183,14 +147,12 @@ export default handleActions(
     },
 
     [ACTIONS.COMMENT_REACTION_LIST_COMPLETED]: (state: CommentsState, action: any): CommentsState => {
-      const { myReactions, othersReactions, channelId } = action.data;
+      const { myReactions, othersReactions } = action.data;
       const myReacts = Object.assign({}, state.myReactsByCommentId);
       const othersReacts = Object.assign({}, state.othersReactsByCommentId);
-
       if (myReactions) {
         Object.entries(myReactions).forEach(([commentId, reactions]) => {
-          const key = channelId ? `${commentId}:${channelId}` : commentId;
+          myReacts[commentId] = Object.entries(reactions).reduce((acc, [name, count]) => {
-          myReacts[key] = Object.entries(reactions).reduce((acc, [name, count]) => {
             if (count === 1) {
               acc.push(name);
             }
@@ -198,11 +160,9 @@ export default handleActions(
           }, []);
         });
       }
-
       if (othersReactions) {
         Object.entries(othersReactions).forEach(([commentId, reactions]) => {
-          const key = channelId ? `${commentId}:${channelId}` : commentId;
+          othersReacts[commentId] = reactions;
-          othersReacts[key] = reactions;
         });
       }
 
@@ -214,32 +174,10 @@ export default handleActions(
       };
     },
 
-    [ACTIONS.COMMENT_LIST_STARTED]: (state, action: any) => {
+    [ACTIONS.COMMENT_LIST_STARTED]: (state) => ({ ...state, isLoading: true }),
-      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 {
+      const { comments, claimId, uri, disabled, authorClaimId } = action.data;
-        comments,
-        parentId,
-        totalItems,
-        totalFilteredItems,
-        totalPages,
-        claimId,
-        uri,
-        disabled,
-        authorClaimId,
-      } = action.data;
       const commentsDisabledChannelIds = [...state.commentsDisabledChannelIds];
 
       if (disabled) {
@@ -247,16 +185,10 @@ 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);
@@ -268,135 +200,49 @@ 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);
 
-        // totalCommentsById[claimId] = totalItems;
+        // map the comment_ids to the new comments
-        // --> currently, this value is only correct when done via a top-level query.
+        for (let i = 0; i < comments.length; i++) {
-        // Until this is fixed, I'm moving it downwards to **
+          const comment = comments[i];
-
+          if (comment['parent_id']) {
-        // --- Top-level comments ---
+            if (!tempRepliesByParent[comment.parent_id]) {
-        if (!parentId) {
+              tempRepliesByParent[comment.parent_id] = [comment.comment_id];
-          totalCommentsById[claimId] = totalItems; // **
+            } else {
-
+              tempRepliesByParent[comment.parent_id].push(comment.comment_id);
-          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);
             }
+          } else {
+            commentById[comment.comment_id] = comment;
+            topLevelComments.push(comment.comment_id);
           }
+          commentIds[i] = comments[i].comment_id;
+          commentById[commentIds[i]] = comments[i];
         }
-        // --- Replies ---
+        topLevelCommentsById[claimId] = topLevelComments;
-        else {
-          totalRepliesByParentId[parentId] = totalFilteredItems;
-          isLoadingByParentId[parentId] = false;
 
-          for (let i = 0; i < comments.length; ++i) {
+        byId[claimId] = commentIds;
-            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,
       };
     },
 
@@ -427,51 +273,6 @@ 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);
@@ -551,50 +352,21 @@ 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 = comment.claim_id;
+      const claimId = commentById[comment_id].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,
       };
     },
@@ -618,41 +390,11 @@ 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,7 +9,6 @@ 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(
@@ -144,28 +143,19 @@ 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 selectMyReactionsByCommentId = createSelector(selectState, (state) => state.myReactsByCommentId);
+export const makeSelectMyReactionsForComment = (commentId: string) =>
-
-/**
- * makeSelectMyReactionsForComment
- *
- * @param commentIdChannelId Format = "commentId:MyChannelId".
- */
-export const makeSelectMyReactionsForComment = (commentIdChannelId: string) =>
   createSelector(selectState, (state) => {
     if (!state.myReactsByCommentId) {
       return [];
     }
 
-    return state.myReactsByCommentId[commentIdChannelId] || [];
+    return state.myReactsByCommentId[commentId] || [];
   });
 
 export const makeSelectOthersReactionsForComment = (commentId: string) =>
@@ -286,18 +276,6 @@ 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
@@ -356,15 +334,9 @@ export const makeSelectRepliesForParentId = (id: string) =>
     }
   );
 
-export const makeSelectTotalRepliesForParentId = (parentId: string) =>
-  createSelector(selectState, (state) => {
-    return state.totalRepliesByParentId[parentId] || 0;
-  });
-
 export const makeSelectTotalCommentsCountForUri = (uri: string) =>
-  createSelector(selectState, selectCommentsByUri, (state, byUri) => {
+  createSelector(makeSelectCommentsForUri(uri), (comments) => {
-    const claimId = byUri[uri];
+    return comments ? comments.length : 0;
-    return state.totalCommentsById[claimId] || 0;
   });
 
 // Personal list

ui/scss/component/_comments.scss

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

ui/util/comments.js

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