basic displaying of comments

mrkyns · Apr 22, 2023 · 82d6c9b · 82d6c9b
1 parent 4657823
commit 82d6c9b
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 42 deletions.
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?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,7 @@ export default function Article({
   id,
   setHits,
   query,
+  setObjectID,
 }) {
   const [displayedPoints, setDisplayedPoints] = useState(points);
   const [arePointsIncreased, setArePointsIncreased] = useState(false);
@@ -68,6 +69,8 @@ export default function Article({
 
   const urlText = url?.split("/")[2];
 
+  const handleFetchComments = () => setObjectID(id);
+
   return (
     <li className="Article__wrapper">
       <span className="Article__num">{articleNum}.</span>
@@ -104,7 +107,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)"
@@ -56,6 +60,9 @@ export default function Body({
             itemsPerPage={20}
             hits={hits}
             query={query}
+            setObjectID={setObjectID}
+            objectID={objectID}
+            fetchedComments={fetchedComments}
           />
         </div>
       )}

diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
@@ -0,0 +1,8 @@
+export default function Comments({ author, text }) {
+  return (
+    <div>
+      <h3>{author}</h3>
+      <p>{text}</p>
+    </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")}>

diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import ReactPaginate from "react-paginate";
 import Article from "./Article";
 import NoResult from "./NoResult";
+import Comments from "./Comments";
 
 const hits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
 
@@ -18,8 +19,16 @@ function Items({ currentItems }) {
   );
 }
 
-export default function Pagination({ itemsPerPage, hits, setHits, query }) {
-  const items = hits;
+export default function Pagination({
+  itemsPerPage,
+  hits,
+  setHits,
+  query,
+  setObjectID,
+  objectID,
+  fetchedComments,
+}) {
+  const items = objectID !== "" ? fetchedComments.hits : hits;
 
   function Items({ currentItems }) {
     return (
@@ -41,8 +50,8 @@ export default function Pagination({ itemsPerPage, hits, setHits, query }) {
   // (This could be items from props; or items loaded in a local state
   // from an API endpoint with useEffect and useState)
   const endOffset = itemOffset + itemsPerPage;
-  const currentItems = items.slice(itemOffset, endOffset);
-  const pageCount = Math.ceil(items.length / itemsPerPage);
+  const currentItems = items?.slice(itemOffset, endOffset);
+  const pageCount = Math.ceil(items?.length / itemsPerPage);
 
   // Invoke when user click to request another page.
   const handlePageClick = (event) => {
@@ -54,38 +63,54 @@ export default function Pagination({ itemsPerPage, hits, setHits, query }) {
     // console.log(items);
   };
 
-  if (items.length) {
-    return (
-      <>
-        {/* <Items currentItems={currentItems} /> */}
-        <ol>
-          {currentItems.map((item, index) => (
-            <Article
-              articleNum={itemOffset + index + 1}
-              title={item.title}
-              url={item.url}
-              points={item.points}
-              author={item.author}
-              time={Date.parse(item.created_at)}
-              comments={item.num_comments}
-              key={item.objectID}
-              id={item.objectID}
-              setHits={setHits}
-              query={query}
-            />
+  const handleBack = () => {
+    setObjectID("");
+  };
+
+  if (items?.length > 0) {
+    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} />
           ))}
-        </ol>
-        <ReactPaginate
-          breakLabel="..."
-          nextLabel="next"
-          onPageChange={handlePageClick}
-          pageRangeDisplayed={5}
-          pageCount={pageCount}
-          previousLabel="previous"
-          renderOnZeroPageCount={null}
-        />
-      </>
-    );
+        </>
+      );
+    } else {
+      return (
+        <>
+          <ol>
+            {currentItems.map((item, index) => (
+              <Article
+                articleNum={itemOffset + index + 1}
+                title={item.title}
+                url={item.url}
+                points={item.points}
+                author={item.author}
+                time={Date.parse(item.created_at)}
+                comments={item.num_comments}
+                key={item.objectID}
+                id={item.objectID}
+                setHits={setHits}
+                query={query}
+                setObjectID={setObjectID}
+              />
+            ))}
+          </ol>
+          <ReactPaginate
+            breakLabel="..."
+            nextLabel="next"
+            onPageChange={handlePageClick}
+            pageRangeDisplayed={5}
+            pageCount={pageCount}
+            previousLabel="previous"
+            renderOnZeroPageCount={null}
+          />
+        </>
+      );
+    }
   } else {
     return <NoResult />;
   }

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function Search({ setQuery, setLoading }) {
+export default function Search({ setQuery, setLoading, setObjectID }) {
   const [inputText, setInputText] = useState("");
 
   let inputHandler = (e) => {
@@ -15,6 +15,7 @@ export default function Search({ setQuery, setLoading }) {
     e.preventDefault();
     setLoading(true);
     setQuery(inputText);
+    setObjectID("");
     setInputText("");
   };