Merge pull request #33 from mrkyns/feature/comments

Feature/comments
mrkyns · Apr 23, 2023 · 2f4429a · 2f4429a
2 parents 4657823 + f4741fb
commit 2f4429a
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/App.css b/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: fixed;
+  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);
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,19 +7,21 @@ import Reagan from "./components/Reagan";
 
 function App() {
   const [fetchedData, setFetchedData] = useState([]);
+  const [fetchedComments, setFetchedComments] = useState([]);
   const [query, setQuery] = useState("");
+  const [objectID, setObjectID] = useState("");
   const [hitsPerPage, setHitsPerPage] = useState(1000);
   const [pageNum, setPageNum] = useState(0);
   const [isLoadingFront, setIsLoadingFront] = useState(true);
   const [loading, setLoading] = useState(true);
   const [sortBy, setSortBy] = useState("");
 
-  const fetchData = async function (url) {
+  const fetchData = async function (url, loadingData = true) {
     try {
       const res = await fetch(url);
       const data = await res.json();
       setLoading(false);
-      setFetchedData(data);
+      loadingData ? setFetchedData(data) : setFetchedComments(data);
     } catch (err) {
       console.error(err);
     }
@@ -37,6 +39,13 @@ function App() {
     );
   };
 
+  const fetchComments = (objectID) => {
+    fetchData(
+      `http://hn.algolia.com/api/v1/search?hitsPerPage=1000&tags=comment,story_${objectID}`,
+      false
+    );
+  };
+
   useEffect(() => {
     if (isLoadingFront) return;
     if (query) fetchByQuery(query, hitsPerPage, pageNum);
@@ -49,12 +58,19 @@ function App() {
     setIsLoadingFront(false);
   }, [isLoadingFront]);
 
+  // fetch Comments
+  useEffect(() => {
+    if (isLoadingFront) return;
+    fetchComments(objectID);
+  }, [objectID]);
+
   return (
     <div className="App">
       <Header
         setIsLoadingFront={setIsLoadingFront}
         fetchedData={fetchedData}
         setSortBy={setSortBy}
+        setObjectID={setObjectID}
       />
 
       <Body
@@ -68,6 +84,9 @@ function App() {
         filterBy={sortBy}
         query={query}
         setLoading={setLoading}
+        setObjectID={setObjectID}
+        objectID={objectID}
+        fetchedComments={fetchedComments}
       />
       <Footer />
       <Reagan />

diff --git a/src/components/Article.jsx b/src/components/Article.jsx
@@ -12,6 +12,8 @@ export default function Article({
   id,
   setHits,
   query,
+  setObjectID,
+  setLoading,
 }) {
   const [displayedPoints, setDisplayedPoints] = useState(points);
   const [arePointsIncreased, setArePointsIncreased] = useState(false);
@@ -68,6 +70,11 @@ export default function Article({
 
   const urlText = url?.split("/")[2];
 
+  const handleFetchComments = () => {
+    setObjectID(id);
+    setLoading(true);
+  };
+
   return (
     <li className="Article__wrapper">
       <span className="Article__num">{articleNum}.</span>
@@ -104,7 +111,10 @@ export default function Article({
           <span className="Article__hide" onClick={hide}>
             hide
           </span>{" "}
-          | <span>{comments}</span> Comments
+          |{" "}
+          <span className="Article__hide" onClick={handleFetchComments}>
+            {comments} Comments
+          </span>
         </p>
       </div>
       <button className="Article__btn-up" onClick={increasePoints}>

diff --git a/src/components/Body.jsx b/src/components/Body.jsx
@@ -10,6 +10,9 @@ export default function Body({
   query,
   sortBy,
   setLoading,
+  fetchedComments,
+  setObjectID,
+  objectID,
 }) {
   const [hits, setHits] = useState([]);
 
@@ -41,6 +44,7 @@ export default function Body({
         fetchedData={fetchedData}
         setQuery={setQuery}
         setLoading={setLoading}
+        setObjectID={setObjectID}
       />
       <ClimbingBoxLoader
         color="var(--accent)"
@@ -53,9 +57,13 @@ export default function Body({
         <div className="pagination">
           <Pagination
             setHits={setHits}
-            itemsPerPage={20}
+            itemsPerPage={objectID ? 6 : 20}
             hits={hits}
             query={query}
+            setObjectID={setObjectID}
+            objectID={objectID}
+            fetchedComments={fetchedComments}
+            setLoading={setLoading}
           />
         </div>
       )}

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
@@ -0,0 +1,13 @@
+import { Parser } from "html-to-react";
+
+export default function Comments({ author, text }) {
+  const parser = new Parser();
+  return (
+    <div className="Article__wrapper Comment">
+      <h3>
+        by <span className="Article__title">{author}</span>
+      </h3>
+      {parser.parse(text)}
+    </div>
+  );
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,9 +1,14 @@
-export default function Header({ setIsLoadingFront, setSortBy }) {
+export default function Header({ setIsLoadingFront, setSortBy, setObjectID }) {
+  const handleFrontLoad = () => {
+    setIsLoadingFront(true);
+    setObjectID("");
+  };
+
   return (
     <div className="Header">
       <div className="navigation">
         <svg
-          onClick={() => setIsLoadingFront(true)}
+          onClick={handleFrontLoad}
           version="1.1"
           id="Layer_1"
           xmlns="http://www.w3.org/2000/svg"
@@ -19,7 +24,7 @@ export default function Header({ setIsLoadingFront, setSortBy }) {
           </g>
         </svg>
         <nav>
-          <span onClick={() => setIsLoadingFront(true)}>Hacker News</span>
+          <span onClick={handleFrontLoad}>Hacker News</span>
           <ul>
             <li>
               <a href="#" onClick={() => setSortBy("created_at_i")}>