added thread replies

src/components/Thread.jsx

@@ -119,19 +119,25 @@ const Thread = ({ setBodyStyle }) => {
     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);
         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}>
+              {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;
-                  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

@@ -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 {