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 (
+

{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(""); };