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

added thread replies

Browse Source
This commit is contained in:
plebbitor
2023-02-21 22:12:12 +01:00
parent d367318e33
commit 42c18a56e9
2 changed files with 90 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Thread.jsx
+84 -78
View File
@@ -119,19 +119,25 @@ const Thread = ({ setBodyStyle }) => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
function renderComments(comments) { const handleClickBottom = () => {
return comments.map(comment => { window.scrollTo(0, document.body.scrollHeight);
const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment; }
if (replyCount > 0 && nestedComments.length > 0) { function renderComments(comments) {
const commentKeys = Object.keys(comments);
const renderedComments = commentKeys.map(key => {
const comment = comments[key];
const { replies: { pages: { topAll: { comments: nestedComments } } } } = comment;
if (comment.replyCount > 0 && nestedComments) {
const renderedNestedComments = renderComments(nestedComments); const renderedNestedComments = renderComments(nestedComments);
return [comment, ...renderedNestedComments]; return [comment, ...renderedNestedComments];
} }
return [comment]; return [comment];
}).flat(); }).flat();
return renderedComments;
} }
return ( return (
<Container> <Container>
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
@@ -227,6 +233,16 @@ const Thread = ({ setBodyStyle }) => {
<Link to={`/${selectedAddress}`}>Return</Link> <Link to={`/${selectedAddress}`}>Return</Link>
] ]
</span> </span>
<span className="return-button catalog-button">
[
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
]
</span>
<span className="return-button catalog-button">
[
<a href={handleVoidClick} onClick={handleClickBottom} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Bottom</a>
]
</span>
{comment ? ( {comment ? (
comment.replyCount > 0 ? ( comment.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} replies</span> <span className="reply-stat">{comment.replyCount} replies</span>
@@ -282,85 +298,75 @@ const Thread = ({ setBodyStyle }) => {
</div> </div>
</div> </div>
</div> </div>
<BottomBar selectedStyle={selectedStyle}> {comment.replyCount > 0 &&
<hr /> Object.keys(comment.replies.pages.topAll.comments).map(() => {
<span className="bottom-bar-return"> const renderedComments = renderComments(comment.replies.pages.topAll.comments);
[ return renderedComments.map(reply => {
<Link to={`/${selectedAddress}`}>Return</Link>
]
</span>
<span className="bottom-bar-catalog">
[
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
]
</span>
<span className="bottom-bar-top">
[
<a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'}>Top</a>
]
</span>
<span className="quickreply-button">
[
<a href={handleVoidClick} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
]
</span>
{comment.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} replies</span>
) : (
<span className="reply-stat">No replies yet</span>
)}
<hr />
</BottomBar>
<>
</>
{/* {comment ? (
comment.map(thread => {
let counter = 1; let counter = 1;
const { replies: { pages: { topAll: { comments } } } } = thread; counter++;
const renderedComments = renderComments(comments); const counterString = counter.toString().padStart(8, '0');
return ( return (
<> <div key={`pc-${reply.cid}`} className="post-container reply-container">
{renderedComments.map(reply => { <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
counter++; <div key={`pr-${reply.cid}`} className="post-reply">
const counterString = counter.toString().padStart(8, '0'); <div key={`pi-${reply.cid}`} className="post-info">
return ( &nbsp;
<div key={`pc-${reply.cid}`} className="post-container reply-container"> <span key={`nb-${reply.cid}`} className="nameblock">
<div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div> <span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span>
<div key={`pr-${reply.cid}`} className="post-reply">
<div key={`pi-${reply.cid}`} className="post-info">
&nbsp; &nbsp;
<span key={`nb-${reply.cid}`} className="nameblock"> <span key={`pa-${reply.cid}`} className="poster-address">
<span key={`n-${reply.cid}`} className="name">{reply.author.displayName || "Anonymous"}</span> (User: {reply.author.address})
&nbsp; </span>
<span key={`pa-${reply.cid}`} className="poster-address"> </span>
(User: {reply.author.address}) &nbsp;
</span> <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span>
</span> &nbsp;
&nbsp; <span key={`pn-${reply.cid}`} className="post-number">
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">2 weeks ago</span> <a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
&nbsp; <a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
<span key={`pn-${reply.cid}`} className="post-number"> </span>
<a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a> <a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
<a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{counterString}</a>
</span>
<a key={`pmb-${reply.cid}`} className="post-menu-button" href={handleVoidClick} title="Post menu" data-cmd="post-menu">▶</a>
</div>
<blockquote key={`pm-${reply.cid}`} className="post-message">
<a className="quotelink" href={handleVoidClick}>
{`>>${counterString}`}{<br />}
</a>
{reply.content}
</blockquote>
</div>
</div> </div>
) <blockquote key={`pm-${reply.cid}`} className="post-message">
})} <a className="quotelink" href={handleVoidClick}>
</> {`>>${counterString}`}{<br />}
</a>
{reply.content}
</blockquote>
</div>
</div>
) )
}) })
) : ( })}
<div>Loading...</div> <BottomBar selectedStyle={selectedStyle}>
)} */} <hr />
<span className="bottom-bar-return">
[
<Link to={`/${selectedAddress}`}>Return</Link>
]
</span>
<span className="bottom-bar-catalog">
[
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
]
</span>
<span className="bottom-bar-top">
[
<a href={handleVoidClick} onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a>
]
</span>
<span className="quickreply-button">
[
<a href={handleVoidClick} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</a>
]
</span>
{comment.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} replies</span>
) : (
<span className="reply-stat">No replies yet</span>
)}
<hr />
</BottomBar>
</div> </div>
</> </>
) : ( ) : (
src/components/styles/Thread.styled.jsx
+6
View File
@@ -482,6 +482,10 @@ export const TopBar = styled.div`
margin-top: 4px; margin-top: 4px;
} }
.catalog-button {
margin-left: 3px !important;
}
${({ selectedStyle }) => { ${({ selectedStyle }) => {
switch (selectedStyle) { switch (selectedStyle) {
case 'Yotsuba': case 'Yotsuba':
@@ -554,6 +558,7 @@ export const TopBar = styled.div`
a, a:visited { a, a:visited {
color: #00e !important; color: #00e !important;
text-decoration: underline;
} }
a:hover { a:hover {
@@ -584,6 +589,7 @@ export const TopBar = styled.div`
a, a:visited { a, a:visited {
color: #34345c !important; color: #34345c !important;
text-decoration: underline;
} }
a:hover { a:hover {