useAPI

gistfile1.jsx

import React, { useState, useEffect } from 'react'

const defaualtAPIConfig = config => {
  return Object.assign(
    {
      method: 'POST',
      mode: 'same-origin',
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json'
      },
      redirect: 'follow',
      referrerPolicy: 'same-origin',
      body: JSON.stringify({})
    },
    config
  )
}

export default function useAPI(url, method, body) {
  const [response, setResponse] = useState(null)
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true)

      try {
        const res = await fetch(
          url,
          defaualtAPIConfig({ method, body: JSON.stringify(body) })
        )
        const json = await res.json()

        setResponse(json)
        setError(null)
        setLoading(false)
      } catch (error) {
        setResponse(null)
        setError(error)
        setLoading(false)
      }
    }

    fetchData()
  }, [url, method, body])

  return { response, error, loading }
}