diff --git a/src/components/Board.jsx b/src/components/Board.jsx index 5562ef80..6d75bcc2 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -7,6 +7,7 @@ import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; import getDate from '../utils/getDate'; +import renderComments from '../utils/renderComments'; const Board = ({ setBodyStyle }) => { @@ -292,21 +293,6 @@ const Board = ({ setBodyStyle }) => { - function renderComments(comments) { - return comments.map(comment => { - const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment; - - if (replyCount > 0 && nestedComments.length > 0) { - const renderedNestedComments = renderComments(nestedComments); - return [comment, ...renderedNestedComments]; - } - - return [comment]; - }).flat(); - } - - - return ( @@ -452,7 +438,7 @@ const Board = ({ setBodyStyle }) => { > {renderedFeed.map(thread => { const { replies: { pages: { topAll: { comments } } } } = thread; - const renderedComments = renderComments(comments); + const { renderedComments, omittedCount } = renderComments(comments); return ( <>
diff --git a/src/utils/renderComments.js b/src/utils/renderComments.js new file mode 100644 index 00000000..bef1cce6 --- /dev/null +++ b/src/utils/renderComments.js @@ -0,0 +1,29 @@ +function renderComments(comments) { + let displayedCount = 0; + let omittedCount = 0; + + const renderComment = (comment) => { + const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment; + let renderedNestedComments = []; + + if (replyCount > 0 && nestedComments.length > 0) { + const result = renderComments(nestedComments); + renderedNestedComments = result.renderedComments; + omittedCount += result.omittedCount; + } + + const allComments = [comment, ...renderedNestedComments]; + const displayedComments = allComments.slice(0, 5 - displayedCount); + + displayedCount += displayedComments.length; + omittedCount += allComments.length - displayedComments.length; + + return displayedComments; + }; + + const renderedComments = comments.flatMap(renderComment); + + return { renderedComments, omittedCount }; +} + +export default renderComments; \ No newline at end of file