yb-blades-tst/src/utils/useApi.ts

It allows developers to visualize data in a variety of chart types such as line, bar, column, pie, and more.

import { useEffect, useState } from "react";

const useApi = () => {
  const [awaitingResponse, setAwaitingResponse] = useState<any>({});
  const [data, setData] = useState<any>({});
  const [error, setError] = useState<any>({});
  useEffect(()=>{
    return ()=>{
        cleanState()
    }
  },[])
  const cleanState=()=>{
    setAwaitingResponse({})
    setData({})
    setError({})
  }
  const handleApi = async (fetchDetails:any,dataFor:string,isGet:boolean=true) => {
    if(!dataFor){
      return;
    }
    setAwaitingResponse((prev:any)=>({...prev,[dataFor]:true}));
    try {
      const response =fetchDetails.options ? await fetch(fetchDetails.url.fetchDetails.options) : await fetch(fetchDetails.url);
      const responseData = await response.json();
      if (response.ok) {
        setData((prev:any)=>({...prev,[dataFor]:responseData}));
      } else {
        setError((prev:any)=>({...prev,[dataFor]:responseData?.toString()}));
      }
    } catch (error:any) {
      setError({[dataFor]:error?.message || error.toString()});
    } finally {
      setAwaitingResponse((prev:any)=>({...prev,[dataFor]:false}));
    }
  };
  return { awaitingResponse, data, error,handleApi };
};

export default useApi;