import React from "react";
import axios from "axios";

function App() {
  const apiCall = async () => {
    try {
      const ping = await axios({
        url: "https://rest.ensembl.org/info/ping?content-type=application/json",
        method: "GET",
        headers: {
          accept: "Application/json",
          "Content-Type": "Application/json",
        },
      });
      return ping.data;
    } catch (error) {
      return error.response;
    }
  };

  const myIntervalFunc = () => {
    let myCall = async () => await apiCall();
    let retryNum = 0;
    
    // do you need to call this here?
    // it doesn't seem like this would do anything
    myCall();

    // create interval as a named function
    const interval = async () => {
        let intervalCall = await myCall();
        
        // end loop if ping === 2
        if (intervalCall.ping === 2) {
          return;
        }

        retryNum++;
        console.log("INTERVAL DATA ", intervalCall);
        
        // you don't need to change the `===` to `>=`
        // I find this is a `safe` way to handle it
        // in case something else increments retryNum
        // beyond 6 
        if (retryNum >= 6) {
          return;
        }

        // run `interval` again
        setTimeout(interval, 3000);
    };
    
    // call interval
	//	https://stackoverflow.com/questions/67726138/is-there-a-way-to-fetch-data-every-second-in-nextjs-with-getserversideprops
    interval();
  };

  return <button onClick={() => myIntervalFunc()}>Make interval call</button>;
}

export default App;