Fix notifications fetching issues (#7002)

ui/component/commentReactions/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Comment from './view';
-import { makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimIsMine, makeSelectClaimForUri, doResolveUri } from 'lbry-redux';
 import { doToast } from 'redux/actions/notifications';
 import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
 import { doCommentReact } from 'redux/actions/comments';
@@ -21,6 +21,7 @@ const select = (state, props) => {
 };
 
 const perform = (dispatch) => ({
+  resolve: (uri) => dispatch(doResolveUri(uri)),
   react: (commentId, type) => dispatch(doCommentReact(commentId, type)),
   doToast: (params) => dispatch(doToast(params)),
 });

ui/component/commentReactions/view.jsx

@@ -17,9 +17,11 @@ type Props = {
   pendingCommentReacts: Array<string>,
   claimIsMine: boolean,
   activeChannelId: ?string,
+  uri: string,
   claim: ?ChannelClaim,
   doToast: ({ message: string }) => void,
   hideCreatorLike: boolean,
+  resolve: (string) => void,
 };
 
 export default function CommentReactions(props: Props) {
@@ -29,15 +31,24 @@ export default function CommentReactions(props: Props) {
     commentId,
     react,
     claimIsMine,
+    uri,
     claim,
     activeChannelId,
     doToast,
     hideCreatorLike,
+    resolve,
   } = props;
   const {
     push,
     location: { pathname },
   } = useHistory();
+
+  React.useEffect(() => {
+    if (!claim) {
+      resolve(uri);
+    }
+  }, [claim, resolve, uri]);
+
   const canCreatorReact =
     claim &&
     claimIsMine &&

ui/page/notifications/view.jsx

@@ -47,7 +47,7 @@ export default function NotificationsPage(props: Props) {
 
   // Fetch reacts
   React.useEffect(() => {
-    if (initialFetchDone && activeChannel) {
+    if ((!fetching || initialFetchDone) && activeChannel) {
       let idsForReactionFetch = [];
       list.map((notification) => {
         const { notification_rule, notification_parameters } = notification;
@@ -70,7 +70,7 @@ export default function NotificationsPage(props: Props) {
         doCommentReactList(idsForReactionFetch);
       }
     }
-  }, [initialFetchDone, doCommentReactList, list, activeChannel]);
+  }, [doCommentReactList, list, activeChannel, fetching, initialFetchDone]);
 
   React.useEffect(() => {
     if (unseenCount > 0 || unreadCount > 0) {