useAxios.js

useAxios.js

/**
 * This is the highest level hook for making HTTP requests. It's just a wrapper for basic HTTP requests.
 */
function useAxios() {
  const [isLoading, setIsLoading] = React.useState(false);
  const { getAccessTokenSilently } = useAuth0();

  axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;

  const getRequest = async (url) => {
    setIsLoading(true);
    const token = await getAccessTokenSilently();
    return axios
      .get(url, { headers: { Authorization: `Bearer ${token}` } })
      .then((res) => res.data)
      .finally(() => setIsLoading(false));
  };

  const postRequest = async (url, data) => {
    setIsLoading(true);
    const token = await getAccessTokenSilently();
    return axios
      .post(url, data, { headers: { Authorization: `Bearer ${token}` } })
      .then((res) => res.data)
      .finally(() => setIsLoading(false));
  };

  const putRequest = async (url, data) => {
    setIsLoading(true);
    const token = await getAccessTokenSilently();
    return axios
      .put(url, data, { headers: { Authorization: `Bearer ${token}` } })
      .then((res) => res.data)
      .finally(() => setIsLoading(false));
  };

  const patchRequest = async (url, data) => {
    setIsLoading(true);
    const token = await getAccessTokenSilently();
    return axios
      .patch(url, data, { headers: { Authorization: `Bearer ${token}` } })
      .then((res) => res.data)
      .finally(() => setIsLoading(false));
  };

  const deleteRequest = async (url, data) => {
    setIsLoading(true);
    const token = await getAccessTokenSilently();
    return axios
      .delete(url, { data, headers: { Authorization: `Bearer ${token}` } })
      .then((res) => res.data)
      .finally(() => setIsLoading(false));
  };

  const getFileRequest = async (url) => {
    setIsLoading(true);
    const token = await getAccessTokenSilently();
    return axios
      .get(url, { headers: { Authorization: `Bearer ${token}` }, responseType: 'arraybuffer' })
      .then((res) => res.data)
      .finally(() => setIsLoading(false));
  };

  const postFileRequest = async (url, data) => {
    setIsLoading(true);
    const token = await getAccessTokenSilently();
    return axios
      .post(url, data, { headers: { Authorization: `Bearer ${token}` }, responseType: 'arraybuffer' })
      .then((res) => res.data)
      .finally(() => setIsLoading(false));
  };

  return {
    isLoading,
    getRequest,
    postRequest,
    putRequest,
    patchRequest,
    deleteRequest,
    getFileRequest,
    postFileRequest
  };
}

export default useAxios;