Created
March 9, 2023 23:09
-
-
Save timurcatakli/0b250053941192b8cebbe54aaf82f289 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useRef, useState } from "react"; | |
import { useFetch } from "./hooks/useFetch"; | |
import { useIsInViewPort } from "./hooks/useIsInViewPort"; | |
type BreedListType = { | |
breed: string; | |
image: string; | |
}; | |
export const DogGallery = () => { | |
const loadMoreRef = useRef<HTMLDivElement>(null); | |
const isVisible = useIsInViewPort(loadMoreRef); | |
const [breeds, setBreeds] = useState<string[]>([]); | |
const [breedList, setBreedList] = useState<BreedListType[]>([]); | |
// const breedQuery = useFetch(); | |
const fetchBreeds = async () => { | |
const response = await fetch("https://dog.ceo/api/breeds/list/all"); | |
const data = await response.json(); | |
setBreeds(Object.keys(data.message)); | |
}; | |
const fetchBreed = async (breedName: string) => { | |
const response = await fetch(`https://dog.ceo/api/breed/${breedName}/images/random`); | |
const data = await response.json(); | |
const payload = { | |
breed: breedName, | |
image: data.message, | |
}; | |
setBreedList((prev) => [...prev, payload]); | |
}; | |
useEffect(() => { | |
fetchBreeds(); | |
}, []); | |
useEffect(() => { | |
if (breeds.length > 0) { | |
for (let i = 0; i < breeds.length; i++) { | |
fetchBreed(breeds[i]); | |
} | |
} | |
}, [breeds]); | |
console.log(breedList); | |
return ( | |
<div className="grid--container"> | |
{breedList.map((dog) => ( | |
<div key={dog.breed + dog.image} className="breed--cell"> | |
<img alt={dog.breed} src={dog.image} className="breed-image" /> | |
</div> | |
))} | |
<div ref={loadMoreRef} /> | |
</div> | |
); | |
}; | |
// get list of all breeds | |
// add breed list to state | |
// check if breeed list is fetched | |
// when fetch is done, traverse state and fetch |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment