import React, { Fragment } from 'react';
import { usePolling } from 'react-polling-hook';

const App = () => {
  const [isPolling, startPolling, stopPolling] = usePolling({
    url: 'url to poll',
    interval: 3000, // in milliseconds(ms)
    retryCount: 3, // this is optional
    onSuccess: () => console.log('handle success'),
    onFailure: () => console.log('handle failure'), // this is optional
    method: 'GET',
    headers: "headers object", // this is optional
    body: JSON.stringify(data) // data to send in a post call. Should be stringified always
  });

  return (
    <div className="App">
      {isPolling ? (
        <Fragment>
          <div> Hello I am polling</div>
          <button onClick={stopPolling}>Stop Polling</button>
        </Fragment>
      ) : (
        <Fragment>
          <div> Hello I have stopped polling</div>
          <button onClick={startPolling}>Start Polling</button>
        </Fragment>
      )}
    </div>
  );
}

function onSuccess(response) {
  // You can do anything with this response, may be add to an array of some state of your react component
  // return true to continue polling
  // return false to stop polling
}

function onFailure(error) {
  // You can log this error to some logging service
  // clean up some state and variables.
}