DogGallery.tsx

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