fix(post): clicking the quotelink or backlink to a reply wouldn't scroll to the reply more than once in a row

src/components/post-desktop/post-desktop.tsx

@@ -424,15 +424,6 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
   const linksCount = pinned ? totalLinksCount : totalLinksCount - visiblelinksCount;
   const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
 
-  // scroll to reply if pathname is reply permalink (backlink)
-  const replyRefs = useRef<(HTMLDivElement | null)[]>([]);
-  useEffect(() => {
-    const replyIndex = replies.findIndex((reply) => location.pathname === `/p/${subplebbitAddress}/c/${reply?.cid}`);
-    if (replyIndex !== -1 && replyRefs.current[replyIndex]) {
-      replyRefs.current[replyIndex]?.scrollIntoView();
-    }
-  }, [location.pathname, replies, subplebbitAddress]);
-
   const stateString = useStateString(post);
 
   return (
@@ -484,7 +475,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
           replies &&
           showReplies &&
           (showAllReplies || showOmittedReplies[cid] ? replies : replies.slice(-5)).map((reply, index) => (
-            <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
+            <div key={index} className={styles.replyContainer}>
               <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} postReplyCount={replyCount} />
             </div>
           ))}

src/components/post-mobile/post-mobile.tsx

@@ -341,15 +341,6 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
   const isInPostPageView = isPostPageView(location.pathname, params);
   const { hidden, unhide } = useHide({ cid });
 
-  // scroll to reply if pathname is reply permalink (backlink)
-  const replyRefs = useRef<(HTMLDivElement | null)[]>([]);
-  useEffect(() => {
-    const replyIndex = replies.findIndex((reply) => location.pathname === `/p/${subplebbitAddress}/c/${reply?.cid}`);
-    if (replyIndex !== -1 && replyRefs.current[replyIndex]) {
-      replyRefs.current[replyIndex]?.scrollIntoView();
-    }
-  }, [location.pathname, replies, subplebbitAddress]);
-
   const stateString = useStateString(post);
 
   return (
@@ -398,7 +389,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
               replies &&
               showReplies &&
               (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
-                <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
+                <div key={index} className={styles.replyContainer}>
                   <Reply openReplyModal={openReplyModal} postReplyCount={replyCount} reply={reply} roles={roles} />
                 </div>
               ))}

src/components/reply-quote-preview/reply-quote-preview.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Comment, useAccount } from '@plebbit/plebbit-react-hooks';
 import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floating-ui/react';
 import useIsMobile from '../../hooks/use-is-mobile';
@@ -88,6 +88,19 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
     };
   }, [update]);
 
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent, cid: string | undefined, subplebbitAddress: string | undefined) => {
+    e.preventDefault();
+    if (cid && subplebbitAddress) {
+      navigate(`/p/${subplebbitAddress}/c/${cid}`);
+      setTimeout(() => {
+        const element = document.querySelector(`[data-cid="${cid}"]`);
+        element?.scrollIntoView();
+      }, 100);
+    }
+  };
+
   const handleMouseOver = (cid: string | undefined) => {
     if (!cid) return;
 
@@ -114,6 +127,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
         ref={refs.setReference}
         onMouseOver={() => handleMouseOver(backlinkReply?.cid)}
         onMouseLeave={() => handleMouseLeave(backlinkReply?.cid)}
+        onClick={(e) => handleClick(e, backlinkReply?.cid, backlinkReply?.subplebbitAddress)}
       >
         c/{backlinkReply?.shortCid}
       </Link>
@@ -138,6 +152,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
         className={styles.quoteLink}
         onMouseOver={() => handleMouseOver(quotelinkReply?.cid)}
         onMouseLeave={() => handleMouseLeave(quotelinkReply?.cid)}
+        onClick={(e) => handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress)}
       >
         {quotelinkReply?.shortCid && `c/${quotelinkReply?.shortCid}`}
         {quotelinkReply?.author?.address === account?.author?.address && ' (You)'}
@@ -174,6 +189,19 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
     };
   }, [update]);
 
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent, cid: string | undefined, subplebbitAddress: string | undefined) => {
+    e.preventDefault();
+    if (cid && subplebbitAddress) {
+      navigate(`/p/${subplebbitAddress}/c/${cid}`);
+      setTimeout(() => {
+        const element = document.querySelector(`[data-cid="${cid}"]`);
+        element?.scrollIntoView();
+      }, 100);
+    }
+  };
+
   const handleMouseOver = (cid: string | undefined) => {
     if (!cid) return;
 
@@ -203,7 +231,12 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
         {backlinkReply?.shortCid && `c/${backlinkReply?.shortCid}`}
       </span>
       {backlinkReply?.shortCid && (
-        <Link to={`/p/${backlinkReply?.subplebbitAddress}/c/${backlinkReply?.cid}`} className={styles.backlinkHash}>
+        <Link
+          to={`/p/${backlinkReply?.subplebbitAddress}/c/${backlinkReply?.cid}`}
+          className={styles.backlinkHash}
+          onClick={(e) => handleClick(e, backlinkReply?.cid, backlinkReply?.subplebbitAddress)}
+        >
+          {' '}
           #
         </Link>
       )}
@@ -232,7 +265,11 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
         {quotelinkReply?.author?.address === account?.author?.address && ' (You)'}
       </span>
       {quotelinkReply?.shortCid && (
-        <Link className={styles.quoteLink} to={`/p/${quotelinkReply?.subplebbitAddress}/c/${quotelinkReply?.cid}`}>
+        <Link
+          className={styles.quoteLink}
+          to={`/p/${quotelinkReply?.subplebbitAddress}/c/${quotelinkReply?.cid}`}
+          onClick={(e) => handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress)}
+        >
           {' '}
           #
         </Link>