import { useState, useEffect } from 'react'

export const useFetch = (url) => {
    const [data, setData] = useState(null)
    const [isPending, setIsPending] = useState(false)
    const [error, setError] = useState(null)

    useEffect(() => {
        const controller = new AbortController()

        const fetchData = async () => {

            try {
                setIsPending(true)
                setData(null)
                const res = await fetch(url, { signal: controller.signal })
                if (!res.ok) throw new Error(res.statusText)
                const json = await res.json()
                setIsPending(false)
                setData(json)
                setError(null)
            } catch(err) {
                if (err.name === "AbortError") {
                    console.log("fetch was aborted")
                } else {
                    setIsPending(false)
                    setError('Could not fetch the data')
                }
            }

        }

        fetchData()

        return () => {
            controller.abort()
        }

    }, [url])
    console.log(data)
    return { data, isPending, error }
}

export default useFetch