import React, { useState, useEffect } from 'react';
import { useSSE, SSEProvider, createCustomSource } from 'react-hooks-sse';
import './App.css';
import EventList from '../eventList/EventList.js';

function SSE() {
  const state = useSSE('events');
  const [events, setEvents] = useState([]); // initialises Event state

  useEffect(() => {
    console.log('render');
    if (state) {
      setEvents([JSON.parse(state.data), ...events]);
    }
  }, [state])

  return events;
}

function App() {

  return (
  <SSEProvider endpoint="/events">
    <SSE/>
  </SSEProvider>
  )

}

export default App;