React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Andrew Dunai

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.0/antd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.0/antd.dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/eventsource.min.js"></script>
<div id="container">
</div>

Babel + JSX

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 logEvent = React.useCallback((type, data) => {
    setEvents(events => [
      {time: new Date(), type: type, data: data},
      ...events
    ]);
  }, []);
  const connect = React.useCallback(() => {
    const es = new EventSourcePolyfill(host, {headers: {'X-API-Key': XAPIKey}, credentials: 'include'});
    es.addEventListener('open', e => logEvent('open', null));
    es.addEventListener('error', e => {
    	logEvent('error', `SSE error: ${e.error}`);
      es.close();
      setConnection(null);
    });
    ['hello', 'ping', 'update'].map(type => es.addEventListener(type, e => logEvent(type, e.data)));
    setConnection(es);
  }, [XAPIKey]);
  const disconnect = React.useCallback(() => {
    logEvent('close', null);
    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}>{connection.readyState === 0 ? 'Connecting...' : 'Disconnect'}</antd.Button>
      )}
      <div>
        {events.map(event => <div key={event.time.getTime()}><tt><strong>[{event.time.toUTCString()}]</strong> type={event.type}, data={event.data}</tt></div>)}
      </div>
    </div>
  )
}

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