tdc-js-modules/hooks/useGet.ts

import React, { useEffect, useState } from 'react';
import axios, { AxiosResponse } from 'axios';
import { UseFetchConfigType, UseGetReturnType } from '../@types/useGet';

/**
 * Hook useGet.
 * Utilidad principal de la aplicación para hacer llamadas a APIs.
 * Este hook entrega una intefaz funcional que permite:
 * Consultar y transformar un la data traida de la API a través de una función transformadora.
 * Indicar que tipo de datos retorna la consulta a través de un Genérico.
 * Setear un valor inicial a la consulta y señalar si debería preguntarse onMount(al cargar el componente).
 * Llamar programaticamente un refetch si es necesario (funcion fetch())
 * @param url: URL de la consulta
 * @param config: Configuración de tipo UseFetchConfigType
 */
function useGet<T = any>(url: string, config: UseFetchConfigType = { onMount: false, tokenAuthHeader: 'Token' }): UseGetReturnType<T> {
  const [data, setData] = useState<T>(config.initialValue);
  const [error, setError] = useState<{} | null>(null);
  const [response, setResponse] = useState<AxiosResponse | undefined>(undefined);
  const [loading, setLoading] = useState<boolean>(true);
  const [trigger, setTrigger] = useState(false);
  const user = sessionStorage.getItem('user');
  const headers: { [key: string]: string } = {};
  if (user) {
    try {
      const parsed_user = JSON.parse(user);
      headers['Authorization'] = `${config.tokenAuthHeader} ${parsed_user.jwt}`;
    } catch (e) {}
  }
  const fetch = () => {
    setLoading(prevState => !prevState);
    setError(null);
    setData(config.initialValue);
    setTrigger(true);
  };

  const getData = () => {
    setLoading(true);
    axios
      .get(url, { headers })
      .then(res => {
        if (config.transformFunction) {
          setData(config.transformFunction(res.data));
        } else {
          setData(res.data);
        }
        setLoading(false);
        setResponse(res);
        /*console.log('HTTP-LOG GET', {url, data: res.data})*/
      })
      .catch(err => {
        /*      console.log("catch")
            console.log("ERR", JSON.stringify(err), err, err.message, err.response);*/
        setLoading(false);
        setError(err);
        setResponse(err.response);
        /*console.log('HTTP-LOG-GET-ERROR', {url, error: err, response: err.response})*/
        throw err;
      });
  };

  useEffect(() => {
    if (config.onMount) {
      getData();
    }
  }, [config.onMount]);

  useEffect(() => {
    if (trigger) {
      getData();
      setTrigger(false);
    }
  }, [trigger]);

  return { data, error, loading, response, fetch, setData };
}

function useGetMock<T = any>(url: string, config: UseFetchConfigType & {resolve: boolean}= { onMount: false, tokenAuthHeader: 'Token', resolve: false }): UseGetReturnType<T> {
  const [data, setData] = useState<T>(config.initialValue);
  const [error, setError] = useState<{} | null>(null);
  const [response, setResponse] = useState<AxiosResponse | undefined>(undefined);
  const [loading, setLoading] = useState<boolean>(true);
  const [trigger, setTrigger] = useState(false);
  const sleep = (ms: number) => new Promise(() => {}) ;
  const fetch = () => {
    setLoading(prevState => !prevState);
    setError(null);
    setData(config.initialValue);
    setTrigger(true);
  };

  const getData = () => {
    setLoading(true);

  };

  useEffect(() => {
    if (config.onMount) {
      getData();
    }
  }, [config.onMount]);

  useEffect(() => {
    if (trigger) {
      getData();
      setTrigger(false);
    }
  }, [trigger]);
  return {loading, fetch, setData, data, error, response}
}
export default useGet;