import "./App.css";

import useFetch from "./useFetch";

​

function App() {

  const { data: joke, loading, error, refetch } = useFetch(

    "https://v2.jokeapi.dev/joke/Any"

  );

​

  if (loading) return <h1> LOADING...</h1>;

​

  if (error) console.log(error);

​

  return (

    <div className="App">

      <h1>

        {joke?.setup} : {joke?.delivery}

      </h1>

​

      <button onClick={refetch}> Refetch</button>

    </div>

  );

}

​

export default App;

​

// ########## useFetch component  ##########

import { useEffect, useState } from "react";

import axios from "axios";

​

function useFetch(url) {

  const [data, setData] = useState(null);

  const [loading, setLoading] = useState(false);

  const [error, setError] = useState(null);

​

  useEffect(() => {

    setLoading(true);

    axios

      .get(url)

      .then((response) => {

        setData(response.data);

      })

      .catch((err) => {

        setError(err);

      })

      .finally(() => {

        setLoading(false);

      });

  }, [url]);

​

  const refetch = () => {

    setLoading(true);

    axios

      .get(url)

      .then((response) => {

        setData(response.data);

      })

      .catch((err) => {

        setError(err);

      })

      .finally(() => {

        setLoading(false);

      });

  };

​

  return { data, loading, error, refetch };

}

​

export default useFetch;