useFetcher Hook

useFetcher.ts

import React, { useState, useEffect } from 'react'
// fetchOptionsGenerator is a bespoke header generator for our use case
import fetchOptionsGenerator from "./fetchOptionsGenerator"

/**
 * Data fetching hook which takes a route url as a string
 * and returns data from the backend for that route, along with a loading and error variable
 * @param route: string
 */

const useFetcher = (route: string) => {

  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  const headerOptions = { tenantId: (window as any).tenantId || null }

  useEffect(() => {
    let didCancel = false;
    (async function() {
      try {
        const params = fetchOptionsGenerator(headerOptions)
        const response = await fetch(route, params)
        const data = await response.json()
        if (!didCancel) {
          setLoading(false)
          setData(data)
        }
      } catch (e) {
        if (!didCancel) {
          console.log("there was a problem with useFetch", e)
          setError(e)
          setLoading(false)
        }
      }
    })()

    return () => {
      didCancel = true
    }
  }, [route])

  return { data, loading, error }
}

export default useFetcher