updated renderComments to shorten replies section

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 (
     <Container>
       <NavBar selectedStyle={selectedStyle}>
@@ -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 (
             <>
               <div key={`t-${thread.cid}`} className="thread">

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;