import { useState, useEffect } from "react";

export const render = result => match =>
  result.pending ? match.pending()
  : result.error ? match.error(result.error)
  : result.data  ? match.data(result.data)
  : null // prettier-ignore

export const useMatchFetch = url => {
  const [result, setResult] = useState({ pending: true, initial: true });
  const [fetchId, setFetchId] = useState(false)

  useEffect(() => {
    setResult({...result, pending: true})
    fetch(url)
      .then(response => response.json())
      .then(data => setResult({ data, pending: false, initial: false }))
      .catch(error => setResult({ error, pending: false, initial: false }));
  }, [url, fetchId]);

  const refetch = () => setFetchId(!fetchId)

  return [result, refetch]
};