From 82d6c9bb2daad41c25e614f7d0339c58e43a31b9 Mon Sep 17 00:00:00 2001 From: Stephan Ullmann Date: Sat, 22 Apr 2023 09:14:07 +0200 Subject: [PATCH] basic displaying of comments --- src/App.jsx | 23 ++++++++- src/components/Article.jsx | 8 ++- src/components/Body.jsx | 7 +++ src/components/Comments.jsx | 8 +++ src/components/Header.jsx | 11 ++-- src/components/Pagination.jsx | 95 ++++++++++++++++++++++------------- src/components/Search.jsx | 3 +- 7 files changed, 113 insertions(+), 42 deletions(-) create mode 100644 src/components/Comments.jsx diff --git a/src/App.jsx b/src/App.jsx index a24f99a..14b1700 100644 --- 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 (
diff --git a/src/components/Article.jsx b/src/components/Article.jsx index 12f3441..08455a2 100644 --- 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 (
  • {articleNum}. @@ -104,7 +107,10 @@ export default function Article({ hide {" "} - | {comments} Comments + |{" "} + + {comments} Comments +

    • +

    {fetchedComments.hits[0].story_title}

    + {fetchedComments.hits.map((comment) => ( + ))} - - - - ); + + ); + } else { + return ( + <> +
      + {currentItems.map((item, index) => ( +
      + ))} +
    + + + ); + } } else { return ; } diff --git a/src/components/Search.jsx b/src/components/Search.jsx index 9050155..e3b7338 100644 --- 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(""); };