External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add hover render of post quoted by user

Browse Source
This commit is contained in:
plebeius.eth
2023-06-22 14:59:30 +02:00
parent 92479406c0
commit b04b96c12c
6 changed files with 701 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ForwardRefLink.jsx
+26
View File
@@ -0,0 +1,26 @@
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
const ForwardRefLink = React.forwardRef((props, ref) => {
const { children, setRefAndCid, onMouseOver, onMouseLeave, onClick, ...otherProps } = props;
useEffect(() => {
if (ref.current && typeof setRefAndCid === 'function') {
setRefAndCid(ref.current);
}
}, [ref, setRefAndCid]);
return (
<Link
ref={ref}
{...otherProps}
onMouseOver={onMouseOver}
onMouseLeave={onMouseLeave}
onClick={onClick}
>
{children}
</Link>
);
});
export default ForwardRefLink;
src/components/Post.jsx
+12 -9
View File
@@ -1,8 +1,8 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { Link } from 'react-router-dom';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'; import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
import breaks from 'remark-breaks'; import breaks from 'remark-breaks';
import ForwardRefLink from './ForwardRefLink';
const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, postQuoteRef }) => { const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, postQuoteRef }) => {
@@ -67,29 +67,32 @@ const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, po
} }
const cid = matchedText.replace('c/', ''); const cid = matchedText.replace('c/', '');
const linkRef = React.createRef();
newParts.push( newParts.push(
<Link <ForwardRefLink
key={`link-${i}-${matchedText}`} key={`link-${i}-${matchedText}`}
className="quotelink" className="quotelink"
to={() => {}} to={() => {}}
ref={(el) => { ref={linkRef}
setRefAndCid={(ref) => {
if (typeof postQuoteRef === 'function') { if (typeof postQuoteRef === 'function') {
postQuoteRef(cid, el); postQuoteRef(cid, ref);
} else {
return;
} }
}} }}
onClick={() => {postQuoteOnClick(cid)}} onClick={() => {postQuoteOnClick(cid)}}
onMouseOver={() => {postQuoteOnOver(cid)}} onMouseOver={() => {
postQuoteOnOver(cid);
}}
onMouseLeave={() => { onMouseLeave={() => {
postQuoteOnLeave(); postQuoteOnLeave();
}} }}
> >
{matchedText} {matchedText}
</Link> </ForwardRefLink>
); );
lastIndex = index + matchedText.length; lastIndex = index + matchedText.length;
} }
src/components/views/All.jsx
+211 -4
View File
@@ -76,6 +76,7 @@ const All = () => {
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const backlinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({}); const quoteRefs = useRef({});
const postRefs = useRef({});
const backlinkRefsMobile = useRef({}); const backlinkRefsMobile = useRef({});
const quoteRefsMobile = useRef({}); const quoteRefsMobile = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
@@ -97,11 +98,24 @@ const All = () => {
const [deletePost, setDeletePost] = useState(false); const [deletePost, setDeletePost] = useState(false);
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({});
const [displayedReplies, setDisplayedReplies] = useState([]);
const setSelectedThreadCid = (cid) => { const setSelectedThreadCid = (cid) => {
selectedThreadCidRef.current = cid; selectedThreadCidRef.current = cid;
} }
// let post.jsx access full cid of user-typed short cid
useEffect(() => {
const newCidTracker = {};
displayedReplies.forEach((reply) => {
newCidTracker[reply.shortCid] = reply.cid;
});
setCidTracker(newCidTracker);
}, [displayedReplies]);
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode); useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address); const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
@@ -580,6 +594,7 @@ const All = () => {
data={selectedFeed} data={selectedFeed}
itemContent={(index, thread) => { itemContent={(index, thread) => {
const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
setDisplayedReplies(displayedReplies);
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const isModerator = moderatorPermissions[thread.subplebbitAddress]; const isModerator = moderatorPermissions[thread.subplebbitAddress];
@@ -1248,7 +1263,55 @@ const All = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-${index}`} /> <Post key={`post-${index}`}
content={reply.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<span key={`ttl-s-${index}`} className="ttl"> (...) <span key={`ttl-s-${index}`} className="ttl"> (...)
<br key={`ttl-s-br1-${index}`} /> <br key={`ttl-s-br1-${index}`} />
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
@@ -1308,7 +1371,55 @@ const All = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-${index}`} comment={reply} /> <Post key={`post-${index}`}
content={reply.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
@@ -1680,7 +1791,55 @@ const All = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} /> <Post key={`post-mobile-${index}`}
content={reply.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<span key={`mob-ttl-s-${index}`} className="ttl"> (...) <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${index}`} /> <br key={`mob-ttl-s-br1-${index}`} />
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
@@ -1740,7 +1899,55 @@ const All = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-mobile-${index}`} comment={reply} /> <Post key={`post-mobile-${index}`}
content={reply.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
src/components/views/Board.jsx
+209 -4
View File
@@ -86,6 +86,7 @@ const Board = () => {
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const backlinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({}); const quoteRefs = useRef({});
const postRefs = useRef({});
const backlinkRefsMobile = useRef({}); const backlinkRefsMobile = useRef({});
const quoteRefsMobile = useRef({}); const quoteRefsMobile = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
@@ -114,11 +115,22 @@ const Board = () => {
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({});
const [displayedReplies, setDisplayedReplies] = useState([]);
const setSelectedThreadCid = (cid) => { const setSelectedThreadCid = (cid) => {
selectedThreadCidRef.current = cid; selectedThreadCidRef.current = cid;
} }
// let post.jsx access full cid of user-typed short cid
useEffect(() => {
const newCidTracker = {};
displayedReplies.forEach((reply) => {
newCidTracker[reply.shortCid] = reply.cid;
});
setCidTracker(newCidTracker);
}, [displayedReplies]);
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode); useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
@@ -1028,6 +1040,7 @@ const Board = () => {
data={selectedFeed} data={selectedFeed}
itemContent={(index, thread) => { itemContent={(index, thread) => {
const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
setDisplayedReplies(displayedReplies);
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
return ( return (
@@ -1673,7 +1686,55 @@ const Board = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-${index}`} /> <Post key={`post-${index}`}
content={reply.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<span key={`ttl-s-${index}`} className="ttl"> (...) <span key={`ttl-s-${index}`} className="ttl"> (...)
<br key={`ttl-s-br1-${index}`} /> <br key={`ttl-s-br1-${index}`} />
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
@@ -1733,7 +1794,55 @@ const Board = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-${index}`} comment={reply} /> <Post key={`post-${index}`}
content={reply.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
@@ -2073,7 +2182,55 @@ const Board = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} /> <Post key={`post-mobile-${index}`}
content={reply.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<span key={`mob-ttl-s-${index}`} className="ttl"> (...) <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${index}`} /> <br key={`mob-ttl-s-br1-${index}`} />
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
@@ -2133,7 +2290,55 @@ const Board = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-mobile-${index}`} comment={reply} /> <Post key={`post-mobile-${index}`}
content={reply.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
src/components/views/Subscriptions.jsx
+209 -4
View File
@@ -76,6 +76,7 @@ const Subscriptions = () => {
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const backlinkRefs = useRef({}); const backlinkRefs = useRef({});
const quoteRefs = useRef({}); const quoteRefs = useRef({});
const postRefs = useRef({});
const backlinkRefsMobile = useRef({}); const backlinkRefsMobile = useRef({});
const quoteRefsMobile = useRef({}); const quoteRefsMobile = useRef({});
const postOnHoverRef = useRef(null); const postOnHoverRef = useRef(null);
@@ -97,11 +98,22 @@ const Subscriptions = () => {
const [deletePost, setDeletePost] = useState(false); const [deletePost, setDeletePost] = useState(false);
const [moderatorPermissions, setModeratorPermissions] = useState({}); const [moderatorPermissions, setModeratorPermissions] = useState({});
const [executeAnonMode, setExecuteAnonMode] = useState(false); const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({});
const [displayedReplies, setDisplayedReplies] = useState([]);
const setSelectedThreadCid = (cid) => { const setSelectedThreadCid = (cid) => {
selectedThreadCidRef.current = cid; selectedThreadCidRef.current = cid;
} }
// let post.jsx access full cid of user-typed short cid
useEffect(() => {
const newCidTracker = {};
displayedReplies.forEach((reply) => {
newCidTracker[reply.shortCid] = reply.cid;
});
setCidTracker(newCidTracker);
}, [displayedReplies]);
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode); useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'}); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
@@ -590,6 +602,7 @@ const Subscriptions = () => {
data={selectedFeed} data={selectedFeed}
itemContent={(index, thread) => { itemContent={(index, thread) => {
const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {}; const { displayedReplies, omittedCount } = filteredRepliesByThread[thread.cid] || {};
setDisplayedReplies(displayedReplies);
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = "assets/filedeleted-res.gif";
const isModerator = moderatorPermissions[thread.subplebbitAddress]; const isModerator = moderatorPermissions[thread.subplebbitAddress];
@@ -1258,7 +1271,55 @@ const Subscriptions = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-${index}`} /> <Post key={`post-${index}`}
content={reply.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<span key={`ttl-s-${index}`} className="ttl"> (...) <span key={`ttl-s-${index}`} className="ttl"> (...)
<br key={`ttl-s-br1-${index}`} /> <br key={`ttl-s-br1-${index}`} />
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
@@ -1318,7 +1379,55 @@ const Subscriptions = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-${index}`} comment={reply} /> <Post key={`post-${index}`}
content={reply.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<EditLabel key={`edit-label-reply-${index}`} <EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
@@ -1690,7 +1799,55 @@ const Subscriptions = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} /> <Post key={`post-mobile-${index}`}
content={reply.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<span key={`mob-ttl-s-${index}`} className="ttl"> (...) <span key={`mob-ttl-s-${index}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${index}`} /> <br key={`mob-ttl-s-br1-${index}`} />
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
@@ -1750,7 +1907,55 @@ const Subscriptions = () => {
}}> }}>
{`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null} {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
</Link> </Link>
<Post content={reply.content} key={`post-mobile-${index}`} comment={reply} /> <Post key={`post-mobile-${index}`}
content={reply.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
const distanceToRight = window.innerWidth - rect.right;
const distanceToTop = rect.top;
const distanceToBottom = window.innerHeight - rect.bottom;
let top;
if (distanceToTop < postOnHoverHeight / 2) {
top = window.scrollY - 5;
} else if (distanceToBottom < postOnHoverHeight / 2) {
top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
} else {
top = rect.top + window.scrollY - postOnHoverHeight / 2;
}
if (distanceToRight < 200) {
setOutOfViewPosition({
top,
right: window.innerWidth - rect.left - 10,
maxWidth: rect.left - 5
});
} else {
setOutOfViewPosition({
top,
left: rect.left + rect.width + 5,
maxWidth: window.innerWidth - rect.left - rect.width - 5
});
}
})
}}
}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<EditLabel key={`edit-label-reply-mob-${index}`} <EditLabel key={`edit-label-reply-mob-${index}`}
commentCid={reply.cid} commentCid={reply.cid}
className="ttl"/> className="ttl"/>
src/components/views/Thread.jsx
+34 -41
View File
@@ -215,8 +215,8 @@ const Thread = () => {
].sort((a, b) => a.timestamp - b.timestamp ].sort((a, b) => a.timestamp - b.timestamp
), [accountRepliesNotYetInCommentReplies, flattenedReplies]); ), [accountRepliesNotYetInCommentReplies, flattenedReplies]);
// let post.jsx access full cid of user-typed short cid
useEffect(() => { useEffect(() => {
const newCidTracker = {}; const newCidTracker = {};
sortedReplies.forEach((reply) => { sortedReplies.forEach((reply) => {
newCidTracker[reply.shortCid] = reply.cid; newCidTracker[reply.shortCid] = reply.cid;
@@ -224,15 +224,6 @@ const Thread = () => {
setCidTracker(newCidTracker); setCidTracker(newCidTracker);
}, [sortedReplies]); }, [sortedReplies]);
// useEffect(() => {
// console.log("postrefs cidtracker", cidTracker);
// }, [cidTracker]);
// useEffect(() => {
// console.log("postRefs: ", postRefs)
// }, [postRefs]);
// temporary title from JSON, gets subplebbitAddress and threadCid from URL // temporary title from JSON, gets subplebbitAddress and threadCid from URL
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
@@ -1341,46 +1332,48 @@ const Thread = () => {
</Link> </Link>
<Post key={`post-${index}`} <Post key={`post-${index}`}
content={reply.content} content={reply.content}
postQuoteRef={(cid, ref) => { postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[cid] = ref; postRefs.current[quoteShortParentCid] = ref;
}} }}
postQuoteOnClick={(quoteShortParentCid) => { postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null) handleQuoteClick(reply, quoteShortParentCid, null)
}} }}
postQuoteOnOver={(quoteShortParentCid) => { postQuoteOnOver={(quoteShortParentCid) => {
handleQuoteHover(reply, quoteShortParentCid, () => { const quoteParentCid = cidTracker[quoteShortParentCid];
const quoteParentCid = cidTracker[quoteShortParentCid]; if (outOfViewCid !== quoteParentCid) {
setOutOfViewCid(quoteParentCid); handleQuoteHover(reply, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
// const rect = postRefs.current[quoteParentCid].getBoundingClientRect(); const rect = postRefs.current[quoteShortParentCid].getBoundingClientRect();
// const distanceToRight = window.innerWidth - rect.right; const distanceToRight = window.innerWidth - rect.right;
// const distanceToTop = rect.top; const distanceToTop = rect.top;
// const distanceToBottom = window.innerHeight - rect.bottom; const distanceToBottom = window.innerHeight - rect.bottom;
// let top; let top;
// if (distanceToTop < postOnHoverHeight / 2) { if (distanceToTop < postOnHoverHeight / 2) {
// top = window.scrollY - 5; top = window.scrollY - 5;
// } else if (distanceToBottom < postOnHoverHeight / 2) { } else if (distanceToBottom < postOnHoverHeight / 2) {
// top = window.scrollY - postOnHoverHeight + window.innerHeight - 10; top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
// } else { } else {
// top = rect.top + window.scrollY - postOnHoverHeight / 2; top = rect.top + window.scrollY - postOnHoverHeight / 2;
// } }
// if (distanceToRight < 200) { if (distanceToRight < 200) {
// setOutOfViewPosition({ setOutOfViewPosition({
// top, top,
// right: window.innerWidth - rect.left - 10, right: window.innerWidth - rect.left - 10,
// maxWidth: rect.left - 5 maxWidth: rect.left - 5
// }); });
// } else { } else {
// setOutOfViewPosition({ setOutOfViewPosition({
// top, top,
// left: rect.left + rect.width + 5, left: rect.left + rect.width + 5,
// maxWidth: window.innerWidth - rect.left - rect.width - 5 maxWidth: window.innerWidth - rect.left - rect.width - 5
// }); });
// } }
}) })
}} }}
}
postQuoteOnLeave={() => { postQuoteOnLeave={() => {
removeHighlight(); removeHighlight();
setOutOfViewCid(null); setOutOfViewCid(null);