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
+54 -48
View File
@@ -119,19 +119,25 @@ const Thread = ({ setBodyStyle }) => {
window.scrollTo(0, 0);
}
function renderComments(comments) {
return comments.map(comment => {
const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment;
const handleClickBottom = () => {
window.scrollTo(0, document.body.scrollHeight);
}
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);
return [comment, ...renderedNestedComments];
}
return [comment];
}).flat();
return renderedComments;
}
return (
<Container>
<NavBar selectedStyle={selectedStyle}>
@@ -227,6 +233,16 @@ const Thread = ({ setBodyStyle }) => {
<Link to={`/${selectedAddress}`}>Return</Link>
]
</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.replyCount > 0 ? (
<span className="reply-stat">{comment.replyCount} replies</span>
@@ -282,45 +298,11 @@ const Thread = ({ setBodyStyle }) => {
</div>
</div>
</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'}>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 => {
{comment.replyCount > 0 &&
Object.keys(comment.replies.pages.topAll.comments).map(() => {
const renderedComments = renderComments(comment.replies.pages.topAll.comments);
return renderedComments.map(reply => {
let counter = 1;
const { replies: { pages: { topAll: { comments } } } } = thread;
const renderedComments = renderComments(comments);
return (
<>
{renderedComments.map(reply => {
counter++;
const counterString = counter.toString().padStart(8, '0');
return (
@@ -354,13 +336,37 @@ const Thread = ({ setBodyStyle }) => {
</div>
</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>
) : (
<div>Loading...</div>
)} */}
<span className="reply-stat">No replies yet</span>
)}
<hr />
</BottomBar>
</div>
</>
) : (
src/components/styles/Thread.styled.jsx
+6
View File
@@ -482,6 +482,10 @@ export const TopBar = styled.div`
margin-top: 4px;
}
.catalog-button {
margin-left: 3px !important;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
@@ -554,6 +558,7 @@ export const TopBar = styled.div`
a, a:visited {
color: #00e !important;
text-decoration: underline;
}
a:hover {
@@ -584,6 +589,7 @@ export const TopBar = styled.div`
a, a:visited {
color: #34345c !important;
text-decoration: underline;
}
a:hover {