import React, { useState, useEffect } from "react";
import { io } from "socket.io-client";

function useInput({ type }) {
  const [value, setValue] = useState("");
  const input = (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      type={type}
    />
  );
  return [value, input];
}

function App() {
  const [ENDPOINT, setEndpoint] = useInput({ type: "text" });
  const [response, setResponse] = useState("");

  const handleConnection = () => {
    // setEndpoint();
    const socket = io(ENDPOINT);
  };

  return (
    <>
      <p>ENTER THE ENDPOINT</p>
      {setEndpoint} -> {ENDPOINT}
      <br />
      <button onClick={handleConnection}>CLICK HERE TO TEST</button>
      <p>
        It's <time dateTime={response}>{response}</time>
      </p>
    </>
  );
}

export default App;