useBrowsers.ts

import {useEffect, useState} from 'react'
import {Browser, BrowsersListProps} from '../components/BrowsersList'

export function useBrowsers(url: string): BrowsersListProps {
  const [loading, setLoading] = useState(false)
  const [browsers, setBrowsers] = useState<Browser[]>([])
  const [selectedBrowser, setSelectedBrowser] = useState<Browser | undefined>(
    undefined,
  )

  useEffect(() => {
    setLoading(true)
    fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.Browsers
      })
      .then((browsers) => {
        setBrowsers(browsers)
      })
      .catch((error) => {
        console.log(error)
      })
      .finally(() => setLoading(false))
  }, [url])

  return {
    loading,
    browsers,
    selectedBrowser,
    setSelectedBrowser,
  }
}