Untitled

import "./styles.css";

import React from "react";
import { useState, useEffect } from "react";

class ConnectionClass {
  constructor() {
    console.log("Socket is created");
  }
  connect(url) {
    console.log("Connected:" + url);
  }
  send(data) {
    console.log("Sending " + data);
  }
  disconnect() {
    console.log("Disconnected");
  }
  subscribe(name) {
    console.log(name + " has subscribed");
  }
  unsubscribe(name) {
    console.log(name + " has unsubscribed");
  }
}

function Connection({ connection }) {
  const [isConnected, setIsConnected] = useState(false);

  const [url, setUrl] = useState("");

  useEffect(() => {
    return () => {
      connection.disconnect();
    };
  }, [connection]);

  function handleButtonClick(e) {
    isConnected ? connection.disconnect() : connection.connect(url);
    setIsConnected(!isConnected);
  }

  return (
    <>
      <button onClick={handleButtonClick}>
        {isConnected ? "Disconnect" : "Connect"}
      </button>
      <input type="text" value={url} onChange={(e) => setUrl(e.target.value)} />
    </>
  );
}

const connection = new ConnectionClass();

/*
const connectionContext = {
  subscribe: connection.subscribe,
  unsubscribe: connection.unsubscribe,
  send: connection.subscribe
};
*/

export default function App() {
  return (
    <div className="App">
      <Connection connection={connection} />
    </div>
  );
}