parsing html in comments

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "html-to-react": "^1.5.1",
     "javascript-time-ago": "^2.5.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.css

@@ -515,3 +515,49 @@ nav ul li a:hover {
 .Footer-list ul li a:hover {
   color: var(--accent);
 }
+
+.Comment {
+  flex-direction: column;
+  padding: 1.5rem;
+  max-width: 800px;
+  align-items: start;
+  color: var(--text);
+}
+
+/* .Comment * { */
+/* } */
+
+.Comment a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.Comment a:hover {
+  color: var(--accent_light);
+  text-decoration: underline;
+}
+
+.Comment__title {
+  color: var(--accent);
+  margin-top: 1.5rem;
+}
+
+.btn--back {
+  position: absolute;
+  top: 5.5rem;
+  left: 3rem;
+  border: 2px solid var(--accent_border);
+  padding: 0.5rem 2rem;
+  border-radius: 1rem;
+  cursor: pointer;
+  color: var(--text);
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.btn--back:hover {
+  background: var(--accent_light);
+  color: var(--text_light);
+  border: 3px solid var(--text_light);
+}

src/App.jsx

@@ -41,7 +41,7 @@ function App() {
 
   const fetchComments = (objectID) => {
     fetchData(
-      `http://hn.algolia.com/api/v1/search?tags=comment,story_${objectID}`,
+      `http://hn.algolia.com/api/v1/search?hitsPerPage=1000&tags=comment,story_${objectID}`,
       false
     );
   };

src/components/Article.jsx

@@ -13,6 +13,7 @@ export default function Article({
   setHits,
   query,
   setObjectID,
+  setLoading,
 }) {
   const [displayedPoints, setDisplayedPoints] = useState(points);
   const [arePointsIncreased, setArePointsIncreased] = useState(false);
@@ -69,7 +70,10 @@ export default function Article({
 
   const urlText = url?.split("/")[2];
 
-  const handleFetchComments = () => setObjectID(id);
+  const handleFetchComments = () => {
+    setObjectID(id);
+    setLoading(true);
+  };
 
   return (
     <li className="Article__wrapper">

src/components/Body.jsx

@@ -63,6 +63,7 @@ export default function Body({
             setObjectID={setObjectID}
             objectID={objectID}
             fetchedComments={fetchedComments}
+            setLoading={setLoading}
           />
         </div>
       )}

src/components/Comments.jsx

@@ -1,8 +1,13 @@
+import { Parser } from "html-to-react";
+
 export default function Comments({ author, text }) {
+  const parser = new Parser();
   return (
-    <div>
-      <h3>{author}</h3>
-      <p>{text}</p>
+    <div className="Article__wrapper Comment">
+      <h3>
+        by <span className="Article__title">{author}</span>
+      </h3>
+      {parser.parse(text)}
     </div>
   );
 }

src/components/Pagination.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import ReactPaginate from "react-paginate";
 import Article from "./Article";
 import NoResult from "./NoResult";
@@ -27,6 +27,7 @@ export default function Pagination({
   setObjectID,
   objectID,
   fetchedComments,
+  setLoading,
 }) {
   const items = objectID !== "" ? fetchedComments.hits : hits;
 
@@ -71,11 +72,28 @@ export default function Pagination({
     if (objectID) {
       return (
         <>
-          <button onClick={handleBack}>Back</button>
-          <h2>{fetchedComments.hits[0].story_title}</h2>
-          {fetchedComments.hits.map((comment) => (
-            <Comments author={comment.author} text={comment.comment_text} />
+          <button className="btn--back" onClick={handleBack}>
+            Back
+          </button>
+          <h2 className="Comment__title">
+            {fetchedComments.hits[0].story_title}
+          </h2>
+          {currentItems.map((comment, index) => (
+            <Comments
+              author={comment.author}
+              text={comment.comment_text}
+              key={comment.author + index}
+            />
           ))}
+          <ReactPaginate
+            breakLabel="..."
+            nextLabel="next"
+            onPageChange={handlePageClick}
+            pageRangeDisplayed={5}
+            pageCount={pageCount}
+            previousLabel="previous"
+            renderOnZeroPageCount={null}
+          />
         </>
       );
     } else {
@@ -91,11 +109,12 @@ export default function Pagination({
                 author={item.author}
                 time={Date.parse(item.created_at)}
                 comments={item.num_comments}
-                key={item.objectID}
+                key={item.created_at_i}
                 id={item.objectID}
                 setHits={setHits}
                 query={query}
                 setObjectID={setObjectID}
+                setLoading={setLoading}
               />
             ))}
           </ol>