#6576: Fix reaction-fetch infinite retries when no results are returned

ui/component/comment/index.js

@@ -11,12 +11,13 @@ 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 { 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 activeChannelId = selectActiveChannelId(state);
+  const activeChannelClaim = selectActiveChannelClaim(state);
+  const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
   const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
 
   return {
@@ -25,7 +26,7 @@ const select = (state, props) => {
     channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
     commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
     othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
-    activeChannelClaim: selectActiveChannelClaim(state),
+    activeChannelClaim,
     myChannels: selectMyChannelClaims(state),
     playingUri: selectPlayingUri(state),
     stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),

ui/component/commentReactions/index.js

@@ -4,10 +4,11 @@ import { makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
 import { doToast } from 'redux/actions/notifications';
 import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
 import { doCommentReact } from 'redux/actions/comments';
-import { selectActiveChannelId } from 'redux/selectors/app';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
 
 const select = (state, props) => {
-  const activeChannelId = selectActiveChannelId(state);
+  const activeChannelClaim = selectActiveChannelClaim(state);
+  const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
   const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
 
   return {

ui/component/commentsList/index.js

@@ -13,10 +13,11 @@ import {
 } from 'redux/selectors/comments';
 import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from 'redux/actions/comments';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
-import { selectActiveChannelId } from 'redux/selectors/app';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
 import CommentsList from './view';
 
 const select = (state, props) => {
+  const activeChannelClaim = selectActiveChannelClaim(state);
   return {
     myChannels: selectMyChannelClaims(state),
     allCommentIds: makeSelectCommentIdsForUri(props.uri)(state),
@@ -31,7 +32,7 @@ const select = (state, props) => {
     fetchingChannels: selectFetchingMyChannels(state),
     myReactsByCommentId: selectMyReactionsByCommentId(state),
     othersReactsById: selectOthersReactsById(state),
-    activeChannelId: selectActiveChannelId(state),
+    activeChannelId: activeChannelClaim && activeChannelClaim.claim_id,
   };
 };
 

ui/component/commentsList/view.jsx

@@ -76,8 +76,6 @@ function CommentList(props: Props) {
   const [page, setPage] = React.useState(0);
   const totalFetchedComments = allCommentIds ? allCommentIds.length : 0;
 
-  const [reactionFetchCount, setReactionFetchCount] = React.useState(0);
-
   // Display comments immediately if not fetching reactions
   // If not, wait to show comments until reactions are fetched
   const [readyToDisplayComments, setReadyToDisplayComments] = React.useState(
@@ -138,9 +136,7 @@ function CommentList(props: Props) {
         });
       }
 
-      if (idsForReactionFetch.length !== 0 && reactionFetchCount < 500) {
-        setReactionFetchCount(reactionFetchCount + 1);
-
+      if (idsForReactionFetch.length !== 0) {
         fetchReacts(idsForReactionFetch)
           .then(() => {
             setReadyToDisplayComments(true);
@@ -158,8 +154,6 @@ function CommentList(props: Props) {
     activeChannelId,
     fetchingChannels,
     isFetchingReacts,
-    reactionFetchCount,
-    setReactionFetchCount,
   ]);
 
   // Scroll to linked-comment

ui/redux/actions/comments.js

@@ -236,9 +236,10 @@ export function doCommentReactList(commentIds: Array<string>) {
         dispatch({
           type: ACTIONS.COMMENT_REACTION_LIST_COMPLETED,
           data: {
-            myReactions: myReactions || {},
+            myReactions,
             othersReactions,
             channelId: activeChannelClaim ? activeChannelClaim.claim_id : undefined,
+            commentIds,
           },
         });
       })
@@ -379,7 +380,7 @@ export function doCommentCreate(
   livestream?: boolean = false,
   txid?: string,
   payment_intent_id?: string,
-  environment?: string,
+  environment?: string
 ) {
   return async (dispatch: Dispatch, getState: GetState) => {
     const state = getState();

ui/redux/reducers/comments.js

@@ -182,12 +182,15 @@ export default handleActions(
     },
 
     [ACTIONS.COMMENT_REACTION_LIST_COMPLETED]: (state: CommentsState, action: any): CommentsState => {
-      const { myReactions, othersReactions, channelId } = action.data;
+      const { myReactions, othersReactions, channelId, commentIds } = action.data;
       const myReacts = Object.assign({}, state.myReactsByCommentId);
       const othersReacts = Object.assign({}, state.othersReactsByCommentId);
 
-      if (myReactions) {
-        Object.entries(myReactions).forEach(([commentId, reactions]) => {
+      const myReactionsEntries = myReactions ? Object.entries(myReactions) : [];
+      const othersReactionsEntries = othersReactions ? Object.entries(othersReactions) : [];
+
+      if (myReactionsEntries.length > 0) {
+        myReactionsEntries.forEach(([commentId, reactions]) => {
           const key = channelId ? `${commentId}:${channelId}` : commentId;
           myReacts[key] = Object.entries(reactions).reduce((acc, [name, count]) => {
             if (count === 1) {
@@ -196,13 +199,23 @@ export default handleActions(
             return acc;
           }, []);
         });
+      } else {
+        commentIds.forEach((commentId) => {
+          const key = channelId ? `${commentId}:${channelId}` : commentId;
+          myReacts[key] = [];
+        });
       }
 
-      if (othersReactions) {
-        Object.entries(othersReactions).forEach(([commentId, reactions]) => {
+      if (othersReactionsEntries.length > 0) {
+        othersReactionsEntries.forEach(([commentId, reactions]) => {
           const key = channelId ? `${commentId}:${channelId}` : commentId;
           othersReacts[key] = reactions;
         });
+      } else {
+        commentIds.forEach((commentId) => {
+          const key = channelId ? `${commentId}:${channelId}` : commentId;
+          othersReacts[key] = {};
+        });
       }
 
       return {