Improve comment notifications to a content that was loaded already at (#3430)

somepoint

Co-authored-by: miko <sauce47@posteo.net>

Author: keikari

ui/component/comment/view.jsx

@@ -195,6 +195,14 @@ function CommentView(props: Props & StateProps & DispatchProps) {
   const [page, setPage] = useState(showRepliesOnMount ? 1 : 0);
   const [advancedEditor] = usePersistedState('comment-editor-mode', false);
   const [displayDeadComment, setDisplayDeadComment] = React.useState(forceDisplayDeadComment);
+
+  // Expand replies when linked comment ancestors arrive after mount (e.g. notification navigation)
+  React.useEffect(() => {
+    if (isInLinkedCommentChain) {
+      setShowReplies(true);
+      setPage((prev) => prev || 1);
+    }
+  }, [isInLinkedCommentChain]);
   const likesCount = (othersReacts && othersReacts.like) || 0;
   const dislikesCount = (othersReacts && othersReacts.dislike) || 0;
   const totalLikesAndDislikes = likesCount + dislikesCount;

ui/component/commentsList/view.jsx

@@ -273,6 +273,16 @@ export default function CommentList(props: Props & StateProps & DispatchProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- Only on uri change
   }, [uri]);
 
+  // Fetch linked/thread comment independently of pagination state
+  useEffect(() => {
+    if (threadCommentId) {
+      fetchComment(threadCommentId);
+    }
+    if (linkedCommentId) {
+      fetchComment(linkedCommentId);
+    }
+  }, [fetchComment, linkedCommentId, threadCommentId]);
+
   // Fetch top-level comments
   useEffect(() => {
     const isInitialFetch = currentFetchedPage === 0;
@@ -282,18 +292,9 @@ export default function CommentList(props: Props & StateProps & DispatchProps) {
     const hasRightFetchPage = Number(isInitialFetch) ^ Number(isNewPage);
 
     if (page !== 0 && hasRightFetchPage) {
-      if (page === 1) {
-        if (threadCommentId) {
-          fetchComment(threadCommentId);
-        }
-        if (linkedCommentId) {
-          fetchComment(linkedCommentId);
-        }
-      }
-
       fetchTopLevelComments(uri, undefined, page, COMMENT_PAGE_SIZE_TOP_LEVEL, sort, false);
     }
-  }, [currentFetchedPage, fetchComment, fetchTopLevelComments, linkedCommentId, page, sort, threadCommentId, uri]);
+  }, [currentFetchedPage, fetchTopLevelComments, page, sort, uri]);
 
   React.useEffect(() => {
     if (threadCommentId) {
@@ -342,8 +343,7 @@ export default function CommentList(props: Props & StateProps & DispatchProps) {
     } else {
       delete window.pendingLinkedCommentScroll;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [linkedCommentId, threadCommentId]);
 
   // Infinite scroll
   useEffect(() => {