diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 2b77a3f6..eec98e5b 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/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) => ( -
(replyRefs.current[index] = el)}> +
))} 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)} + > {' '} #