import React, { useEffect } from "react";
import { useState } from "react";
import { ping } from "../Api";

export const useIsConnected = () => {
	const [connected, setConnected] = useState(true);

    useEffect(() => {
        const interval = setInterval(() => {
            ping()
			.then(() => {
				setConnected(true);
			})
			.catch(() => {
				setConnected(false);
			});
        }, 5000);
      
        return () => clearInterval(interval);
      }, []);

	return (
		<div>
			{connected ? (
				<p className="Connected">Connected</p>
			) : (
				<p className="Disconnected">Disconnected</p>
			)}
		</div>
	);
};