flattened nested replies, added quotelinks

src/components/Board.jsx

@@ -211,6 +211,20 @@ 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, comment.cid);
+        return [comment, ...renderedNestedComments];
+      }
+  
+      return [comment];
+    }).flat();
+  }
+  
+
   return (
     <Container>
       <NavBar selectedStyle={selectedStyle}>
@@ -317,6 +331,7 @@ const Board = ({ setBodyStyle }) => {
             let counter = 1;
             const thread = object;
             const { replies: { pages: { topAll: { comments } } } } = object;
+            const renderedComments = renderComments(comments, thread.cid);
             return (
             <>
             <div key={`t-${thread.cid}`} className="thread">
@@ -365,8 +380,9 @@ const Board = ({ setBodyStyle }) => {
                   </div>
                 </div>
               </div>
-              {comments.map(reply => {
+              {renderedComments.map(reply => {
                 counter++;
+                const counterString = counter.toString().padStart(8, '0');
                 return (
               <div key={`pc-${reply.cid}`} className="post-container reply-container">
                 <div key={`sa-${reply.cid}`} className="side-arrows">{'>>'}</div>
@@ -385,11 +401,14 @@ const Board = ({ setBodyStyle }) => {
                     &nbsp;
                     <span key={`pn-${reply.cid}`} className="post-number">
                       <a key={`pl1-${reply.cid}`} href={handleVoidClick} title="Link to this post">No.</a>
-                      <a key={`pl2-${reply.cid}`} href={handleVoidClick} title="Reply to this post">{`0000000${counter}`}</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 class="quotelink" href={handleVoidClick}>
+                      {`>>${counterString}`}{counterString !== '' && <br />}
+                    </a>
                     {reply.content}
                   </blockquote>
                 </div>

src/components/styles/Board.styled.jsx

@@ -1174,6 +1174,7 @@ export const BoardForm = styled.div`
 
       blockquote {
         display: block;
+        line-height: 1.3em;
       }
 
       .title {
@@ -1186,6 +1187,16 @@ export const BoardForm = styled.div`
         color: #789922;
       }
 
+      .quotelink {
+        color: navy;
+        text-decoration: underline;
+        font-family: arial;
+      }
+
+      .quotelink:hover {
+        color: red;
+      }
+
       .side-arrows {
         color: #e0bfb7;
         float: left;
@@ -1309,6 +1320,7 @@ export const BoardForm = styled.div`
 
       blockquote {
         display: block;
+        line-height: 1.3em;
       }
 
       .title {
@@ -1320,6 +1332,12 @@ export const BoardForm = styled.div`
         content: '>';
         color: #789922;
       }
+      
+      .quotelink {
+        color: #d00;
+        text-decoration: underline;
+        font-family: arial;
+      }
 
       .side-arrows {
         color: #b7c5d9;
@@ -1452,6 +1470,7 @@ export const BoardForm = styled.div`
 
       blockquote {
         display: block;
+        line-height: 1.3em;
       }
 
       .title {
@@ -1464,6 +1483,15 @@ export const BoardForm = styled.div`
         color: #789922;
       }
 
+      .quotelink {
+        color: navy;
+        text-decoration: underline;
+      }
+
+      .quotelink:hover {
+        color: red;
+      }
+
       .side-arrows {
         float: left;
         margin-right: 2px;
@@ -1579,24 +1607,21 @@ export const BoardForm = styled.div`
       }
 
       .quote-link {
-        color: navy;
+        color: #d00;
         text-decoration: underline;
       }
 
-      .quote-link:hover {
-        color: red;
-      }
-
       .backlink span {
         padding: 0;
       }
 
       blockquote {
         display: block;
+        line-height: 1.3em;
       }
 
       .title {
-        color: #0f0c5d;
+        color: #cc1105;
         font-weight: 700;
       }
 
@@ -1605,6 +1630,11 @@ export const BoardForm = styled.div`
         color: #789922;
       }
 
+      .quotelink {
+        color: #d00;
+        text-decoration: underline;
+      }
+
       .side-arrows {
         float: left;
         margin-right: 2px;
@@ -1719,7 +1749,7 @@ export const BoardForm = styled.div`
       }
 
       .quote-link:hover {
-        color: red;
+        color: #81a2be;
       }
 
       .backlink span {
@@ -1728,6 +1758,7 @@ export const BoardForm = styled.div`
 
       blockquote {
         display: block;
+        line-height: 1.3em;
       }
 
       .title {
@@ -1740,6 +1771,16 @@ export const BoardForm = styled.div`
         color: #789922;
       }
 
+      .quotelink {
+        color: #5f89ac;
+        text-decoration: underline;
+        font-family: arial;
+      }
+
+      .quotelink:hover {
+        color: #81a2be;
+      }
+
       .side-arrows {
         color: #c5c8c6;
         float: left;
@@ -1849,7 +1890,7 @@ export const BoardForm = styled.div`
       }
 
       .quote-link {
-        color: #34345C;
+        color: #f60;
         text-decoration: underline;
       }
 
@@ -1863,6 +1904,7 @@ export const BoardForm = styled.div`
 
       blockquote {
         display: block;
+        line-height: 1.3em;
       }
 
       .title {
@@ -1875,6 +1917,16 @@ export const BoardForm = styled.div`
         color: #789922;
       }
 
+      .quotelink {
+        color: #f60;
+        text-decoration: underline;
+        font-family: arial;
+      }
+
+      .quotelink:hover {
+        color: red;
+      }
+
       .side-arrows {
         color: #333;
         float: left;