))}
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index b5280bba..a2fec7ee 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/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) => (
-
(replyRefs.current[index] = el)}>
+
))}
diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx
index 5e5d5b39..407aae8c 100644
--- a/src/components/reply-quote-preview/reply-quote-preview.tsx
+++ b/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}
@@ -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}`}
{backlinkReply?.shortCid && (
-
+
handleClick(e, backlinkReply?.cid, backlinkReply?.subplebbitAddress)}
+ >
+ {' '}
#
)}
@@ -232,7 +265,11 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
{quotelinkReply?.author?.address === account?.author?.address && ' (You)'}
{quotelinkReply?.shortCid && (
-
+
handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress)}
+ >
{' '}
#