JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<div id="root">
</div>

JavaScript

const TodoApp = props => {
  const host = "https://alerts.com.ua/api/states/live";
	const [XAPIKey, setXAPIKey] = React.useState('');
  const [connection, setConnection] = React.useState(null);
  const [events, setEvents] = React.useState([]);
  const connect = React.useCallback(() => {
  	const es = new EventSourcePolyfill(host, {headers: {'X-API-Key': XAPIKey}});
    es.addEventListener('error', e => {
    	alert(`SSE error: ${e.status} ${e.statusText}`);
      setConnection(null);
    });
    setConnection(es);
  }, [XAPIKey]);
  const disconnect = React.useCallback(() => {
  	connection.close();
  	setConnection(null);
  }, [connection]);
  return (
    <div>
      <antd.Input placeholder="SSE Endpoint" value={host} disabled={true} />
      <antd.Input placeholder="X-API-Key" onChange={e => setXAPIKey(e.target.value)} />
      {!connection ? (
      	<antd.Button onClick={connect}>Connect</antd.Button>
      ) : (
      	<antd.Button onClick={disconnect}>Disconnect</antd.Button>
      )}
    </div>
  )
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))